/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     margin-left: 10%;
     margin-top: 10%;
     margin-bottom: 10%;
     font-size: 1.5em; 
}

/******************************************
/* LAYOUT
/*******************************************/

/* #google_translate_element, .skiptranslate {
  display:none;
 } */

  /* body{
    top: 0!important;
  }  */

/* .VIpgJd-ZVi9od-l4eHX-hSRGPd {
  display: none;
} */

/* .skiptranslate .goog-te-gadget {

}  */


/* span {
  background-color: red;
  padding: 0%;
} */

/* 
#google_translate_element {
  color: aqua;
  border: 10px red; 
} */

.goog-te-gadget-simple {
    background: black !important;
}
span {
  color: white;
}


audio {
  width: 50%;
  /* background-color: black;
  color: white; */
}


/* ================ */
/* toggle darkmode */

/* body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
} */

.dark-mode {
  background-color: black;
  color: white;
}
/* ================ */

/* iframe langauge box */

.VIpgJd-ZVi9od-xl07Ob-OEVmcd {
  background-color: black;
  color: white;
}
.skiptranslate{
  background-color: black; color: white;
}
iframe {
  background-color: black;
  color: white;
}


.goog-te-gadget-icon {
  display: none;
}

.goog-te-gadget-simple{
  /* padding: 100px; */
  width: 30%;
  height: 25px;
 }


img{
     display: block;
     margin: 0 auto;

     width:70%;
     height: 10%;
     border-radius: 50px / 15px;
   }

html{
     background-color: black;
     color: rgb(185, 185, 185);
}   

/* ======= Other code ======== */

*{
     margin:0;
     padding:0;
     box-sizing:border-box;
   }
   

/******************************************
/* ADDITIONAL STYLES
/*******************************************/



/* On screens that are 992px or less, set the background color to blue */

@media screen and (min-width: 900px) {
  .goog-te-gadget-simple{
    /* padding: 100px; */
    width: 30%;
    height: 25px;
   }
}



@media screen and (min-width: 1000px) {
  img {
    width:25%;
    display: inline-block;
  }
  h3 {
    padding-right: 50%;
  }
  .goog-te-gadget-simple{
    /* padding: 100px; */
    width: 25%;
    height: 25px;
   }
}

@media screen and (min-width: 1700px) {
  img {
    width:20%;
    display: inline-block;
  }
  h3 {
    padding-right: 65%;
  }
  .goog-te-gadget-simple{
    /* padding: 100px; */
    width: 15%;
    height: 25px;
   }
}



@media screen and (min-width: 2200px) {
  img {
    width:15%;
    display: inline-block;
  }
  h3 {
    padding-right: 80%;
  }
}

@media screen and (min-width: 2500px) {
  img {
    width:15%;
    display: inline-block;
  }
  h3 {
    padding-right: 80%;
  }
}


@media screen and (min-width: 2800px) {
  img {
    width:15%;
    display: inline-block;
  }
  h3 {
    padding-right: 80%;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 999px) {
  img {
    width:30%;
    display: inline-block;
  }
  h3 {
    padding-right: 30%;
  }
}

@media screen and (max-width: 815px) {
  .goog-te-gadget-simple{
  /* padding: 100px; */
  width: 40%;
  height: 25px;
 }
}


@media screen and (max-width: 615px) {
  .goog-te-gadget-simple{
  /* padding: 100px; */
  width: 60%;
  height: 25px;
 }
}

@media screen and (max-width: 415px) {
  .goog-te-gadget-simple{
  /* padding: 100px; */
  width: 90%;
  height: 25px;
 }
}