:root {
    --padding-unit: 4px;
    --off-white: #f1f1f1;
    --theme-left-corner: #d16ba5;
    --theme-left-middle: #8e7dbf;
    --theme-center: #4c97b3;
    --theme-right-middle: #4fcdd7;
    --theme-right-corner: #5ffbf1;
    --light-black: #252525;
    --mobile-width: 360px;
}

body {
    background-image: linear-gradient(to right top, #d16ba5, #b175b7, #8e7dbf, #6c83bb, #5585ae, #4f8eb2, #4c97b3, #4ea0b3, #4eb6c6, #4fcdd7, #54e4e5, #5ffbf1);
    background-repeat: no-repeat;
    font-family: 'Roboto', sans-serif;
    padding-left: var(--padding-unit);
    padding-right: var(--padding-unit);
    min-height: 100Vh;
}

h1 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--off-white);
}

.larger-font {
    font-size: 1.2rem;
    color: var(--off-white);
}

.card {
    background: radial-gradient(circle at left top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));

    border: 1px solid rgba( 255, 255, 255, 0.18 );
    border-radius: 6px;

    padding: calc(var(--padding-unit)*1) calc(var(--padding-unit)*3) calc(var(--padding-unit)*1) calc(var(--padding-unit)*3);
    margin-bottom: calc(var(--padding-unit)*2);
    margin-right: calc(var(--padding-unit)*2);
    width: calc(50% - 34px);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    /*Intend to add a better background to allow blur*/
    .card {
        background: radial-gradient(circle at left top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }
}