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;
}

/*fontes*/
@font-face {
    font-family: BAUHS93;
    src: url(fontes/BAUHS93.TTF);
}

@font-face {
    font-family: Amatic;
    src: url(fontes/AmaticSC-Regular.ttf);
}

@font-face {
    font-family: bb-book;
    src: url(fontes/bb-book.otf);
}

@font-face {
    font-family: bebas;
    src: url(fontes/BEBAS__.TTF);
}

@font-face {
    font-family: mod;
    src: url(fontes/MOD20.TTF);
}

@font-face {
    font-family: monotonia;
    src: url(fontes/monotonia.otf);
}

/*fontes variáveis*/

@font-face {
    font-family: Mutator;
    src: url(fontes/MutatorSans.ttf);
}

@font-face {
    font-family: Kairos;
    src: url(fontes/KairosSans_Variable.ttf);
}

body{
	margin:0;
	padding:0;
	height:100%;
	border: solid 10px #000;
	background-color: #EE3E4E;
	overflow-x: hidden;
	}

h1, h2, h4, h5, p, button {
	font-family: Helvetica;
	font-size: 35px;
	line-height: 38px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
}

span{color: #FFF;}

/*classes*/
.here {
		font-size: 55px;
	  color: #FFF;
		text-align: center;
	  margin:auto;
		margin-top: 7.5%;
		width:500px;

	}

/* classes dos conjuntos de caracteristicas do become */
.class1 {
	font-family: Amatic;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: 25px;
}

.class2 {
	font-family: BAUHS93;
 }

 .class3 {
	 font-family: bb-book;
 }

 .class4 {
	 font-family: bebas;
	 	font-style:oblique;
 }

 .class5 {
	 font-family: mod;
   text-transform: uppercase;

 }

 .class6 {
	font-family: monotonia;
 }

 .class7 {
 font-family: Mutator;
 font-variation-settings: "wdth" 0, "wght" 0;
 animation-name: fontev;
 animation-duration: 4s;
 animation-iteration-count: infinite;
 }

 .class8 {
 font-family: Kairos;
 font-variation-settings: "wdth" 0, "wght" 0;
 animation-name: fontev2;
 animation-duration: 4s;
 animation-iteration-count: infinite;
 }

/*circulo*/
.dot {
  height: 465px;
  width: 465px;
  border-radius: 100%;
  margin: 0 auto;
	background-color: #F5CDFF;
	animation-name: cores;
	animation-duration: 4s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	display: flex;
  align-items: center;
  margin-top: -5%;
  overflow: hidden;
}

/*IDs*/

/*botao do here*/
#button {
  margin: auto;
	margin-top: 2.5%;
	width:295px;
	border: 0px;
	background-color: inherit;
 }

#container {
  margin: 15% 0 6% 0;
}

#become_original {
	font-size: 100px;
	margin: 0 auto;
}

/*botao do become*/
#button1 {
	background-color: inherit;
	margin:auto;
	width: 300px;
	margin-top:2.5%;
	margin-bottom:2.5%;
	}

#button:hover {text-decoration: underline;}

#button1:hover {text-decoration: underline;}

#float {
	animation-name: floating;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

/*animações*/

/*animação círculo*/
	 @keyframes cores {
		 0%   {background-color: #F5CDFF;}
	   25%   {background-color: #00ADEF;}
	   50%  {background-color: #EE3E4E;}
		 100%  {background-color:  #F5CDFF;}
	 }

	 @keyframes floating {
	     from { transform: translate(0,  0px); }
	     65%  { transform: translate(0, 15px); }
	     to   { transform: translate(0, 0px); }
	 }

/*animações das fontes variáveis*/

@keyframes fontev {
	0%   { font-variation-settings: "wdth" 0, "wght" 0;}
	15%  {font-variation-settings: "wdth" 50, "wght" 170;}
	30%  {font-variation-settings: "wdth" 67, "wght" 630;}
	45% {font-variation-settings: "wdth" 70, "wght" 855;}
	60%  {font-variation-settings: "wdth" 67, "wght" 630;}
	75%  {font-variation-settings: "wdth" 50, "wght" 170;}
	100%   { font-variation-settings: "wdth" 0, "wght" 0;}
}

@keyframes fontev2 {
	0%   {font-variation-settings: "wght" 0, "wdth" 0, "ital" 0;}
	15%  {font-variation-settings: font-variation-settings: "wght" 365, "wdth" 50, "ital" 0.2;}
	30% {font-variation-settings: "wght" 480, "wdth" 67, "ital" 0.5;}
	45%  {font-variation-settings: "wght" 655, "wdth" 70, "ital" 1;}
	60%  {font-variation-settings: "wght" 480, "wdth" 67, "ital" 0.5;}
	75%  {font-variation-settings: font-variation-settings: "wght" 365, "wdth" 50, "ital" 0.2;}
	100% {font-variation-settings: "wght" 0, "wdth" 0, "ital" 0;}
}

/*media*/

@media only screen and (min-width: 300px) and (max-width: 560px) {

body{overflow-x: hidden;}

h1, h2, h4, h5, p, button {
	text-align: center;
	font-size: 29.5px;
	line-height: 31px;
}

.here {
	font-size: 28px;
	text-align: center;
	margin:auto;
	margin-top: 15%;
	width:70px;

	}

.dot {
	height: 265px;
	width: 265px;
	margin: 0 auto;
	align-items: center;
	margin-top: -5%;
	}

#button {
	margin: auto;
	margin-top: 2.5%;
	width:245px;
	 }


#container {
	  margin: 15% 0 15% 0;
	}

#become_original {
		font-size: 60px;
		margin: 0 auto;
	}

	#button1 {
		margin:auto;
		width: 255px;
		margin-top:12%;
		margin-bottom:12%;
		}

#button:hover {text-decoration: none;}
#button1:hover {text-decoration:none;}

@media only screen and (min-width: 501px) and (max-width: 900px) {

body{overflow-x: hidden;}

h1, h2, h4, h5, p, button {
	text-align: center;
	font-size: 32px;
	line-height: 34px;
}

.here {
	font-size: 28px;
	text-align: center;
	margin:auto;
	margin-top: 15%;
	width:70px;

	}

.dot {
	height: 420px;
	width: 420px;
	margin: 0 auto;
	align-items: center;
	margin-top: -5%;
	}

#button {
	margin: auto;
	margin-top: 2.5%;
	width:270px;
	 }


#container {
	  margin: 15% 0 15% 0;
	}

#become_original {
		font-size: 95px;
		margin: 0 auto;
	}

	#button1 {
		margin:auto;
		width: 275px;
		margin-top:12%;
		margin-bottom:12%;
		}

#button:hover {text-decoration: none;}
#button1:hover {text-decoration:none;}

}