@charset "UTF-8";
/* CSS Document */
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;
}


@font-face {

  font-family: 'Noboto Flex';
  src: url('fonts/NobotoFlex-VF.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}

#corpo{
    visibility: hidden;
}

body{ 
    background-color: #cb4f4f;
}

.whoa{
    overflow:hidden;    
text-align: center;
    width:100%;
    height:2vh;
    font-family: 'Noboto Flex';
    left:0;
    color: #fff;
}

#ups{
    color: #fff;
    margin-top:20vh;
    font-size:10vw; 
    text-align: center;
    font-family: 'Noboto Flex';
    font-variation-settings: "SCAL" 100, "SPAC" var(--weight), "wght" 200;
}

#ups2{
    color: #fff;
    margin-top:5vh;
    font-size:5vw; 
    text-align: center;
    font-family: 'Noboto Flex';
    font-variation-settings: "SCAL" 70, "SPAC" 120, "wght" 110;
}

@media only screen and (max-width: 650px) {
    

body{
    height:100%;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #fff;
}

#ups{
    visibility: hidden;
} 
    
#ups2{
    visibility: hidden;
}     
    
.whoa{
    visibility: hidden;
    }
    

@font-face {

  font-family: 'Noboto Flex';
  src: url('fonts/NobotoFlex-VF.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}

/*contentor de fora*/
    
#outer{
    position:absolute;
    top:0;
height:100vh;
width:100vw;    
    }    

#corpo{
visibility: visible;
top:0;
left:0;
margin-left: 0;
display: table;
position: relative;
margin:40vh auto;
background-color: white;
cursor: pointer;
}

/*animação segundo variável desativada*/ 

.marquee{
overflow:hidden;    
text-align: center;
top:0;
font-size:20vw;    
color:#cb4f4f;   
height:100%;
--weight: 20;
font-family: "Noboto Flex";
font-variation-settings: "SCAL" 100, "SPAC" var(--weight), "wght" 200;

}
    
/*animação segundo variável ativada*/    
    
.marquee-active{
overflow:hidden;    
text-align: center;
top:0;
font-size:20vw;    
color:#cb4f4f;   
height:100%;    
--weight: 20;    
font-family: "Noboto Flex";
font-variation-settings: "SCAL" 100, "SPAC" var(--weight), "wght" 200;
animation: grow 3s linear infinite;
}  
    
/*animação segundo variável desativada*/     
    
.marquee-stop{
overflow:hidden;    
text-align: center;
top:0;
font-size:20vw;    
color:#cb4f4f;   
height:100%;
--weight: 20;
font-family: "Noboto Flex";
font-variation-settings: "SCAL" 100, "SPAC" var(--weight), "wght" 200;  
}    
    
    

@keyframes grow{
    0% {font-variation-settings: "SCAL" 90, "SPAC" 900, "wght" var(--weight);}
    25% {font-variation-settings: "SCAL" 90, "SPAC" 900, "wght" (--weight);}
    50% {font-variation-settings: "SCAL" 90, "SPAC" 900, "wght" 450;}
    75% {font-variation-settings: "SCAL" 90, "SPAC" 900, "wght" 900;}
    100% {font-variation-settings: "SCAL" 90, "SPAC" 900, "wght" var(--weight);}
}

}