:root {
  --white: #FFd0D9;
  --black: #341623;
  --black2: #652E45;
  --pink: #FFA1B4;
  --pink2: #FFC3CF;
  --purple: #C47EAF;
  --blue: #AFB7D9;
  --yellow: #F9B89E;
  --yellow2: #ECA172;
}

@font-face {
  font-family: gae;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/Gaegu-Regular.ttf);
}

@font-face {
  font-family: int;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/fonts/Internet%20Friends.ttf);
}

@font-face {
  font-family: glam;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/fonts/glamour.ttf)
}

body {
  font-family: gae;
  color: var(--black2);
}

header.page {
  display: block;
  width: calc(100% - 36px);
  border: 3px solid var(--black);
  color: var(--black);
  padding: 15px;
  margin-bottom: 5px;
  background: var(--white);
box-shadow: inset 0px 0px 0px 5px #F9B89E, inset 0px 0px 0px 7px #652E45;
  border-radius: 20px 20px 0px 0px;
}

header.page left, header.page right {
  display: inline-block;
}

header.page left {
  width: calc(30% - 5px);
  text-shadow: -1px 0 var(--black2), 0 1px var(--black2), 1px 0 var(--black2), 0 -1px var(--black2), 0 0;
  margin-right: 5px;
  color: var(--purple);
  font-family: glam;
  font-size: 3.5cqw;
}

header.page right {
  text-align: right;
  width: 65%;
}


header.page right a {
  display: inline-block;
  width: calc(15% - 13px);
  margin-right: 5px;
  padding: 2px;
  border: 2px solid var(--black2);
  border-radius: 15px;
  text-align: center;
  transition: 0.5s;
  font-family: gae;
  color: var(--black2);
  
}

header.page right a:last-of-type {
  margin-right: 0px;
}

header.page right a:hover {
  transform: translatey(-10px);
}

flex {
  display: flex
}

flex left, flex right, flex middle {
  display: inline-block;
}


header.page right a:nth-child(3n + 1) {
  background-color: var(--pink);
}

header.page right a:nth-child(3n + 2) {
  background-color: var(--yellow);
}

header.page right a:nth-child(3n) {
  background-color: var(--purple);
}

footer {
  display: block;
  width: calc(100% - 36px);
  border: 3px solid var(--black);
  color: var(--black);
  padding: 15px;
  margin-top: 10px;
  text-align: center;
  background: var(--white);
box-shadow: inset 0px 0px 0px 5px #F9B89E, inset 0px 0px 0px 7px #652E45;
  border-radius: 20px;
}

/* scrollbar */


    #container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

        ::-webkit-scrollbar {
        width: 14px;
        }

        ::-webkit-scrollbar:horizontal {
        height: 14px;
        }

        ::-webkit-scrollbar-corner {
        background: #eee;
        }

        ::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }

        ::-webkit-scrollbar-track:horizontal {
        background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
        border: 1.5px solid #888;
        border-radius: 5px;
        box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
        }

        ::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
        }

        ::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
        }

        ::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block;
        }

        ::-webkit-scrollbar-button:vertical {
        height: 15px;
        }

        ::-webkit-scrollbar-button:vertical:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

        ::-webkit-scrollbar-button:vertical:start:increment {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

        ::-webkit-scrollbar-button:horizontal {
        width: 14px
        }
        ::-webkit-scrollbar-button:horizontal:start:increment {
        display: none;
        }
        ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:horizontal:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }

        ::-webkit-scrollbar-button:horizontal:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }