@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

:root{
	--primaria-degrade:linear-gradient(to bottom, #aaa, #ccc);
	--secundaria-degrade:linear-gradient(to bottom, #85a, #eef, #eef, #85a);
	--primaria:#85a;
	--secundaria:#eef;
}

/* RESET */
*{margin:0; padding:0; font-size:100%; border:none; outline:none; font-weight:300; box-sizing:border-box; font-family:"Fredoka", sans-serif; font-size:14px;}
a{text-decoration:none; color:#05a;}
ul{list-style:none;}
img{max-width:100%;}
.pointer{cursor:pointer;}
.pointer:hover{filter:brightness(150%);}
button{width:80px; height:25px; border-radius:5px; background:white; color:black;}
button:hover{cursor:pointer; filter:brightness(75%);}

html, body{height:100%;}

ans-index{
	width:100%;
	display:grid;
	grid-template:
		"navegadores" 2fr
		"entrar" 1fr
		/ 1fr
	;
	height:100%;
}
	ans-index > :nth-child(1){
		grid-area:navegadores;
		display:grid;
		grid-template:
			"tam-1 tam-1 tam-1 tam-2 tam-2 tam-2" 3fr
			"tam-3 tam-3 tam-4 tam-4 tam-5 tam-5" 2fr
			/ 1fr 1fr 1fr 1fr 1fr 1fr
	}
		.i-tam-1, .i-tam-2{font-size:50px; color:#333;}
		.i-tam-3, .i-tam-4, .i-tam-5{font-size:25px; color:#333;}
		ans-index > :nth-child(1) > div{display:flex; border:1px solid #eee; justify-content:center; align-items:center;}
		ans-index > :nth-child(1) > :nth-child(1){grid-area:tam-1;}
		ans-index > :nth-child(1) > :nth-child(2){grid-area:tam-2;}
		ans-index > :nth-child(1) > :nth-child(3){grid-area:tam-3;}
		ans-index > :nth-child(1) > :nth-child(4){grid-area:tam-4;}
		ans-index > :nth-child(1) > :nth-child(5){grid-area:tam-5;}
			ans-index > :nth-child(1) > div > ans-nav{display:flex; justify-content:center; align-items:center; flex-direction:column; border-radius:50%;}
			ans-index > :nth-child(1) > :nth-child(1) > ans-nav{width:120px; height:120px; background:;}
			ans-index > :nth-child(1) > :nth-child(2) > ans-nav{width:120px; height:120px; background:;}
			ans-index > :nth-child(1) > :nth-child(3) > ans-nav{width:80px; height:80px; background:;}
			ans-index > :nth-child(1) > :nth-child(4) > ans-nav{width:80px; height:80px; background:;}
			ans-index > :nth-child(1) > :nth-child(5) > ans-nav{width:80px; height:80px; background:;}
	ans-index > :nth-child(2){
		grid-area:entrar;
		display:flex;
		justify-content:center;
		align-items:center;
	}