:root {
  --bgpink: rgba(6, 23, 54, 0.323);
  --borderpink: #173f9b;
  --bgblack: #121216;
  --bgpinkdark:#1525536b;
}

html{
  height: 1500px;
  background-image: url(/imgs/backgrounds/rockband-tile.png);
  background-color: #00101a;
}

/* ---------------------------------------------- */
/* BODY media queries */
/* ---------------------------------------------- */
   @media screen and (max-width: 2000px) {
      body{
          height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            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);
          }
          .headerdiv{
            width: 100%;
            height: auto;
              display: flex;
              flex-direction: column;
              align-items: center;
            background-image: url(/imgs/headersandtitles/rb2-header.jpg);
            background-size: cover;
          }
              .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-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%;  
          }
    }
      
          /* ----------------------- */
          /*------ MOBILE ---------*/
          /* ----------------------- */
    @media screen and (max-width: 600px) {
       .content{
          width: 100%;
          height: auto;
            display: flex;
            flex-direction: column;
            align-content: center;
        }
          .content1{
            width: 100%;
            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%;  
          }
    }