@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital@0;1&display=swap');

body {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
	margin: 0;
	padding: 0;
  overflow: hidden;
	}

h1 {
  font-size: 80px;
  line-height: 80px;
  margin-bottom: 20px;
  margin-top: 0px;
  color: white;
  }
  
p {
  padding: 0;
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  }

a {
  text-decoration: none;
  color: #3D4753;
}

a:hover {
  color: white;
}

.glow {
  color: white;
  text-align: center;
  text-shadow: 0 0 10px #293645, 0 0 5px #293645;
}

.button-white {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  background-color: white;
  border-style: none; 
  padding: 10px 20px 10px 20px; 
  color: #3D4753;
  transition: 0.3s;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: 1px 1px 6px 1px rgba(25, 35, 44, 0.4);
  }

.button-end {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #8093a8;
  text-shadow: 2px 2px 10px #5b738f;
  background-color: none;
  border-style: none; 
  padding: 10px 20px 10px 20px; 
  transition: 0.3s;
  margin-top: 30px;
  margin-bottom: 30px;
}

.close-button-wrapper {
  position: relative;
  right: 0;
  top: 0;
}

.close-button {
  position: absolute;
  right: -10px;
  top: -10px;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border-style: none;
}

.button-margin-right {
  margin-right: 20px;
}

button:focus { 
  outline:none;
  }

button:hover { 
  background-image:linear-gradient(45deg, #AA9090 28%, #6D6777 69%);
  cursor: pointer;
  /*background-color: #87767F;*/
  color: white;
  }

.popup-modal button:hover { 
  background-image: none;
  }

#scrollbox1, #scrollbox2, #scrollbox3, #scrollbox4, #scrollbox5, #scrollbox6, #scrollbox7 {
  transition: 0.5s ease-in-out;
  }

#scrollbox2, #scrollbox3, #scrollbox4, #scrollbox5, #scrollbox6, #scrollbox7 {
  display: none; 
  opacity: 0,
}

.scrollbox-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  }

.scrollbox-wrapper-top {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  padding-top: 200px;
}

.backgroundbox{
  height: 100vh; 
  width: 100vw; 
  /*background: url(./sources/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;*/
  background-color: rgba(22, 30, 40, 0.9); 
  position: absolute; 
  top: 0px; 
  left: 0px;
  z-index: -10;
  }

.popup-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-content: center;
  align-items: center;
  }

.popup-modal {
  width: 60vw; 
  padding: 50px 55px 55px 55px;
  background-color: rgba(22, 30, 41, 1); 
  z-index: 10;
  }

.textbox {
  width: 55%;
  padding: 5px;
  color: #293645;
  text-align: center;
  }

#scrollbox7 {
  text-shadow: 3px 3px 40px #14181d, -3px -3px 40px #14181d, 0px 0px 40px #14181d
}

.text {
  color: white;
  font-weight: 200;
  line-height: 24px;
  font-size: 22px;
}

.infotext {
  color: #8093a8;
  font-weight: 200;
  line-height: 22px;
  font-size: 19px;
  text-shadow: 2px 2px 10px #5b738f;
}

.last-textbox {
  width: 55%;
  height: 100vh;
  padding: 5px;
  color: #293645;
  text-align: center;
  }

.infotextbox {
  position: absolute;
  bottom: 10%;
  width: 30%;
  padding: 15px 20px;
  text-align: center;
}

  /*RESPONSIVE FOR MOBILE*/

  @media only screen and (max-width: 600px) {

  h1 {
    font-size: 50px;
  }

  p {
  line-height: 22px;
  font-size: 18px;
  }
}