html{
    height: 100%;
    --container-size: 100vw;
    --cad-tile-size: calc(var(--container-size) * 0.7);
    --boyfriends-tile-size: calc(var(--container-size) * 0.55);
    --like-you-tile-size: calc(var(--container-size) * 0.35);
    --kayaking-tile-size: calc(var(--container-size) * 0.3);
    --header-margin-offset: 15vh;

    --colour-bg-grad-start: #E0FBFC;
    --colour-bg-grad-end: #98C1D9;
    
    --colour-boyfriends-tile-bg: #EE6C4D;
    --colour-boyfriends-tile-text: #FFFFFF;
    --colour-boyfriends-tile-description: #293241;

    --colour-like-you-tile-bg: #3D5A80;
    --colour-like-you-tile-text: #FFFFFF;
    --colour-like-you-tile-description: #EE6C4D;

    --colour-kayaking-tile-bg: #293241;
    --colour-kayaking-tile-text: #FFFFFF;
    --colour-kayaking-tile-description: #EE6C4D;

}

@media only screen and (min-width: 768px){
    html{
        --container-size: min(80vh, 80vw);
        --cad-tile-size: calc(var(--container-size) * 0.5);
        --boyfriends-tile-size: calc(var(--container-size) * 0.3);
        --like-you-tile-size: calc(var(--container-size) * 0.15);
        --kayaking-tile-size: calc(var(--container-size) * 0.15);
        --header-margin-offset: 0;
    }
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    background: linear-gradient(var(--colour-bg-grad-start), var(--colour-bg-grad-end));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

footer{
    position: absolute;
    bottom: 0;
    right: 0;
    color: white;
    padding-right: 0.5em;
}

.container{
    width: var(--container-size);
    height: var(--container-size);
    margin-top: 15vh;
    margin-bottom: 15vh;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
}


.row{
    display: flex;
    flex-direction: row-reverse;
}
.column{
    flex: 1;
}

.tile{
    position: relative;
    margin: 0.25em;
}

.cad_tile{
    width: var(--cad-tile-size);
    height: var(--cad-tile-size);
    /* padding-right: calc(var(--container-size) - var(--cad-tile-size) - var(--kayaking-tile-size)); */
}

.cad_tile img{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: rotate(-10deg);
}

.date_tile {
    border-radius: 50%;
    width: 10em;
    height: 10em;
    text-align: center;
}

.boyfriends_tile{
    background-color: var(--colour-boyfriends-tile-bg);
    color: var(--colour-boyfriends-tile-text);
    width: var(--boyfriends-tile-size);
    height: var(--boyfriends-tile-size);
    font-size: calc(var(--boyfriends-tile-size) / 8);
}

.boyfriends_tile .description{
    font-size: calc(var(--boyfriends-tile-size) / 14);
    color: var(--colour-boyfriends-tile-description)
}

.like_you_tile{
    background-color: var(--colour-like-you-tile-bg);
    color: var(--colour-like-you-tile-text);
    width: var(--like-you-tile-size);
    height: var(--like-you-tile-size);
    font-size: calc(var(--like-you-tile-size) / 8);
}

.like_you_tile .description{
    font-size: calc(var(--like-you-tile-size) / 10);
    color: var(--colour-like-you-tile-description);
}

.kayaking_tile{
    background-color: var(--colour-kayaking-tile-bg);
    color: var(--colour-kayaking-tile-text);
    width: var(--kayaking-tile-size);
    height: var(--kayaking-tile-size);
    font-size: calc(var(--kayaking-tile-size) / 8);
}

.kayaking_tile .description{
    font-size: calc(var(--kayaking-tile-size) / 10);
    color: var(--colour-kayaking-tile-description);
}

.description{
    font-size: 10pt;
}

.description_top{
    position: absolute;
    top: 2px;
    left: 50%;
}

.description_bottom{
    position: absolute;
    bottom: 2px;
    left: 50%;
}

.hidden {
    display: none;
}

@media only screen and (min-width: 768px){
    .container{
        width: var(--container-size);
        height: var(--container-size);
        margin-top: calc((100vh - var(--container-size)) / 2);
        margin-bottom: calc((100vh - var(--container-size)) / 2);
        margin-left: calc((100vw - var(--container-size)) / 2);
        margin-right: calc((100vw - var(--container-size)) / 2);
        display: flex;
        flex-direction: column;
    }
}