body {
    display: flex;
    background-image: url(https://i.pinimg.com/736x/94/29/13/942913f929d8c99e07094e67341d0f09.jpg);
    font-family: Exo;
}

@font-face {
    font-family: Exo;
    src: url(https://files.catbox.moe/iw36zn.otf) format(OpenType);
    font-weight: bold;
}

@font-face {
    font-family: Exo;
    src: url(https://files.catbox.moe/147f7i.otf) format(OpenType);
}

@font-face {
    font-family: Audiowide;
    src: url(https://files.catbox.moe/obafna.ttf) format(TrueType);
}

t1 {
    font-family: Audiowide;
    color: #e3047b;
    text-shadow: 0 0 3px white, 3px 3px white, 3px -3px white, -3px 3px white, -3px -3px white, 3px 0 white, -3px 0 white, 0 -3px white, 0 3px white,
    4px 4px #7f8aa0;
    font-size: 30px;
}

.textbox {
    margin-bottom: 10px;
}

.container {
    z-index: 2;
    display: grid;
    margin-left: auto; margin-right: auto;
    grid-template-areas: "header header"
                        "body rightcolumn";
    grid-template-columns:  550px 250px;
    grid-template-rows: 200px 500px;
    row-gap: 5px; column-gap: 5px;
}

.container > * {
    border: 1px solid black;
    position: relative;
}

#header {
    grid-area: header;
    border-top-right-radius: 650px; border-top-left-radius: 650px;
    background-image: url(https://files.catbox.moe/jybun3.jpg); background-size: cover;
    border: 4px double white;
}

    #htitle {
        z-index: 10;
        height: 175px;
        bottom: -20px;
        position: absolute;
        left: 50px;
    }

#body {
    grid-area: body;
    background: linear-gradient(to bottom, white, #ffffff80), url(https://files.catbox.moe/9et05u.png);
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
    color: #475268;
    border: 1px solid #05b7da;
}

#rightcolumn {
    border: none;
    box-sizing: border-box;
    padding: 5px;
    grid-area: rightcolumn;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.link:hover, .link.active {
    background-image: url(https://files.catbox.moe/suao0e.png);
    background-size: 45px;
    scale: 1.02;
    animation: saturate 5s infinite;
}

.link {
    padding: 7px;
    transition: all .5s ease;
    border-radius: 5px;
    background: linear-gradient(to bottom, white, #ffffff80), url(https://files.catbox.moe/9et05u.png);
    width: 220px;
    box-shadow: inset 0 0 2px white, inset -1px -1px white, inset -1px 1px white, inset -1px 0 white, inset 0 -1px white, inset 1px -1px white, inset 1px 1px white, inset 1px 0 white, inset 0 1px white;
    height: 36px;
    border: 1px solid #7f8aa0;
}

.link text {
    color: #475268;
    font-family: Audiowide;
    color: #e3047b;
    text-shadow: 0 0 3px white, 3px 3px white, 3px -3px white, -3px 3px white, -3px -3px white, 3px 0 white, -3px 0 white, 0 -3px white, 0 3px white,
    4px 4px #7f8aa0;
    font-size: 20px;
}

@keyframes saturate {
    0% {
        filter: saturate(100%) brightness(100%);
    }

    50% {filter: saturate(110%) brightness(110%) hue-rotate(20deg);}

    100% {filter: saturate(100%) brightness(100%);}
}

/*clouds*/

#leftclouds, #rightclouds {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 200px;
    margin-top: auto; margin-bottom: auto;
    height: 400px;
    z-index: 1;
}

#cool, #quirky {
    width: 200px;
    position: absolute;
    z-index: 0;
}

#cute, #elegant {
    bottom: 0;
    width: 200px;
    height: 100px;
    position: absolute;
    z-index: 0;
}

/* left cloud keyframes...*/
@keyframes leftbutton {
    0% {
        right: -35px;
        top: 0;
        transform: scale(1);
        filter: brightness(75%);
    }


    50% {
        right: 105px;
        top: 20px;
        transform: scale(1.1);
        z-index: 10;
    }

    100% {
        right: 25px;
        top: 30px;
        transform: scale(1.4);
        filter: brightness(100%);
    }
}

@keyframes leftbuttonReverse {
    0% {
      right: 25px;
      top: 30px;
      transform: scale(1.4);
      filter: brightness(100%);
    }
    50% {
      right: 105px;
      top: 20px;
      transform: scale(1.1);
      z-index: 10;
    }
    100% {
      right: -35px;
      top: 0;
      transform: scale(1);
      filter: brightness(75%);
    }
}
  
.cloud.animating-forward {
    animation: leftbutton 1.5s forwards;
}
  
.cloud.animating-reverse {
    animation: leftbuttonReverse 1.5s forwards;
}

.cloud {
    position: absolute;
    transition: all 0.3s ease;
    height: 90px;
    right: -25px;
    top: 0;
    filter: brightness(75%);
}

/* right cloud keyframes...*/
@keyframes rightbutton {
    0% {
        left: -35px;
        top: 0;
        transform: scale(1);
        filter: brightness(75%);
        z-index: 0;
    }


    50% {
        left: 100px;
        top: 20px;
        transform: scale(1.1);
        z-index: 10;
    }

    100% {
        left: 25px;
        top: 30px;
        transform: scale(1.4);
        filter: brightness(100%);
    }
}

@keyframes rightbuttonReverse {
    0% {
      left: 25px;
      top: 30px;
      transform: scale(1.4);
      filter: brightness(100%);
    }
    50% {
      left: 100px;
      top: 20px;
      transform: scale(1.1);
      z-index: 10;
    }
    100% {
      left: -35px;
      top: 0;
      transform: scale(1);
      filter: brightness(75%);
      z-index: 0;
    }
}
  
.rightcloud.animating-forward {
    animation: rightbutton 1.5s forwards;
}
  
.rightcloud.animating-reverse {
    animation: rightbuttonReverse 1.5s forwards;
}

.rightcloud {
    position: absolute;
    transition: all 0.3s ease;
    height: 90px;
    left: -25px;
    top: 0;
    z-index: 0;
    filter: brightness(75%);
}