/* Font face */

@font-face {
  font-family: 'WhyteEDU';
  src: url("../dinamo/WhyteVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'ProphetEDU';
  src: url("../dinamo/ProphetVariableEDU") format("truetype");
}
@font-face {
  font-family: 'GintoEDU';
  src: url("../dinamo/GintoVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'MonumentGroteskEDU';
  src: url("../dinamo/MonumentGroteskVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'MonumentGroteskMonoEDU';
  src: url("../dinamo/MonumentGroteskMonoVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'EstragonEDU';
  src: url("../dinamo/EstragonVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'EstragonGXBubbles';
  src: url("../dinamo/EstragonGXBubbles.ttf") format("truetype");
}
@font-face {
  font-family: 'PlanetXGX';
  src: url("../dinamo/PlanetXGX.ttf") format("truetype");
}
@font-face {
  font-family: 'FavoritEDU';
  src: url("../dinamo/FavoritVariableEDU.ttf") format("truetype");
}
@font-face {
  font-family: 'favorit_upside-down_rotate';
  src: url("../dinamo/favorit_upside-down_rotate_03.ttf") format("truetype");
}
@font-face {
  font-family: 'favorit_upside-down_mirror';
  src: url("../dinamo/favorit_upside-down_mirror_05.ttf") format("truetype");
}
@font-face {
  font-family: 'favorit_lining';
  src: url("../dinamo/favorit_lining_04_06.ttf") format("truetype");
}




/* Font classes and hover states */

.whyte {
  font-family: 'WhyteEDU';
  font-variation-settings: "wght" 0, "ital" 0, "opsz" 0;
}
.whyte:hover {
  font-variation-settings: "wght" 100, "ital" 100, "opsz" 100;
}

.ginto {
  font-family: 'GintoEDU';
  font-variation-settings: "wght" 0, "wdth" 0, "ital" 0;
}
.ginto:hover {
  font-variation-settings: "wght" 100, "wdth" 100, "ital" 100;
}

.monumentgrotesk {
  font-family: 'MonumentGroteskEDU';
  font-variation-settings: "wght" 0, "ital" 0;
}
.monumentgrotesk:hover {
  font-variation-settings: "wght" 100, "ital" 100;
}

.monumentgrotesk_mono {
  font-family: 'MonumentGroteskMonoEDU';
  font-variation-settings: "mono" 0;
}
.monumentgrotesk_mono:hover {
  font-variation-settings: "mono" 100;
}

.estragon {
  font-family: 'EstragonEDU';
  font-variation-settings: "wght" 0;
}
.estragon:hover {
  font-variation-settings: "wght" 100;
}

.estragon_bubbles {
  font-family: 'EstragonGXBubbles';
  font-variation-settings: "bubl" 0, "wght" 100, "pos2" 0;
}
.estragon_bubbles:hover {
  font-variation-settings: "bubl" 100, "wght" 150, "pos2" 100;
}

.planetx {
  font-family: 'PlanetXGX';
  font-variation-settings: "ivrt" 0;
}
.planetx:hover {
  font-variation-settings: "ivrt" 100;
}

.favorit {
  font-family: 'FavoritEDU';
  font-variation-settings: "wght" 0, "ital" 0, "mono" 0;
}
.favorit:hover {
  font-variation-settings: "wght" 100, "ital" 100, "mono" 100;
}

.favorit_lining {
  font-family: 'favorit_lining';
  font-variation-settings: "wght" 100;
}
.favorit_lining:hover {
  font-variation-settings: "wght" 900;
}

.favorit_upside-down_mirror {
  font-family: 'favorit_upside-down_mirror';
  font-variation-settings: "wght" 100;
}
.favorit_upside-down_mirror:hover {
  font-variation-settings: "wght" 900;
}

.favorit_upside-down_rotate {
  font-family: 'favorit_upside-down_rotate';
  font-variation-settings: "wght" 100;
}
.favorit_upside-down_rotate:hover {
  font-variation-settings: "wght" 900;
}

.animate_font{
  transition: font-variation-settings 1s linear;
}

/* Reset CSS */

html, body {
  background: #00004d;
  background-image: url(http://giphygifs.s3.amazonaws.com/media/FlodpfQUBSp20/giphy.gif);
  z-index: 0;
  font-size: 16px;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: url(https://banner2.cleanpng.com/20190512/vuc/kisspng-clip-art-portable-network-graphics-transparency-wa-stormcraft-server-magic-5cd8d32f8377a6.6112283615577137115385.jpg);
}

a, button, input, label {
  cursor: pointer
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0
}

/* Your CSS */

.sad {
  display: none;
  z-index: 1;
}

.headline{
  position: absolute;
  margin-top: -95vh;
  margin-left:30vh;
  z-index: 4;
}

.date{
  position: absolute;
  margin-left:30vh;
  margin-top:-50vh;
  z-index:4;
}

.description{
  position: absolute;
  margin-left:30vh;
  margin-top:-15vh;
  z-index:4;
}

p{
  font-size: 7vw;
}

.posterlayer{
  opacity:0;
  border: 0.5vh solid #99ff33;
  background: -webkit-linear-gradient(black, blue);
  position: absolute;
  top:3vh;
  margin-left:28vh;
  margin-right: auto;
  width: 70vh;
  height: 93vh;
  z-index: 2;
}

form{
  text-align:left;
  margin-left: 130vh;
  margin-top: 80vh;
  z-index: 4;
}

.yes .posterlayer{
  opacity: 0.5;
  border: 0vh;
  background: -webkit-linear-gradient(pink, black);
  position: absolute;
  top:3vh;
  margin-left:28vh;
  margin-right: auto;
  width: 70vh;
  height: 93vh;
  z-index: 3;
}


.absolutely .posterlayer{
  opacity: 1;
  border: 0vh;
  background: -webkit-linear-gradient(black, blue);
  position: absolute;
  z-index: 2;
}

.notsureyet .posterlayer{
    opacity: 1;
    z-index: 2;
    background-image: url(https://thumbs.gfycat.com/AcademicPlayfulGrunion-small.gif);
}

.notsureyet .headline{
  opacity:0;
}

.notsureyet .date{
  opacity: 0;
}

.notsureyet .description{
  opacity: 0;
}

.link{
  opacity: 0;
  position: absolute;
}

.givemethelink .posterlayer{
  border: 0vh solid #99ff33;
  opacity: 1;
  background-image: url(https://media.giphy.com/media/DgLwPZVu5tT32/giphy.gif);
}

.givemethelink .headline{
  opacity: 0;
}

.givemethelink .date{
  opacity: 0;
}

.givemethelink .description{
  opacity: 0;
}

.givemethelink .link{
  border: 0.5vh solid #99ff33;
  opacity: 1;
  position: absolute;
  margin-left: 130vh;
  margin-top: -60vh;
  width: 15%;
  padding: 10vh;

}

.absolutely .space{
  position: fixed;
  opacity: 1;
  z-index: 1;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  height: 100vh;
  text-align: center;
  background-position: center;
  background-image: url(http://giphygifs.s3.amazonaws.com/media/10qHEa7ShsJ8I0/giphy.gif);
}

.stopaskingstupidquestions .sad{
  position: fixed;
  opacity: 1;
  z-index:7;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  height: 100vh;
  text-align: center;
  background-image: url(https://mondrian.mashable.com/wp-content%252Fuploads%252F2013%252F07%252Fcrying-waterfalls.gif%252Ffull-fit-in__1200x2000.gif?signature=RezWhGdIsC5-ta_xF4D-TFMYHH8=&source=http%3A%2F%2Fmashable.com);
  background-position: center;
  background-size: cover;
}

.sad img{
  height: 100%;
}

h1{
  font-size: 14vw;
  background: -webkit-linear-gradient(black, blue);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

h2{
  background: -webkit-linear-gradient(blue, #ffcccc);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 6vw;
  text-align: center;
  line-height: 11vh;
}

h3{
  background: -webkit-linear-gradient(#ff6666, pink);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 3.5vw;
  text-align: left;
  line-height: 8vh;
}

a {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  z-index: 4;
}
a:hover{
  cursor: zoom-in;
}

p{
  font-size: 1.5vw;
  color: #99ff33;
}

.space img{
  height: 100%;
}


/* Media Queries */

@media screen and (max-width:700px){
  h1{
    color: blue;
  }
}