/* colours ≠==================================*/

:root {
--backcol:#4ABDAC;
--textcol1:white;
--vermcol:midnightblue;

font-size: 1.1em;
font-size: 1rem;
font-size: calc(1vw + 1vh + .5vmin);
}

/* general ===============================================*/

html, body {
  background-color:var(--backcol);
  color:var(--textcol1);
  font-family: 'Quicksand', sans-serif;
  font-size:12pt;
  }

  h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}

p {
  text-align:justify;
  text-justify: inter-word;
   font-weight:600;
   font-size:100%;
}

p.about {
  font-size:90%;
}

a{
 background:var(--backcol);
 color:var(--vermcol);
 font-weight:600;
}

a:visited{
 background:var(--backcol);
}

a:hover {
 background:var(--backcol);
}

/* Header Image etc===============================================*/
.header {
  position: relative;
  text-align: center;
  color: white;
}

.headimg {
width:100%;
height:30vw;

}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 15px;
  font-size:2.5vw;
  font-family: 'Architects Daughter',Quicksand, sans-serif;
  font-weight: 700;
  color:midnightblue;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-size:6vw;
  font-family: 'Architects Daughter', sans-serif;
  font-weight: 700;
  color:midnightblue;
}

/* animation */
div.centered {
  animation-duration: 1s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    left:-150%;
  }
  to {
  left: 50%;
  }
}

/* Content===============================================*/

div.contenthead {
font-size:130%;
font-weight:700;
text-align:center;
margin-top:10px;
}

hr {
color:white;
background-color:white;
height:2px;
border:none;
margin:auto;
margin-top:20px;
margin-bottom:20px;
text-align:center;
}

a {
text-decoration:none;
}

.footer {
color:midnightblue;
}