@font-face {
  font-family: 'RL', sans-serif;
  src: url(Poppins-Light.ttf);
}
@font-face {
  font-family: 'RR', sans-serif;
  src: url(Poppins-Regular.ttf);
}
@font-face {
  src: url(Poppins-Regular.ttf);
  font-family: 'RM', sans-serif;
  src: url(Poppins-Medium.ttf);
}
@font-face {
  src:url(Prata-Regular.ttf);
  font-family: 'Prata', serif;
}

* {
  margin:0px; /* This thing solved everything, it was like a chain reaction, like after this one thingy I managaed to fix the whole website(I think) */

}     

a:link {
  color: white;

}
a:visited {
  color: white;

}

#bookface {
  height: 10px;
}
.colored-box {
  background-color: #e5e5e5;
  padding: 10px;
  color: #000000;
  font-size: 16px;
  font-family: 'RL', sans-serif;
  border: 1px solid #999999;
}
p {

  font-family: 'RL', sans-serif;
  text-align: center;
  font-size: 20px;


  
}

#memberbutton {
  position: relative; top: 0%;
  background-color: #2243b6;
  border-radius: 25px;
  padding: 15px 25px;
}

#TITLE2 {
  color: #2243b6;
  font-family: 'RM', sans-serif;
  text-align: center;
  font-weight: 50px;
}
#subtitle1{
  position: relative; top: 0%;
  color: rgb(255, 255, 255);
  margin-top: -18%;
}
#container {
  background-position:center;
  height: 50%;
  width: 100%; 
  max-width: 1000px; 
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 12%;
  margin-right: auto;
  margin-left: auto;
  display: block;
  color: black;
}

h2 {
  text-align: center;
  font-family: 'RL', sans-serif;
  font-weight: 25px;
  margin-top: 0px;
  color: black;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding: 0px;
  color: white;
}
h3 {
  font-family: 'RM', sans-serif;
}
h4 {
  font-family: 'RR', sans-serif;
}
p {
  text-align: center;
  font-family: 'RL', sans-serif;
  margin-right: 0;
  margin-left: 0;
  width: 90%;
  max-width: 1000px;
  color: black;
  color: white;
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  font-family: 'RL', sans-serif;
}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


.image {
  width: 100%;
  height: auto; 
  max-width: 1000px;
  display: block;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}


footer {
  color: #FF4128;
  background-color: #3D423E;
  font-family: 'RM', sans-serif;
  margin-left: 0;
  position: absolute; 
  width: 100%;  
  text-decoration: none;
  display:none;
}

.footerlist {
  list-style: none;
  text-decoration: none;
  color: #FF4128;
}
.footericon{
  max-height: 100px;
  max-width: 400px;
  float:right;
  transform: translate(-10%,-5%) 
}

.itemf {
  display: inline-block;  
  transform: translate(10%,270%);
  font-size: 3.2vm;
  text-decoration: none;
  color: #FF4128; 
}




.titleimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}