body {

    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #000000; /* For browsers that do not support gradients */
    background-image: linear-gradient(#000000, #35396d66);
    position: relative;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


}


* {
    margin: 0%;
    padding: 0%;
}



/*--------------------text-styles----------------------------------*/

h2 {
  font-family: 'Kode Mono'; 
    color: #a6cb21; 
}

h1, h3, h4, p, span, table {
    font-family: 'Kode Mono'; 
    color: #cab53c; 
}

h4, span, a, h1, h2, h3 {
  font-family: 'Kode Mono';
  padding: 3% 0%;  
}

h6 {
  font-size: 22px;
  font-weight: 900;
  color: #ecc80f;
  font-family: 'Kode Mono';

}

.center-flex a, .center-flex h4{
  margin: 0px 2px;
  text-align: left;

}

.main-text a, .center-flex h4, .main-text h3 {
  color: #f3e356;
  font-weight: 100;
  padding: 5px 0px;
}



.main-text h3 {
  color: #b4de0c;
  font-size: 20px;
  font-weight: 900;

border-width: 2px;
  border-bottom-style:solid;
  padding: 1px;
  margin: 20px 0px 20px 0px;


 
}

p {
  padding: 10px 0px;
}

a h3, a h2, a {
  color: #79d313;
  font-weight: 900;
  text-decoration: none;
}



a h3:visited, a h2:visited, a:visited {
  color: rgb(224, 133, 14)
}


a h1:hover, a h3:hover, a h2:hover, a:hover {
    color: #d4eb50;

}

#inner-index  a h2:hover {
    background-color: #d2fa442b;
    padding: 10px;
}

#inner-index a h2 {
    padding: 10px;
}


p {
    font-size: 14px;
    
}

header, aside, main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;

}

aside, main {
    overflow-y: none;
 
}

.title-text {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  text-align: center;
  justify-content: space-between;
  padding: 3%;
  align-items: center;

}

.aside-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    padding: 5%;
    margin: 5% 6% 5% 5%;
    width: 121px;
    height: 270px;
    

    background-color: rgba(0, 0, 255, 0);
    overflow-y: scroll;
    scrollbar-color: rgba(206, 155, 0, 0.257) rgba(255, 217, 0, 0.219);
    scroll-behavior: smooth;
    scrollbar-width: thin;

}

.aside-text a {
  font-size: 14px;
}

.main-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    padding: 5%;
    margin: 1.9% 5% 1.9% 1.9%;
    width: 427px;
    height: 235px;
    background-color: rgba(0, 0, 255, 0);
    overflow-y: scroll;
    scrollbar-color: rgba(206, 155, 0, 0.257) rgba(255, 217, 0, 0.219);
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/*--------------------page-elements---------------------------------*/

.med-img {
  margin-right: auto; 
  margin-left: auto;
  width: 300px;
  padding: 3% 0%;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  justify-items: flex-end;
  align-items: center;
  margin-right: auto; 
  margin-left: auto;
  width: 100%;
}

.gallery-item{
  padding: 5px 8px;
  width:min-content;

}
.gallery-img {
  height: 250px;
  object-fit: cover;
  border: double 1px;
}

.img-caption {

  height: 80px;

}

.media-listing-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  border: #24cb35;
  
}

.media-listing {
 
  width: 100%;
  height: 150px;
  display: flex;
  scrollbar-width: thin;
  align-items: center;
  border: solid 2px #b4de0c;
  margin: 15px 0px;
}

.media-listing:hover {
  background-color: rgba(73, 111, 39, 0.483);
}

.media-thumbnail {
  width: 100px;
  height: 100px;
  padding: 20px;
  object-fit: cover;
  
  

}

.media-description {

  width: 100%;
  
}


.small-padding {
  padding: 5% 0%;
}
/*--------------------layout About---------------------------------*/
.interest-list {
  padding: 5% 0%;
  width: 400px;
}
.interest-list tr,.interest-list td{
    border: solid 1px #7ca120;
    padding: 3%;
}
.interest-list th {
  border: double 2px #7ca120;
  font-size: 20px;
  color: #eb6623;
}

.interest-list strong {
  color: #a6cb21;
}
/*----------------------Layout-big-gallery----------------*/

.gallery-text {
  padding: 1%;
}

