/*----------------------------------------------- CSS RESET */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*----------------------------------------------- END CSS RESET */

@charset "UTF-8";
/* CSS Document */

/*----------------------------------------------- FONTS */

@font-face {
  font-family: 'AdobeVFPrototype';
  src: url('AdobeVFPrototype.ttf') format('truetype');
}

@font-face {
  font-family: 'NobotoFlex-VF';
  src: url('NobotoFlex-VF.ttf') format('truetype');
}

@font-face {
  font-family: 'KairosSans_Variable';
  src: url('KairosSans_Variable.ttf') format('truetype');
}

/*----------------------------------------------- BODY */

html, body {
	font-family: NobotoFlex-VF;
    text-transform: uppercase;
    background-color: skyblue;
    overflow-x: hidden;
    border: 20px solid white;}

header{animation: text 1s infinite;}

div{background-color:azure;
    border: 3px solid skyblue;
    margin-bottom:20px;}

/*----------------------------------------------- H */

h1 {font-family: KairosSans_Variable; 
    font-size: 200px;
    font-variation-settings:"wght" 800;
    color:orange;
    position:relative;
    margin-bottom: 30%;
    margin-top:15%;
    text-align: center;
    text-shadow:20px 9px grey;
    cursor: pointer;
    transform:translateX(100%);
    animation: congrats 5s linear infinite;
    transition: 0.5s;}

h2{font-family: KairosSans_Variable;
    font-variation-settings: "wght" 100;
    line-height:150px;
    text-align:left;
    font-size:150px;
    margin:0;
    margin-left:20px;
    padding:0;
    transition: 4s;}

h3 {font-family: NobotoFlex-VF;
    font-variation-settings: "wght" 100;
    margin-bottom:40%;
    text-align: center;}

h4{font-size:100px;
    text-transform: lowercase;
    text-align: center;
    margin-bottom:40px;
    animation: start 0.8s infinite;}

.anim1 {opacity:0;}


span:hover {cursor:pointer;
    color:red;
    font-variation-settings: "wght" 500;}

/*----------------------------------------------- H3 ANIM */

h3.anim2 {font-size:50px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    color:red;
    font-variation-settings: "SCAL" 100, "BASE" 506.944, "SPAC" 0, "wght" 54, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}

h3.anim3{font-family:AdobeVFPrototype;
    font-size:50px;
    color:orange;
    cursor:pointer;
    transition: 0.8s ease-in-out;}

/*----------------------------------------------- H3 HOVER */

h1:hover {font-variation-settings:"wght" 200;}

h3.anim2:hover {font-size:110px;font-variation-settings: "SCAL" 100, "BASE" 500, "SPAC" 970.833, "wght" 294.083, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}

h3.anim3:hover {font-size:130px;
    font-variation-settings: "SCAL" 100, "BASE" 500, "SPAC" 970.833, "wght" 1000, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}

/*----------------------------------------------- IMAGES */

img {display:inline-block;
    position:relative;
    top:-30px;
    height: 30px;
    margin-top:60px;
    margin-left: 20px;
    transition: 0.1s ease-in;}

img:hover {transform:translateY(-30%);cursor: pointer; opacity:0;}

/*----------------------------------------------- ANIMATIONS */
 
@keyframes congrats {
 0%   {transform: translateX(100%); }
 100% { transform: translateX(-330%); }}

@keyframes start {
0%   {opacity: 100%;}
50%  {opacity: 0;}
100% {opacity: 100%;}}

/*----------------------------------------------- RESPONSIVE !!!!!!*/

@media screen and (min-width:300px) and (max-width:700px){
    
/*----------------------------------------------- H */

h1{font-size:20px;
   font-variation-settings:"SCAL" 100, "wght" 200;
    margin-bottom:200px;
   text-align: center;
   animation: congrats 1s  infinite;
   text-shadow: none;}
    
h1:hover {font-variation-settings:  "wght" 200;}
    
h2 {font-size:40px;text-align: center;padding:0;margin:0;}
    
h3 {margin-bottom:10%;}
    
h4 {font-size:30px;}
    
span:hover {cursor:pointer;color:black;}
    
/*----------------------------------------------- H3 ANIM */
       
h3.anim2{animation: anim2 1s  infinite; 
    font-size:40px;
    font-variation-settings: "SCAL" 100, "BASE" 506.944, "SPAC" 0, "wght" 54, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}
    
h3.anim3{animation: anim3 3s  infinite; 
    font-family: AdobeVFPrototype;
    cursor: pointer;
    transition: 0.8s ease-in-out ;
    color:orange;
    font-size:20px;}
    
/*----------------------------------------------- H3 HOVER */

h3.anim3:hover {font-size:70px;
    font-variation-settings: "SCAL" 100, "BASE" 500, "SPAC" 970.833, "wght" 1000, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}
    
    h3.anim2:hover{font-size:40px;}

/*----------------------------------------------- IMAGES */

img{display:none;}

/*----------------------------------------------- ANIMATIONS */

@keyframes congrats {
 0%   {transform: translateY(100px); }
    
50% {transform: translateY(50px);font-variation-settings:"SCAL" 90,"wght" 900;}
    
100% { transform: translateY(100px); }}
    
    

    
@keyframes anim2 {
 0%   {color:black; }
    
50% {color:red;font-variation-settings: "SCAL" 100, "BASE" 500, "SPAC" 970.833, "wght" 294.083, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}
    
100% {color:black; }}


    
    
@keyframes anim3 {
 0%   {font-variation-settings: "SCAL" 100, "BASE" 506.944, "SPAC" 0, "wght" 54, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}
    
50% {font-size:40px;font-variation-settings: "SCAL" 100, "BASE" 500, "SPAC" 970.833, "wght" 1000, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0;}
    
100% {font-variation-settings: "SCAL" 100, "BASE" 506.944, "SPAC" 0, "wght" 54, "OPTI" 20, "HEIG" 456, "CAPS" 455, "CAPA" 400, "CAPB" 166, "ASCE" 456, "DESC" 456, "DIAC" 0, "MONO" 0, "CURV" 0; }}