/** Fonts **/
@font-face {
  font-family: extendedb;
  src: url('fonts/GT-Alpina-Extended-Bold-Trial.woff2') format('woff');
    font-display: swap;
}

@font-face {
  font-family: extended;
  src: url('fonts/GT-Alpina-Extended-Regular-Trial.woff2') format('woff');
    font-display: swap;
}

body {
  overflow-x: hidden;
    scrollbar-width: none;
}


@font-face {
  font-family: regular;
  src: url('fonts/GT-Alpina-Regular-Trial.woff2') format('woff');
    font-display: swap;
}

.title
{
    display:block;
    position:fixed;
    width: 100%;
    color: black;
    top:2%;
    font-size: 8em;
    z-index: 10;
    overflow-x: hidden;
}

:root {
  --font-size: .9em;
}

@media only screen 
  and (max-width: 595px) {
    :root {
      --font-size: .9em;
    }
}

a {
    text-decoration: none;
    color: black;
    transition: color 1s ease-out 100ms
}

a:hover {
    color: gold;
    transition: color, font-size 1s ease-in-out 100ms;
    font-size: calc(var(--font-size) * 4);
    
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0px 15px 0px;
    font-size: 2em;
  z-index: 20;
  display: flex;
font-family: extendedb;
  justify-content: center;
  background: background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
    overflow-x: hidden;
}

.page    
{
    display: inline-block;
    position:absolute;
    height: 100vh;
    width: 97vw;
    left: 3vw;
    font-family: sans-serif;
    font-size:.7em;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.homecontainer
{
    display: block;
    position: absolute;
    top: 60px;
    line-height: auto;
    font-family: sans-serif;
    font-size: var(--font-size);
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.imgcontainer
{
    display: relative;
    position: relative;
    top:60px;
    line-height: auto;
    font-family: sans-serif;
    font-size:.9em;
    width: 70%;
    min-width: 350px;
    z-index: 0;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

img
{
    border-radius: 10px;
}

footer{
    position: absolute;
}

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

.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
    top: 0;
    left: 0;
    position: fixed;
    height: 100vh;
    z-index: -5;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}