:root {
  --bgpink:#FF5FA880;
  --borderpink:#FF0074;
  --bgblack: #121216;
  --bgpinkdark: rgba(198, 17, 108, 0.369);
}

html{
  height: 1500px;
  background-color: #5e2464;
  background-image: url(/imgs/backgrounds/purpleclouds.png);
}

/* ---------------------------------------------- */
/* BODY media queries */
/* ---------------------------------------------- */
   @media screen and (max-width: 2000px) {
      body{
          height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          background-size: 40%;
            font-size: 13px;
            color: white;
            font-family: Grandstander;
      }
   @media screen and (max-width: 650px) {
        body{
          height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          font-family: Grandstander;
          background-size: 40%;
            font-size: 12px;
            color: white;
        }}
/* ---------------------------------------------- */
/* Unneffected */
/* ---------------------------------------------- */

            /* ----------------------- */
            /*------ COMPUTER ---------*/
            /* ----------------------- */
            
    @media screen and (max-width: 2000px) {
          .wholecontainer{
            width: 85%;
            height: 90%;  
              display: flex;
              flex-direction: column;
              justify-content: start;
              margin-top: 1%;
            background-color: var(--bgpink);
            border: 4px outset var(--borderpink);
            box-shadow: 0px 0px 50px rgba(255, 113, 208, 0.59);
          }
          .headerdiv{
            width: 100%;
            height: auto;
              display: flex;
              flex-direction: row;
              justify-content: center;
          }
              .headerimg{
                width: 100%;
                height: auto;
                  display: flex;
                  justify-content: center;
                  margin: 1%;
              }
              .e10neocities{
                width: 30%;
                height: auto;
              }
    }
            /* ----------------------- */
            /*------ MOBILE ---------*/
            /* ----------------------- */
            
    @media screen and (max-width: 600px) {
          .wholecontainer{
            width: 85%;
            height: 90%;  
              display: flex;
              flex-direction: column;
              justify-content: start;
              margin-top: 1%;
            background-color: var(--bgpink);
            border: 4px outset var(--borderpink);
          }
          .headerdiv{
            width: 100%;
            height: auto;
              display: flex;
              flex-direction: column;
              align-items: center;
          }
              .headerimg{
                width: 100%;
                height: auto;
                  display: flex;
                  justify-content: center;
                  margin: 1%;
              }
              .e10neocities{
                width: 70%;
                height: auto;
              }
    }
/* ---------------------------------------------- */
/* INDEX media queries */
/* ---------------------------------------------- */

            /* ----------------------- */
            /*------ COMPUTER ---------*/
            /* ----------------------- */
            
    @media screen and (max-width: 2000px) {
          .mainsection{
            width: 100%;
            height: auto;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            background-image: url(/imgs/backgrounds/sparklingstars.gif);
            background-size: 100px;
            border-top: 4px outset var(--borderpink);
          }
          .index{
            width: 18%;
            height: auto;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 1.5%;
            background-color: var(--bgpinkdark);
            border: 4px solid var(--borderpink);
          }
              .indexlinks{
                width: 100%;
                height: auto;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
              }
              .linkgroup{
                width: 100%;
                height: auto;
                  display: flex;
                  flex-direction: column;
                  padding: 5%;
                background-color: #070708ab;
                border: 2px dashed var(--borderpink);
                border-radius: 15px;
                  list-style-type: none;
              }
              .nestedgroup{
                width: 100%;
                height: auto;
                  display: flex;
                  flex-direction: column;
                  margin-left: 5%;
                  padding: 3%;
                list-style-type: none;
              }
              .link{
                width: 100%;
                height: auto;
                  margin-left: 5%;
                font-size: 15px;
                color: #83fff1;
                text-shadow: 1px 1px 10px rgba(10, 255, 235, 0.77);;
                list-style-type: none;
                text-decoration: none;
                text-align: left;
                  transition: 800ms;
              }
                  .link:hover {
                    margin-left: 10%;
                      color: rgb(249, 186, 255);
                      text-shadow: 1px 1px 10px rgb(239, 65, 255);;
                    transition: 800ms;
                  }
                  #currentpage{
                    color: rgb(122, 255, 122);
                    text-shadow: 1px 1px 10px rgb(36, 255, 83);;
                  }          
          .blinkiesdiv{
            width: 150px;
            height: auto;
              display: flex;
              flex-direction: column;
              margin-top: 10%;
           }
              .blinkie{
                width: 100%;
                height: auto;
              }
          .visitorcounter{
            width: 100%;
            height: auto;
              display: flex;
              flex-direction: row;
              justify-content: space-evenly;
              flex-wrap: wrap;
              padding: 5%;
            background-color: #070708ab;
            border: 2px dashed var(--borderpink);
            border-radius: 15px;
          }
          .countergif{
          width: 49%;
          }
    } 
            /* ----------------------- */
            /*--------- MOBILE ----------*/
            /* ----------------------- */
    @media screen and (max-width: 600px) {
       .mainsection{
            width: 100%;
            height: auto;
              display: flex;
              flex-direction: column;
              align-items: center;
            background-image: 
            url(/imgs/backgrounds/sparklingstars.gif);
            background-size: 100px;
          }

          .index{
            width: 97%;
            height: auto;
              display: flex;
              flex-direction: column;
              align-items: center;
            background-color: var(--bgpinkdark);
            border: 4px solid var(--borderpink);
          }
              .indexlinks{
                width: 100%;
                height: auto;
                  display: flex;
                  flex-direction: column;
              }
              .linkgroup{
                width: 70%;
                height: auto;
                  display: flex;
                  flex-direction: column;
                  padding: 2%;
                  padding-left: 10%;
                  padding-right: 10%;
                  margin-top: -1%;
                background-color: #070708ab;
                border: 2px dashed var(--borderpink);
                border-radius: 15px;
                  list-style-type: none;
              }
              .nestedgroup{
                width: 100%;
                height: auto;
                  display: flex;
                  flex-direction: column;
                  margin-left: 5%;
                  padding: 3%;
                list-style-type: none;
              }
              .link{
                width: 100%;
                height: auto;
                  margin-left: 0%;
                font-size: 13px;
                color: #83fff1;
                text-shadow: 1px 1px 10px rgba(10, 255, 235, 0.77);;
                list-style-type: none;
                text-decoration: none;
                text-align: left;
                  transition: 800ms;
              }
                  .link:hover {
                    margin-left: 0%;
                      color: rgb(249, 186, 255);
                      text-shadow: 1px 1px 10px rgb(239, 65, 255);;
                    transition: 800ms;
                  }
                  #currentpage{
                    color: rgb(122, 255, 122);
                    text-shadow: 1px 1px 10px rgb(36, 255, 83);;
                  }          
          .blinkiesdiv{            
              display: none;
           }
              .blinkie{
                display: none;
              }
          .visitorcounter{
            width: 50%;
            height: auto;
              display: flex;
              flex-direction: row;
              justify-content: space-evenly;
              flex-wrap: wrap;
              padding: 2%;
              padding-left: 20%;
              padding-right: 20%;
              margin-bottom: 6%;
            background-color: #070708ab;
            border: 2px dashed var(--borderpink);
            border-radius: 15px;
          }
          .countergif{
          width: 45%;
          }
    }

