/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro');

*{
  font-family:"Anonymous Pro", courier;   
  font-weight: bold;
  font-stretch: expanded;
  background-color: transparent;
}

.landing {
  display: flex;
  justify-content: center;
  padding: 11px 0px 11px 0px;
  animation: fadeIn 5s; 
}

.centre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 11px 0px;
}

.panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 11px 0px;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255, 0.0);
  overflow-y: hidden;
  transition: 1s;
}

.overlay-content {
  position: relative;
  top: 40%;
  width: 100%;
  text-align: center;
  margin-top: auto;
}

.overlay a {
  padding: 8px;
  width: auto;
  text-decoration: none;
  font-size: 30px;
  letter-spacing: 0.8em;
  color: #fcfcfc;
  display: block;
  transition: 0.888s;
}

.overlay a:hover, .overlay a:focus {
  background-color: rgba(255,255,255, 0.444); /*<3*/
  color: #0c0c0c;
}

/*.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}*/

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.backButton {
  text-align: center;
  margin: 11px 0px 11px 0px;
}

.backButton a:link { 
  color: #ffffff;
  font-weight: bold; 
  }

span,p {
  color: white;
  margin: auto;
  position: relative;
  background-color: transparent;
  padding-top: 11px;
  padding-bottom: 11px;
}

ul,li {
  color: white;
  margin: auto;
  position: relative;
  background-color: transparent;
  list-style-position: inside
}

/* BLOCK HOVER LINKS

a:link, a:visited {
  text-align: center;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}

*/

/* FADE HOVER LINKS*/
a {
  color: #fff;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

a:hover { 
  color: #faace4;
  background-color:green; 
}

body {
  background-color: #faace4;
  font-family: Verdana;
}

.bg-video {
  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
  background: no-repeat center;
  /*margin-left: 20vw; OFFCENTRE */
  user-select: none;
  pointer-events: none;
  z-index: -100;

  /*custom styles, for example grayscale appearance*/
  filter: opacity(0.9);

  /*additional tweaks for positioning, read more in the link above*/
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

img {
    max-width: 100%;
    max-height: 89vh;
    display: block;
    margin: 11px 11px 11px 11px;
    background-color: transparent;
}

h3{
  color: white;  
}

h1 {
  font-size: 222px;
  margin-bottom: 11px;
  margin-top: 11px;
  color:#ffffff;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
h1:hover { color:#0c0c0c; }