@font-face {
	font-family: 'Antarctica Trial';
    src: url('fonts/Antarctica\ Trial\ VAR-VF.ttf.woff2') format('woff2-variations');
	font-weight: 1 950;
}

@font-face {
	font-family: 'TINY5';
    src: url('fonts/TINY5x3GX.ttf') format('woff2-variations');
	font-weight: 0 300;	
}

@font-face {
	font-family: 'Recursive';
    src: url('fonts/Recursive-VariableFont_CASL\,CRSV\,MONO\,slnt\,wght.ttf') format('woff2-variations');
	font-weight: 300 1000;	
}


* {
    padding: 0;
    margin: 0;
}

:root {      
  font-family: 'Antarctica Trial';
}

body {
    height: 100vh;
    max-width: 100%;
    display: flex; 

}

/* Menu */
div {
  font-size: 1.2rem;
  font-weight: 200;
  z-index: 10;
}
.all {
  position: fixed;
  left: 2vw;
  bottom: 2.5vh;
  cursor: pointer;
}
.prev {
  position: fixed;
  left: 46vw;
  bottom: 2.5vh;
  cursor: pointer;
}
.next {
  position: fixed;
  right: 2vw;
  bottom: 2.5vh;
  cursor: pointer;
}
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline 0.1rem;
}


/* ipad */
@media (max-width: 1024px) {
  :root {
      font-size: 70%;
  }
  div {
    font-size: 1.8rem;
  }
  .all {
    left: 4vw;
  }
  .prev {
    left: 40vw;
  }
  .next {
    right: 4vw;
  }
}
@media (max-width: 810px) {
  :root {
    font-size: 60%;
  }
  div {
    font-size: 2.2rem;
  } 
}
  
/* Mobile */
@media (max-width: 430px) {
  :root {
    font-size: 35%;
  }
  div {
      font-size: 3rem;
  }
  .all {
    left: 8vw;
    width: 20%;
  }
  .prev {
    left: 42vw;
    width: 20%;
  }
  .next {
    left: 74vw;
    width: 20%;
  }
}