@import url("https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap");


body, html {
  height: 100%;
  font-family: "Signika Negative", sans-serif;
  font-weight: 300;
}
.section {
  height: 100vh;
  width: 100%;
  position: relative;
  padding: 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg1 {
  background-color: #ccc;
}
.bg2 {
  background-color: #333;
}
h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 0;
}
.revealUp {
  opacity: 0;
  visibility: hidden;
}
.spacer {
  height: 50vh;
  background-color: #000;
}

/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://scitechdaily.com/images/Jupiter-Vista-From-Juno-scaled.jpg");

/* Set a specific height */
height: 50%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

/* Place text in the middle of the image */
.hero-text {
position: absolute;
bottom: 8px;
left: 16px;
color: rgb(255, 255, 255);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


* {box-sizing: border-box;}


.img-magnifier-container {
  position:relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 1px solid rgb(197, 197, 197);
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 70px;
  height: 70px;
}
img {
    /* image stretches to 100% of its container */
    width: 100%;
    height: auto;

    /* image will stretch 100% of its container until it
    reaches 100% of the width of the image file itself */
    max-width: 100%;

}


.btn {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 12px 24px;
  border: none !important;
  cursor: pointer;
  border-radius: 5px;
  
}

.btn:hover {
  background-color: rgba(168, 168, 168, 0.205);
  color: rgb(0, 0, 0);
}

.btn1 {
  position: absolute;
  top: 66.5%;
  left: 80.5%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 15px;
  border: none !important;
  cursor: pointer;
  border-radius: 4px;
  
}

.btn1:hover {
  background-color: rgba(168, 168, 168, 0.274);
  color: rgb(0, 0, 0);
}

.btn2 {
  position: absolute;
  top: 77%;
  left: 21.7%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 15px;
  border: none !important;
  cursor: pointer;
  border-radius: 4px;
  
}

.btn2:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
}

.btn3 {
  position: absolute;
  top: 82.2%;
  left: 29.7%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 10px;
  border: none !important;
  cursor: pointer;
  border-radius: 4px;
  
}

.btn3:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
}

.btn4 {
  position: absolute;
  top: 83%;
  left: 34.8%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 10px;
  border: none !important;
  cursor: pointer;
  border-radius: 4px;
  
}

.btn4:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
}

.btn5 {
  position: absolute;
  top: 88.7%;
  left: 40%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 4px 8px;
  border: none !important;
  cursor: pointer;
  border-radius: 4px;
  
}

.btn5:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
}

.btn6 {
  position: absolute;
  top: 89.4%;
  left: 54.6%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 10px;
  border: none !important;
  cursor: pointer;
  border-radius: 5px;
  
}

.btn6:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
  
}

.btn7 {
  position: absolute;
  top: 83.4%;
  left: 68%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 10px;
  border: none !important;
  cursor: pointer;
  border-radius: 5px;
  
}

.btn7:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
  
}

.btn8 {
  position: absolute;
  top: 81.8%;
  left: 78.5%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 10px;
  border: none !important;
  cursor: pointer;
  border-radius: 5px;
  
}

.btn8:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
  
}

.btn9 {
  position: absolute;
  top: 80%;
  left: 88.1%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: transparent;
  color: rgba(90, 90, 90, 0.205);
  font-size: 20px;
  padding: 5px 10px;
  border: none !important;
  cursor: pointer;
  border-radius: 5px;
  
}

.btn9:hover {
  background-color: rgba(168, 168, 168, 0.253);
  color: rgb(0, 0, 0);
  
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(29, 29, 29);
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: start;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;

}


.square {
  width: 200px;
  height: 200px;
  background: teal;
  border-radius: 8px;
  opacity: 0;
  transform: scale(1.2);
}

@media (prefers-reduced-motion: no-preference) {
.square {
  transition: opacity 1.5s ease, transform 1.5s ease;
}
}

.square-transition {
  opacity: 1;
  transform: none;
}

.wrapper{
  margin: 0 auto;
  width: 100%;
}
.videowrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0px;
}

.videowrapper iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
}