/* 
  CSS file for the Earth's Radiation Balance applet
  Author: Kalley Lasola
  Date: May 13, 2020
  Last Modified: May 19, 2020
  */

/********************* COMMON CSS *********************/
/* CSS for all pages */

a {
  cursor: pointer;
}

input[type='button'] {
  background-color: #50baab;
  border-radius: 2px;
  color: white;
  padding: 1% 2%;
  text-decoration: none;
  cursor: pointer;
}

input[type='button']:hover {
  background-color: #359286;
  cursor: pointer;
}

li {
  text-align: left;
}

p {
  text-align: center;
}

.clearFix {
  margin: auto;
}

/* .contentContainer {
    width: 100%;
    margin: 0;
    padding: 0;
  } */

.darkMode .lessonText,
.darkMode .lessonContentContainer {
  color: black;
}

.footerContainer {
  margin-top: 50px;
}

/* .licensingContainer {
  position: absolute;
  top: 685px;
  left: 50%;
  transform: translateX(-50%);
} */

#homeContainer {
  background-image: url(../images/earth.jpg);
}

#homeContainer,
#lesson1Container,
#lesson2Container,
#lesson3Container,
#lesson4Container {
  max-width: 1000px;
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hoverContainer {
  color: white;
  opacity: 1;
  position: absolute;
  display: flex;
  background: linear-gradient(180deg, #3c8b81f3 0%, #50baacf5);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.301);
  flex-direction: column;
  justify-items: center;
  align-items: center;
  border-radius: 5px;
  width: 40%;
  height: 50%;
  top: 25%;
  z-index: -1;
}

.hoverCircle {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.hoverCircle:hover {
  /* background-color: rgba(72, 233, 72, 0.479); */
  cursor: pointer;
}

.imgCenter > img {
  min-width: 10%;
}

.lessonContentContainer {
  display: flex;
  background: rgba(255, 255, 255, 0.904);
  flex-direction: column;
  width: 90%;
  height: 500px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.lessonText {
  padding: 2%;
}

.lessonTitle {
  font-size: 24px;
  padding: 2%;
  text-shadow: 2px 2px 4px #ffffff;
}

#mainContent {
  padding-top: 13px;
}

#unMovingArrows {
  margin-top: 650px;
  position: absolute;
}

/*********************** HOME CSS ***********************/
/* CSS for the home page */

.lessonCard {
  border: 1px solid #ffffffad;
  display: flex;
  flex-direction: column;
  width: 85%;
  height: 85%;
  background: linear-gradient(180deg, #010101f7 0%, rgba(2, 6, 48, 0.46) 40%);
  border-radius: 1%;
  align-items: center;
}

.lessonCard:hover {
  background: rgba(55, 59, 100, 0.452);
  cursor: pointer;
}

.lessonCard p {
  color: white;
  font-size: 1.2vw;
  text-align: center;
  text-shadow: 3px 3px 4px #000000;
}

.lessonCard img {
  width: 75%;
  height: 62%;
  border-radius: 2%;
  border: 1px solid #ffffffad;
}

#lessonsContainer {
  display: grid;
  grid-template-columns: 50% 50%;
  width: 70%;
  height: 500px;
  justify-items: center;
  align-items: center;
}

/**************************** LESSON 1 ****************************/
/* CSS for the incoming solar radiation lesson pages */

#lesson1Container {
  background-image: url(../incomingSolarRadiation/images/lessonImage.jpg);
}

#incomingSolarImg {
  width: 80%;
  border-radius: 2px;
}

#radiativeFluxImg {
  position: relative;
  max-width: 65%;
  margin-left: 2%;
  margin-top: 2%;
}

#electromagneticSpecContainer {
  display: none;
}

#electromagneticSpecImg {
  width: 65%;
  margin-top: 2%;
}

#oceanImg {
  width: 100%;
  margin-top: 2%;
}

#UVRadiationHover {
  top: 77.2%;
  left: 17.5%;
}

#visibleLightHover {
  top: 7.8%;
  left: 27%;
}

#IRRadiationHover {
  top: 76.3%;
  left: 39.7%;
}

#beachImg {
  width: 45%;
  border-radius: 2px;
}

#flowersImg {
  width: 60%;
  border-radius: 2px;
}

#cloudsImg {
  width: 45%;
  border-radius: 2px;
}

#oceanImgContainer {
  position: relative;
  max-width: 65%;
}

#vegetationHover {
  top: 45.5%;
  left: 21.6%;
}

#tropHover {
  top: 26.6%;
  left: 53.7%;
}

#cloudHover {
  top: 39.2%;
  left: 81.4%;
}