.gallery-container {


  height: 85%;
  width: 89vw;
  overflow-y: scroll;
  scrollbar-color: rgba(206, 155, 0, 0.257) rgba(255, 217, 0, 0.219);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  
  

}

.big-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  margin-top: 2%;
  height: 85vh;
  width: 90vw;
  margin-left: auto;
  margin-right: auto;

  box-shadow: inset 0 0 10px #474747;
  background-image: url(/images/lines.png);
  border-radius: 10px;
  background-color: #264223;
  border: dashed 2px #79d313;


   
}


/*--------------------layout Inner-Index---------------------------------*/

.scroll-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  margin-top: 15px;

  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: rgba(206, 155, 0, 0.257) rgba(255, 217, 0, 0.219);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  height: 470px;
  width: 580px;
}

#inner-index {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
    justify-items: center;

    margin-right: auto;
    margin-left: auto;
    margin-top: 10%;
    width: 600px;
    height: 500px;
   
    box-shadow: inset 0 0 10px #474747;
    background-image: url(/images/lines.png);
    border-radius: 10px;
    background-color: #264223;
    border: dashed 2px #79d313;
    
}

#inner-index p, #inner-index h3, #inner-index table, #inner-index a, #inner-index img  {
 padding: 5%;
}


.center-flex {
    width: 100vw;
    display: flex;
    justify-items: center;
    justify-content: center;
}

th, tr, td {
    padding: 1%;
    background-color: #0f6c242d;
    border: double 1px #79d31381;
}

th {
    width: 80px;
}
td {
    width: 300px;
}



/*--------------------layout (godspeed, soldier)---------------------------------*/

.container1 {
    position: relative;
  width: 100vw;
    z-index: 99;
    scale: 110%;
    
}
.container2 {
    z-index: 98;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5%;
    width: 800px;
    height: 500px;
    background-color: rgb(255, 199, 126);
    border-radius: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: 
    url(/images/metal_texture.png),
    linear-gradient(180deg, #a68142, #5e4630);
    box-shadow: inset 0.1em 0.2em 0.5em 0 #ffefb980, inset -0.5em -0.5em 0.5em 0 #00000080;
}

.container3 {
    z-index: 98;

    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 4%;

    width: 760px;
    height: 460px;
    background-color: rgb(255, 199, 126);
    border-radius: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: 
    url(/images/metal_texture.png),
    linear-gradient(180deg, #a68142, #5e4630);
    box-shadow: inset 0.2em 0.2em 0.5em 0 #ffefb980, inset -0.2em -0.5em 0.5em 0 #00000080;
}
.container4 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
}




header {
   
    position: relative;
    

    top: 7%;
    z-index: 99;
    margin-right: auto;
    margin-left: auto;
    width: 670px;
    height: 80px;
    background-color: #344f31;
    border-radius: 20px;
    box-shadow: inset 0 0 10px #2f432d;
    background-image: url(/images/lines.png);

}

aside {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 300px;
    margin-top: 6%;
    margin-right: 2%;
    background-color: #344f31;
    border-radius: 20px;
    box-shadow: inset 0 0 10px #474747;
    background-image: url(/images/lines.png);
}

main {

    position: relative;
    display: inline-block;
    width: 500px;
    height: 300px;
    margin-top: 6%;
    background-color: #344f31;
    border-radius: 20px;
    box-shadow: inset 0 0 10px #474747;
    background-image: url(/images/lines.png);

}

footer {
padding-top: 30px;


z-index: 99;
text-align: center;
opacity: 50%;
}

.cog {
    position: relative;
    bottom: 300%;
    left: 94%;
    z-index: -8;
}

.cog img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

#wires {
    position: relative;

    top: -110%;
    left: -10%;
    z-index: -1;
}

#wiresb {
    position: relative;
    top: -33%;
    left: 39%;
     z-index: -1;
}



.cog img {
    transition: transform 1s ease-in-out;
  }
  
.cog:hover img {
    transform: rotate(90deg);
  }

.antena-container {
    position: relative;
    z-index: -1;
    top: -155%;
    right: 7%;
    width: 65px;
 
}

