@font-face {
    font-family: Chelsea-Market;
    src: url(fonts/ChelseaMarket-Regular.ttf);
}

@font-face {
    font-family: Comico;
    src: url(fonts/Comico-Regular.woff2);
}

@font-face {
    font-family: Gentium;
    src: url(fonts/GentiumPlus-Regular.ttf);
}

@font-face {
    font-family: Gentium;
    src: url(fonts/GentiumPlus-Italic.ttf);
    font-style: italic;
}

@font-face {
    font-family: Gentium;
    src: url(fonts/GentiumPlus-Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: Gentium;
    src: url(fonts/GentiumPlus-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-attachment: fixed;
    margin: 0;
    color: rgb(255, 240, 153);
}

#scrabbletitle {
    position: absolute;
    display: block;
    margin: auto;
    margin-top: 0;
    max-width: min(100%, 80dvw);
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

#body-container {
    display: flex;
    transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

#scrabble-right {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    max-width: 3rem;
    z-index: 3;
    rotate: -2deg;
    transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

main {
    background-color: rgba(19, 36, 0, 0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem;
    margin: min(2rem, 1%);
    margin-top: min(140px, 17%);
    position: relative;
    z-index: 1;
}

#container-main {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;
}


#stickynote {
    position: relative;
    display: inline-flex;
}

#stickynote img {
    max-width: min(100em, 100%);
    max-height: auto;
}

#stickynote iframe {
    position: absolute;
    border: none;
    width: 95%;
    height: 85%;
    top: 13%;
    left: 3%;
    z-index: 2;
    scrollbar-width: none;
}

#buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#container-aside-desktop {
    margin-top: min(140px, 17%);
    margin-left: min(2rem, 1%);
}
#aside-desktop {
    position: sticky;
    top: 1rem;
}

#tv-aside {
    border: 20px solid transparent;
    border-image: url('monitor-border.png') 34 stretch;
    margin-bottom: 1rem;
    max-width: 11rem;
    height: auto;
    position: relative;
    z-index: 1;
}

.container-aside {
    background-color: rgba(19, 36, 0, 0.6);
    padding: 2rem;
    margin: 0 0 1rem 0;
    position: relative;
    z-index: 1;
}

#container-aside a {
    text-decoration: none;
}

#container-mobile-aside {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    translate: calc(-50% + 100vw) -50%;
    width: 20rem;
    height: 20rem;
    z-index: 3;
    transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

#mobile-aside {
    background-color: rgba(19, 36, 0, 0.6);
    width: 15rem;
    height: 15rem;
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#scrabble-left {
    position: absolute;
    max-width: 3rem;
    top: 1rem;
    right: 1rem;
    rotate: 5deg;
    z-index: 4;
}

#tv {
    display: none;
}

@media (max-width: 630px) {
    #body-container {
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }

    #container-aside-desktop {
        display: none;
    }

    #scrabble-right {
        display: unset;
    }

    #container-mobile-aside {
        display: flex;
    }
    #tv {
        display: block;
        border: 20px solid transparent;
        border-image: url('monitor-border.png') 34 stretch;
        max-width: min(15rem, 60vw);
        height: auto;
        margin: 2rem 0 2rem 0;
    }
}

h1, h2, h3, h4, h5 {
    font-family: Comico;
    font-weight: normal;
}


p, ul {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
    color: rgb(255, 240, 153);
}