@media only screen and (max-width: 1000px) {
  body {
  background-color: yellow;  
  color: black;
  font-weight: bolder;
  }
}
@media only screen and (min-width: 1000px) {
  body {
  background-color: #5955e0; 
  color: black;
  font-weight: bolder;
  }
}

h1,h2,h3 {
	color: white	;
}

li {
	list-style: none;
}

@media only screen and (min-width: 1000px) {
  #lang{
  z-index: 99;
  position: fixed;  
  top: 2.5em;
  left: 2em;  
  }
  #lang > a {
  color: #f2f2f2;
  background-color: black;  
  opacity: 0.5;
  padding: 8px 10px;
  margin: 2px;
  border: 1px solid grey;
  border-radius: 0.2em;
  text-decoration: none;
  }
  #lang > a:hover {
  background-color: #8076f1;
  border-color: black;
  }
  #generatedSelect{
    position: fixed;  
    top: 5em;
    left: 4vw;
  }
}
@media only screen and (max-width: 1000px) {
  #lang{
  z-index: 99;
  position: fixed;  
  top: 1.5em;
  left: 50vw;  
  }
  #lang > a {
  color: #f2f2f2;
  background-color: black;  
  opacity: 0.5;
  padding: 8px 10px;
  margin: 2px;
  border: 1px solid grey;
  border-radius: 0.2em;
  text-decoration: none;
  }
  #lang > a:hover {
  background-color: #8076f1;
  border-color: black;
  }
  #generatedSelect{
    position: relative;  
    top: 19em;
    left: 10vw;
  }
}
.selected{
  background-color: #8076f1;
}
@media only screen and (min-width: 1000px) {
  .navbar { 
  background: #333;
  position: fixed; /* Set the navbar to fixed position */
  margin: 2em 0 0 21vw;
  top: 10px; /* Position the navbar at the top of the page */
  height: 15px;
  width: 100vw; /* Full width */
  }
  /* Links inside the navbar */
.navbar > a {  
  color: #f2f2f2;
  background: black;  
  border: 1px solid grey;
  border-radius: 0.2em;
  opacity: 0.5;
  text-align: left;
  padding: 14px 16px;
  margin-left: 2em;
  text-decoration: none;
  }
}
@media only screen and (max-width: 1000px) {
  .navbar { 
  background: #333;
  
  /* position: fixed; */ /* Set the navbar to fixed position */
  margin: 0 auto;
  top: 10px; /* Position the navbar at the top of the page */
  height: 15px;
  width: 90vw; /* Full width */
  }
  .navbar > a {  
  display: block;
  color: #f2f2f2;
  background: black;  
  border: 1px solid grey;
  border-radius: 0.2em;
  opacity: 0.5;
  text-align: left;
  padding: 14px 16px;

  text-decoration: none;
  }
}

table > tr > td > img {
  max-width: 20vw;
}

/* Change background on mouse-over */
.navbar > a:hover {  
  background-color: #8076f1;
  border-color: black;
}

@media only screen and (min-width: 1000px) {
  .parent {
  margin-top: 2vh;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  }
.div1 { grid-area: 1 / 1 / 2 / 2; } 
.div2 { grid-area: 1 / 2 / 2 / 3; }

}
@media only screen and (max-width: 1000px) {
  .parent {
  display: grid;
  width: 90vw;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }

}
@media only screen and (min-width: 1000px) {
  .divAlone {
  overflow-y: scroll;
  background-color: #8076f1;
  height: 80vh; 
  width: 80vw;
  margin: 5vw 0vw 5vh 10vw;
  max-width: 80vw;
  padding: 0.3em;
  }
}
@media only screen and (max-width: 1000px) {
  .divAlone {
  overflow-y: scroll;
  background-color: #8076f1;
  height: 80vh; 
  width: 90vw;
  margin: 45vh 0 0 0 ;
  
  padding: 0.3em;
  }
}

/* a:visited {
	color: white;
	font-weight: bolder;
} */
@media only screen and (min-width: 1000px) {
  .mainbox {
  overflow-y: scroll;
  background-color: #8076f1;
  height: 80vh; 
  max-width: 72vw;
  margin:  10vh 0vw 5vh 0;
  padding: 0.3em;
  }
}
@media only screen and (max-width: 1000px) {
  .mainbox {
  overflow-y: scroll;
  background-color: #8076f1;
  height: 80vh;   
  margin: 45vh 0 0 0 ;
  padding: 0.3em;
  width: 90vw;
  }
}


@media only screen and (min-width: 1000px) {
  .sidebarleft{   
  overflow-y: scroll;
  background-color: #8076f1 ;
  height: 80vh; 
  width: 20vw;
  max-width: 20vw;
  margin:  10vh 0 10vh 2vw;
  padding: 0.3em;
  }  
  .sidebarleft > a:hover {
  background: lightgreen;
  }
  .image {
    max-width: 80vw;
  }
}
@media only screen and (max-width: 1000px) {
  .sidebarleft{   
  display: none;
  overflow-y: scroll;
  background-color: #8076f1 ;
  height: 80vh; 
  width: 20vw;
  max-width: 20vw;
  margin:  10vh 0 10vh 2vw;
  padding: 0.3em;
  }  
  .sidebarleft > a:hover {
  background: lightgreen;
  }
  img {
    max-width: 250px;
  }
}
.foreground {
	color: #8076f1;
	font-weight: bolder;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}
 /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}