.antena-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    z-index: 1;
    height: 190px;
    width: 65px;
    background-color: rgb(255, 199, 126);
    border-radius: 15px 0px 0px 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: 
    url(/images/metal_texture.png),
    linear-gradient(180deg, #a68142, #5e4630);
    box-shadow: inset 0.2em 0.2em 0.2em 0 #ffefb980, inset -0.2em -0.2em 0.2em 0 #00000080;
}

.antena-pole {
    position: relative;
    z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  width: 65px;
  text-align: center;
}


.antena-base {
    z-index: 4;
    top: 80px;
    position: relative;
    height: 100px;
    width: 18px;
    border-radius: 3px;
    background-color: #343631;
    box-shadow: inset 0.5em 0em 0.5em 0 #ffefb95e, inset -0.5em -0.5em 0.5em 0 #000000;
}

.antena-inner {
    z-index: 3;
    top: 155px;
    position: relative;
    height: 100px;
    width: 13px;
    border-radius: 3px;
    background-color: #343631;
    box-shadow: inset 0.5em 0em 0.5em 0 #ffefb980, inset -.5em -0.5em 0.5em 0 #000000;
}

.antena-inner2 {
    z-index: 2;
    top: 240px;
    position: relative;
    height: 100px;
    width: 10px;
    border-radius: 3px;
    background-color: #343631;
    box-shadow: inset 0.5em 0em 0.5em 0 #ffefb980, inset -.5em -0.5em 0.5em 0 #000000;
}

.antena-top {
    z-index: 5;
    top: 250px;
    position: relative;   
    height: 20px;
    width: 20px;
    border-radius: 15px 15px 14px 14px;
    background-color: #343631;
    box-shadow: inset 0.2em 0.1em 0.5em 0.1em #ffefb980, inset -.1em -0.5em 0.5em 0 #0000007a;
}

.red-light {
    margin: 10%;
    height: 20px;
    width: 20px;
    background-color: crimson;
    border-radius: 50%;
    box-shadow:  
        0 0 5px 5px #fc505062,
        0 0 30px 10px #ff0713,
        0 0 3px 2px #3d2c09,
        inset 0 0 10px 1px #ff9c45
        ;
}

.yellow-light {
    margin: 10%;
    height: 20px;
    width: 20px;
    background-color: #ffee00;
    border-radius: 50%;
    box-shadow:  
      
        0 0 3px 2px #3d2c09,
        inset 0 0 10px 1px #7b7b02
        ;
}

.green-light {
    margin: 10%;
    height: 20px;
    width: 20px;
    background-color: #24cb35;
    border-radius: 50%;
    box-shadow:  
      
        0 0 3px 2px #3d2c09,
        inset 0 0 10px 1px #406f06;
}