#waterHover {
  top: 68%;
  left: 67.8%;
}

#vegetationImg {
  width: 70%;
  border-radius: 2px;
}

#tropImg {
  width: 85%;
  border-radius: 2px;
}

#cloudImg {
  width: 75%;
  border-radius: 2px;
}

#oceanWaterImg {
  width: 70%;
  border-radius: 2px;
}

/**************************** LESSON 2 ****************************/
/* CSS for the solar radiation reflection lesson pages */

#lesson2Container {
  background-image: url(../solarRadiationReflection/images/lessonImage.jpg);
}

#sky {
  width: 50%;
}

#fourImageContainer {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-items: center;
  align-items: center;
  width: 80%;
}

#fourImageContainer img {
  width: 60%;
  max-height: 180px;
  padding: 5%;
}

.choiceImages {
  display: flex;
  flex-direction: row;
  justify-items: center;
  /* align-items: center; */
}

.choiceImages div {
  height: 55%;
  width: 25%;
  margin: 0 auto;
}

.choiceImages img:hover {
  background-color: rgba(80, 186, 171, 0.23);
  cursor: pointer;
}

.imageOption img {
  border: 2px solid #d6d6d6;
  border-radius: 2px;
  height: 100%;
  width: 100%;
  padding: 5%;
}

.imageOption p {
  padding: 1%;
  text-align: center;
}

#reflectAnswer {
  padding: 5%;
}

.imgFive div {
  width: 60%;
}

#spaceRadiometerImg {
  width: 60%;
  padding: 2%;
}

/**************************** LESSON 3 ****************************/
/* CSS for the thermal radiation emission lesson pages */

#lesson3Container {
  background-image: url(../thermalRadiationEmission/images/lessonImage.jpg);
}

#sunsetImg {
  width: 70%;
}

#radiativeFluxImg2 {
  max-width: 55%;
  margin-left: 2%;
  margin-top: 2%;
}

#marsImg {
  width: 70%;
}

#lightInteraction {
  width: 70%;
  margin-top: 4%;
}

#radiativeFluxContainer2 {
  position: relative;
}

#fireHover {
  width: 18px;
  height: 18px;
  top: 64%;
  left: 60%;
}

#heatHover {
  width: 18px;
  height: 18px;
  top: 81%;
  left: 62%;
}

#fireImg {
  width: 60%;
  border-radius: 2px;
}

#thermometerImg {
  width: 70%;
  border-radius: 2px;
}

/**************************** LESSON 4 ****************************/
/* CSS for the greenhouse effect lesson pages */

#lesson4Container {
  background-image: url(../greenhouseEffect/images/lessonImage.jpg);
}

#atmosphereImg {
  width: 70%;
}

#moleculesImg {
  width: 90%;
  margin-top: 4%;
}

#molecules2Img {
  width: 60%;
}

#balanceImgContainer {
  position: relative;
}

.balanceHover {
  border-radius: 0px;
  width: 104px;
  height: 44px;
}

#balanceHover {
  top: 24%;
  width: 25%;
  height: 20%;
}

#blueHover {
  top: 56%;
  left: 4%;
}

#redHover {
  top: 56%;
  left: 70%;
}

.ghg:hover {
  cursor: pointer;
}

#ghgContainer {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  padding: 2%;
}

#ghgContainer > div > img {
  max-width: 60%;
}

/************************* MEDIA QUERIES **************************/

@media screen and (max-width: 400px) {
  /********* HOME CSS *********/
  #lessonsContainer {
    width: 100%;
    grid-template-columns: 100%;
  }

  .lessonCard {
    width: 50%;
  }

  .lessonCard p {
    font-size: 3vw;
  }

  .lessonCard img {
    width: 60%;
    height: 52%;
  }

  /********* LESSON 2 *********/

  .hoverContainer {
    width: 100%;
    height: 55%;
    /* top: 42% */
  }

  /********* LESSON 2 *********/
  #fourImageContainer {
    width: 100%;
    grid-template-columns: 100%;
  }

  #fourImageContainer img {
    width: 35%;
    padding: 1%;
  }

  #reflectAnswer {
    padding: 10%;
  }

  .imgFive div {
    margin: 0 auto;
  }

  /********* LESSON 4 *********/

  #balanceHover {
    width: 90%;
  }

  #tempBalanceImg {
    width: 80%;
  }

  #ghgContainer {
    grid-template-columns: 50% 50%;
  }

  #ghgContainer > div > img {
    max-width: 40%;
  }
}

@media screen and (min-width: 1000px) {
  .lessonCard p {
    font-size: 1em;
  }
}