/* ---------------------------------------------- */
/*CONTENT media queries */
/* ---------------------------------------------- */

          /* ----------------------- */
          /*------ COMPUTER ---------*/
          /* ----------------------- */
    @media screen and (max-width: 2000px) {
        .content{
          width: 100%;
          height: auto;
            display: flex;
            flex-direction: column;
            align-content: center;
        }
          .content1{
            width: auto;
            height: auto;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 2%;
          }
          .content2{
            width: auto;
            height: auto;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 2%;  
          }
          .frontpage{
            width: 30%;
            height: 35%;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 10%;
              padding: 5%;
            background-color: rgba(157, 9, 83, 0.748);
            border: 4px solid var(--borderpink);
              text-align: center;
          }
              .homepage-link{
                width: 40%;
                height: auto;
                background-color: #12121672;
                border: 2px outset #ff4ca5 ;
                padding: 2%;
                transition: 300ms;
              }
                  .homepage-link:hover{
                    width: 45%;
                    background-color: #ff43aa72;
                    border: 2px outset #ffffff ;
                    transition: 300ms;
                  }
              .homepage-txt{
                color: white;
                text-decoration: none;
              }
                  .homepage-txt:hover{
                    color: rgb(78, 255, 237);
                    text-decoration: none;
                  }

    }
      
          /* ----------------------- */
          /*------ MOBILE ---------*/
          /* ----------------------- */
    @media screen and (max-width: 600px) {
       .content{
          width: 100%;
          height: auto;
            display: flex;
            flex-direction: column;
            align-content: center;
        }
          .content1{
            width: auto;
            height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 2%;
          }
          .content2{
            width: auto;
            height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 2%;  
          }

    }
  }