.gage-container {
    position: relative;
    z-index: -1;
    top: -215%;
    left: 81%;
    transform: scale(.65);
  
  }
  
  
  .gage-base {
  
  
      width: 100px;
      height: 300px;
      background-color: rgb(255, 199, 126);
      border-radius: 0px 35px 35px 0px;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: 
      url(/images/metal_texture.png),
      linear-gradient(180deg, #a68142, #5e4630);
      box-shadow: inset 0.2em 0.2em 0.2em 0 #ffefb980, inset -0.2em -0.2em 0.2em 0 #00000080;
  
  }
  
  .gage-glass {
  position: relative;
  z-index: 10;
  right: -29%;
  top: 25px;
    width: 40px;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.253);
    border-radius: 20px;
    box-shadow: 
      inset 0.5em 0.5em 1em 0 #ffefb957, 
      inset -0.5em -0.5em 2em 0 #00000080,
      inset 1em 1em 0em  0 #ffffff20,
      0.1em 0.1em .5em 0 #20200082;
  
  } 
  
  .gage-background {
    position: relative;
    top: -225px;
    right: -29%;
    z-index: 1;
    width: 40px;
    height: 250px;
    background-color: #68725b;
    border-radius: 20px;
    box-shadow: 
      0.5em 0.5em 2em 0 #00000080,
      inset -0.5em -0.5em 2em 0 #00000080,
    
  
  } 
  
  .meter-text {
    position: relative;
    padding-left: 5px;
  
    font-size: 14px;
    color: rgb(0, 0, 0);
    top: 8%;
    right: 5%;
    text-align: right;
    line-height: 150%;
    width: 30px;
    
  
  }
  
  
  
  .meter {
    position: relative;
    top: -80px;
    right: -25%;
    z-index: 2;
    width: 20px;
    height: 150px;
    border-radius: 0px 0px 10px 10px;
    background-color: rgb(125, 12, 12);
    box-shadow: 
      inset -0.5em -0.5em em  #000000;
        
  animation:MoveUpDown 2s linear infinite, grow 2s linear infinite;
  
  }


  .buttons-container {
    position: relative;
    z-index: -1;
    right: -200px;
    top: -490px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-items: center;
    align-content: center;
    justify-content: center;
  
  
  }
  
  .left-button {
  
    position: relative;
    background-color: #858585;
    width: 50px;
    height: 30px;
  
    margin: 0px 5px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 
      inset -0.1em -0.1em .1em #000000bd,
      inset 0.1em 0.1em .2em #fdffeeaa;
  }
  
  .left-inner-button {
  
    position: relative;
    background-color: #858585;
    width: 50px;
    height: 30px;
    margin: 0px 5px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 
      inset -0.1em -0.1em .1em #000000bd,
      inset 0.1em 0.1em .2em #fdffeeaa;
  }
  
  .right-inner-button {
  
    position: relative;
    background-color: #858585;
    width: 50px;
    height: 30px;
  
    margin: 0px 5px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 
      inset -0.1em -0.1em .1em #000000bd,
      inset 0.1em 0.1em .2em #fdffeeaa;
  }
  
  .right-button {
  
    position: relative;
    background-color: #858585;
    width: 50px;
    height: 30px;
  
    margin: 0px 5px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 
      inset -0.1em -0.1em .1em #000000bd,
      inset 0.1em 0.1em .2em #fdffeeaa;
  }
  
  
  .power-button {
    position: relative;
    background-color: #981414;
    width: 50px;
    height: 30px;
  
    margin: 0px 5px;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 
      inset -0.1em -0.1em .1em #000000bd,
      inset 0.1em 0.1em .2em #ffb4c3aa;
  }





/*----------------------animation---------------------*/
/*------------antena-------------*/


 .antena-container:hover .antena-base {
    translate: 0px -40px;
    transition: 0.5s ease-in-out;

}

 .antena-container:hover  .antena-inner {
    translate: 0px -92px;
    transition: 0.5s ease-in-out;

}


 .antena-container:hover  .antena-inner2 {
    translate: 0px -142px;
    transition: 0.5s ease-in-out;
}

.antena-container:hover .antena-top {
    translate: 0px -150px;
    transition: 0.5s ease-in-out;
}




.antena-container:hover .red-light {
    box-shadow:  
     
        0 0 3px 2px #3d2c09,
        inset 0 0 10px 1px #5f0303
        ;
}

.antena-container:hover .yellow-light {
    box-shadow:  
    0 0 5px 5px #fce85048,
    0 0 30px 10px #fff20050,
        0 0 3px 2px #3d2c09,
        inset 0 0 10px 1px #ffc022
        ;
}



.green-light:hover {
    margin: 10%;
    height: 20px;
    width: 20px;
    background-color: #24cb35;
    border-radius: 50%;
    box-shadow:  
        0 0 5px 5px #35ff3c48,
        0 0 30px 10px #47ff6050,
        0 0 3px 2px #3d2c09,
        inset 0 0 10px 1px #a9ff3f;
}


/*------------meter-------------*/

@keyframes grow {
    0%, 100% {
        transform:scaleY(1);
    }
    50% {
        transform:scaleY(1.3);
    }
  }
  
  @keyframes MoveUpDown {
    0%, 100% {
      top: -79.3px;
    }
    50% {
      top: -100px;
    }
  }


/*------------buttons-------------*/

  a .power-button:hover, a .right-button:hover, a .right-inner-button:hover, a .left-inner-button:hover, a .left-button:hover {
    animation:MoveDown 1s linear infinite;
    transition-timing-function: ease-in;
  }
  
  @keyframes MoveDown {
    0% {
      top: 3px;
    }
  }

/*------------text blink-------------*/

  @keyframes blink {
    0% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
  
  }
  
  .input-cursor { 
  animation: blink .6s linear infinite alternate;
  }