/*PROTOMO*/ 
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;900&family=Sigmar&display=swap');

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ----    OVERLAY STUFF    ----
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#overlay {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .05;
    background-image: url(https://files.catbox.moe/88n1pv.png);
    background-blend-mode:hue;
    background-color: #66ccff;
    pointer-events: none !important;
}
.coverlayer {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 204, 0, 0.2); /* Black background with opacity */
    z-index: 99; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    pointer-events: none;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ----    GENERAL    ----
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body {
    background-color: #000033;
    background-image: url(https://file.garden/Zn8dZnsVuBTAwg1d/SiteAssets/BGs/bg_cute-flowers.gif);
    font-family: 'Nunito';
}
p {
    margin: 10px
}
a {
    text-decoration: none;
    color: #6666ff;
}
a:visited {
    color: #6666ff
}
li a {
    color: #660066 !important
}
li:hover {
    transform: scale(1.05);
    text-shadow: 0px 0px 5px white;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ----    CONTENT    ----
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#everything {
    height: 1100px;
    width: 875px;
    margin: auto;
    margin-top: 50px;
}
#foreground {
    position: absolute;
    pointer-events: none !important;
    opacity: 1;
    z-index: 5;
}
#button-back {
    z-index: 6;
    position: relative;
    bottom: 160px;
    left: 120px;
    height: 92px;
    width: 95px;
    background-image: url(https://file.garden/Zn8dZnsVuBTAwg1d/SiteAssets/Resources/QJ21064_SitePage_Resources_BackButton.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ----    THE SIDES    ----
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#top--title {
    height: 250px;
    position: relative;
}
#both-sides {
    display: flex;
    position: relative;
}

/*
    ----    LEFT SIDE: DESC & NAV    --------------------------
*/
#left--navigation {
    height: 500px;
    width: 230px;
    padding-left: 60px;
}
#description {
    margin: 75px 0px 65px 28px;
    background-color: #000066;
    height: 112.5px;
    width: 200px;
    overflow: auto;
    color: #6666ff
}
#navigation {
    margin: 0px 25px 0px 27px;
    background-color: #000066;
    height: 275px;
    width: 200px;
    overflow: auto;
    padding-left: 5px;
}
.nav-select:hover {
    letter-spacing: 1px;
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.2);
    /* Black w/opacity/see-through */
    text-decoration: none;
    font-style: italic;
    animation: colorRotate 0.7s linear 0s infinite;
}

/*
    ----    RIGHT SIDE: SECTIONS    --------------------------
*/
#right--content {
    height: 775px;
    width: 525px;
    background-color: #ff99ff;
    border-radius: 70px 70px 120px 120px;
}
#content-right-here {
    overflow: auto;
    margin: 0px 25px;
    height: 750px;
}
.content-padding {
    margin: 15px;
    width: 445px
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ----    TAB STUFF    ----
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.tab-content {
    display: none;
}
.tab-content.active {
    display:flex
}
.center {
    margin: auto;
    height: 750px;
    color: #660066;
}
@keyframes colorRotate {
  from {
    color: #66CCFF;
  }
  10% {
    color: #66FF99;
  }
  50% {
    color: #FFFF99;
  }
  75% {
    color: #ff99ff;
  }
  100% {
    color: #66CCFF;
  }
}
img {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.graphic-img {
    margin: 2px
}
.graphic-img:hover {
    transform: scale(1.2);
    border: 1px solid white;
    background: white;
    box-shadow: 0px 0px 5px 3px white;
}
.items-list {
    background: #ffff99;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 30px;
    width: 400px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 25px
}