/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: #ff95c9;
  font-size: 30px;
  font-family: 'Nintendo DS BIOS';
  text-align: left;
}
div {
    height: auto;
    width:auto;
    padding:15px;
}
h1 {
  color: #ff95c9;
    font-family: 'Bubble Brush';
      margin: 10px;
}
h2 {
  color: #ff95c9;
    font-family: 'Sweet Heart';
    margin-top:20px;
    text-shadow: 3px 3px rgba(255, 214, 234);
      margin-bottom:-5px;
      text-align:center;
}

ul {
  margin:10px;
  font-size:17px;
  line-height: 25px;
  list-style-image: url('https://files.catbox.moe/pu0l67.gif');
  list-style-type: square;
  image-rendering: pixelated;
}

b, strong {
  color: #ff6bb4;
}

i, em {
  color: #ff6bb4;
}

a {
  color: #a0c5ff;
  text-decoration: none;
}

a:hover {
        background: linear-gradient(to right, #ff95c9, #ff9977, #ffeda0, #d9ffa0, #a0ffda, #a0c5ff, #d3a0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 2s infinite alternate ease-in-out;
      background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

p {
  line-height: 20px;   /* within paragraph */
  margin: 10px; /* between paragraphs */
  font-size:17px;
  }

@font-face {
    font-family: 'Sweet Heart';
    src: url('https://files.catbox.moe/xir5lx.woff2') format('woff2');
        }
        
@font-face {
    font-family: 'Nintendo DS BIOS';
    src: url('https://files.catbox.moe/vsvtoe.ttf') format('truetype');
        }
        
@font-face {
    font-family: 'Bubble Brush';
    src: url('https://files.catbox.moe/905kw1.ttf') format('truetype');
        }


.menu {
  background: rgba(255,255,255);
  font-size:20px;
}

.flex {
  display: flex;
  column-gap:15px;
  justify-content:center;
  height:auto;
}

.landingbox {
  display: flex;
  column-gap:15px;
  justify-content:center;
}

.navi {
  display: flex;
  justify-content:center;
    padding:7px;
  line-height:5px;
  font-size:17px;
  gap:10px;
}

.hypernav {
  display: flex;
  justify-content:center;
    padding:7px;
  line-height:5px;
  flex-wrap: wrap;
  font-size:17px;
  gap:10px;
}

.hyper1 {
  color:#ff95c9;
  width:100%;
  text-align:center;
  border: dashed #ff95c9;
  border-width: 2px;
  background-color:rgba(255, 214, 234, 0.5);
}

.hyper1 a {
  color:#ff95c9;
  font-weight:bold;
}

.hyper1 a:hover {
  text-transform: uppercase;
}

.hyper2 {
  width:100%;
  text-align:center;
    color:#ff9977;
  border: dashed #ff9977;
  border-width: 2px;
  background-color:rgba(255, 206, 171, 0.5);
}

.hyper2 a {
  color:#ff9977;
  font-weight:bold;
}

.hyper2 a:hover {
  text-transform: uppercase;
}

.hyper3 {
  width:100%;
  text-align:center;
  color:#ffe263;
  border: dashed #ffcd4f;
  border-width: 2px;
  background-color:rgba(255, 244, 196, 0.5);
}

.hyper3 a {
  color:#ffcd4f;
  font-weight:bold;
}

.hyper3 a:hover {
  text-transform: uppercase;
}

.hyper4 {
  width:100%;
  text-align:center;
    color:#abf043;
  border: dashed #abf043;
  border-width: 2px;
  background-color:rgba(217, 255, 160, 0.5);
}

.hyper4 a {
  color:#abf043;
  font-weight:bold;
}

.hyper4 a:hover {
  text-transform: uppercase;
}

.hyper5 {
  width:100%;
  text-align:center;
  color:#4be3d4;
  border: dashed #4be3d4;
  border-width: 2px;
  background-color:rgba(191, 255, 230, 0.5);
}

.hyper5 a {
  color:#4be3d4;
  font-weight:bold;
}

.hyper5 a:hover {
  text-transform: uppercase;
}

.hyper6 {
  width:100%;
  text-align:center;
  color:#a0c5ff;
  border: dashed #a0c5ff;
  border-width: 2px;
  background-color:rgba(207, 225, 255, 0.5);
}

.hyper6 a {
  color:#a0c5ff;
  font-weight:bold;
}

.hyper6 a:hover {
  text-transform: uppercase;
}

.hyper7 {
  width:100%;
  text-align:center;
  color:#d3a0ff;
  border: dashed #d3a0ff;
  border-width: 2px;
  background-color:rgba(235, 212, 255, 0.5);
}

.hyper7 a {
  color:#d3a0ff;
  font-weight:bold;
}

.hyper7 a:hover {
  text-transform: uppercase;
}



.link1 {
  color:#ff95c9;
  border: dashed #ff95c9;
  border-width: 2px;
  background-color:rgba(255, 214, 234, 0.5);
}

.link1 a {
  color:#ff95c9;
  font-weight:bold;
}

.link1 a:hover {
  text-transform: uppercase;
}

.link2 {
  color:#ff9977;
  border: dashed #ff9977;
  border-width: 2px;
  background-color:rgba(255, 206, 171, 0.5);
}

.link2 a {
  color:#ff9977;
    font-weight:bold;
}

.link2 a:hover {
  text-transform: uppercase;
}

.link3 {
  color:#ffe263;
  border: dashed #ffcd4f;
  border-width: 2px;
  background-color:rgba(255, 244, 196, 0.5);
}

.link3 a {
  color:#ffcd4f;
    font-weight:bold;
}

.link3 a:hover {
    text-transform: uppercase;
}

.link4 {
  color:#abf043;
  border: dashed #abf043;
  border-width: 2px;
  background-color:rgba(217, 255, 160, 0.5);
}

.link4 a {
  color:#abf043;
    font-weight:bold;
}

.link4 a:hover {
    text-transform: uppercase;
}

.link5 {
  color:#4be3d4;
  border: dashed #4be3d4;
  border-width: 2px;
  background-color:rgba(191, 255, 230, 0.5);
}

.link5 a {
  color:#4be3d4;
    font-weight:bold;
}

.link5 a:hover {
    text-transform: uppercase;
}

.link6 {
  color:#a0c5ff;
  border: dashed #a0c5ff;
  border-width: 2px;
  background-color:rgba(207, 225, 255, 0.5);
}

.link6 a {
  color:#a0c5ff;
    font-weight:bold;
}

.link6 a:hover {
    text-transform: uppercase;
}

.link7 {
  color:#d3a0ff;
  border: dashed #d3a0ff;
  border-width: 2px;
  background-color:rgba(235, 212, 255, 0.5);
}

.link7 a {
  color:#d3a0ff;
    font-weight:bold;
}

.link7 a:hover {
    text-transform: uppercase;
}



.main {
  text-align: left;
  height:auto;
  scrollbar-width: thin;
  scrollbar-color: #ff95c9 transparent;
}
.main:-webkit-scrollbar {
  width: 11px;
}
.main:-webkit-scrollbar-track {
  background: transparent;
}
.main:-webkit-scrollbar-thumb {
  background-color:  #ff95c9;
  border-radius: 6px;
  border: 3px solid transparent;
}

.main:-webkit-scrollbar-thumb:hover {
  background-color:  #ff95c9;
  border-radius: 6px;
  border: 3px solid transparent;
}

.landingmain {
  text-align: center;
  justify-content:center;
  height:auto;
  scrollbar-width: thin;
  scrollbar-color: #ff95c9 transparent;
}

.container {
    order: 2;
  width: 35%;
  padding:5px;
  height:auto;
  background-image:url("https://i.imgur.com/gmtfgtg.png");
    background-repeat: repeat;
  border-style: solid; 
   border-radius: 15px; 

}

.title {
    font-family: 'Bubble Brush';
    text-shadow: 3px 3px rgba(255, 214, 234);
      padding:0px;
        text-align: center;
        font-size:100px;
        margin-right:800px;
}


.sidebartitle {
  color: #ff95c9;
    font-family: 'Sweet Heart';
    text-align:center;
      line-height:5px;
      font-size:35px;
      margin-top:20px;
      margin-bottom:-5px;
      font-weight:bold;
          text-shadow: 2px 2px rgba(255, 214, 234);
}

.sidebarimage
{
  margin:0px;
  display:flex;
  justify-content:center;
}

.sidetextbox
{
  border: dashed 2px #ff6bb4;
  font-size:10px;
  padding:5px;
  margin:10px;
  background: linear-gradient(to right, rgba(255, 214, 234, 0.5), rgba(255, 206, 171, 0.5), rgba(255, 244, 196, 0.5), rgba(217, 255, 160, 0.5), rgba(191, 255, 230, 0.5), rgba(207, 225, 255, 0.5), rgba(235, 212, 255, 0.5));
  border-radius: 10px; 
}

.sidetextbox p
{
  font-size:15px;
}

.cliquebox
{
  border: dashed 2px #ff6bb4;
  font-size:15px;
  padding:5px;
  margin:10px;
  background: linear-gradient(to right, rgba(255, 214, 234, 0.5), rgba(255, 206, 171, 0.5), rgba(255, 244, 196, 0.5), rgba(217, 255, 160, 0.5), rgba(191, 255, 230, 0.5), rgba(207, 225, 255, 0.5), rgba(235, 212, 255, 0.5));
  border-radius: 10px; 
}

.cliquebox p
{
  font-size:15px;
}

.sidebar1 {
  order: 1;
  width: 250px;
  padding:5px;
  height:auto;
  background-image:url("https://i.imgur.com/gmtfgtg.png");
    background-repeat: repeat;
  border-style: solid; 
   border-radius: 15px; 
}

.sidebar2 {
  order: 3;
  width: 250px;
  padding:5px;
  height:auto;
  background-image:url("https://i.imgur.com/gmtfgtg.png");
    background-repeat: repeat;
  border-style: solid; 
   border-radius: 15px; 
}

.flexheader {
  display: flex;
  width:100%;
  padding:0px;
  justify-content:center;
  flex-wrap: wrap;
}

.header {
  width: 1220px;
  padding:5px;
  height:auto;
    text-align: center;
  margin: auto;
  margin-bottom:3px;
  background-image:url("https://i.imgur.com/gmtfgtg.png");
    background-repeat: repeat;
  border-style: solid; 
   border-radius: 15px; 

}

.flexfooter {
  display: flex;
  justify-content:center;
  row-gap:-30px;
}

.footer {
  width: 1220px;
  font-size:15px;
  padding:5px;
  height:auto;
    text-align: center;
  margin: auto;
  margin-top:3px;
  margin-bottom:3px;
  background-image:url("https://i.imgur.com/gmtfgtg.png");
    background-repeat: repeat;
  border-style: solid; 
   border-radius: 15px; 

}

.footer p {
    line-height: 20px;   /* within paragraph */
  margin: 10px; /* between paragraphs */
  font-size:15px;
   border-radius: 15px; 
}