body {
    background-image: url("space_blue.jpg");
    background-size: 400px 400px;
    margin: 0;
}

.faq-text{
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 85%;
  background-color: #1d3557;
  padding: 1em;
  margin-top: 0.5em;
  margin-bottom: 2em;
  max-width: 1000px;

  box-shadow: 10px 10px 5px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  max-width: 1200px;
}

#nord-div{
  padding: 2em;
}

#nord {
  filter: drop-shadow(5px 5px 5px #222);
  transition: 0.1s;

}

#nord:hover {
  filter: drop-shadow(0px 0px 25px #f1faee);
}

#nord.grey{
  filter: drop-shadow(0px 0px 25px yellow);
  filter: grayscale(100%);
  transition: 2s;
}

.loader {
  position: absolute;
  z-index: 999;
  top:35%;
  left: 47%;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 3em;
  height: 3em;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


h1{
  font-family: 'Krona One', sans-serif;
  color: white;
  text-align: center;
  font-size: 4em;
  margin-bottom: -0em;
  text-shadow: 5px 5px 0px #eb452b, 
  10px 10px 0px #efa032, 
  15px 15px 0px #46b59b, 
  20px 20px 0px #017e7f, 
  25px 25px 0px #052939 
}

h2{
  font-family: 'Roboto', sans-serif;
  color: white;
  text-align: center;
  font-size: 4em;
}

h3{
  font-family: 'Roboto', sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
}

p{
  color: white;
  font-family: 'Open Sans';
  font-size: 1.5em;
  font-weight: 400;
}

a{
  color: #a8dadc;
}

a:active{
  color: #f1faee;
}

hr{
  margin-top: 20px;
}

.social-button{
  display: block;
}



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

.right{
  float:right
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

hr {
  border-top: 2px solid #f1faee;
  width: 85%;
 
  max-width: 1200px;
}

#kofidiv{
  width: 180px;
  margin: auto;
  display: block;
}

.modaltext{
  color: black;
  text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}