/* - - - EVERYTHING - - - */

html{
font-size: 62.5%; }

*{
position: relative;
margin: 0rem;
padding: 0rem; }

body{
background-color: #D1D1D1;
font-family: "Montserrat", sans-serif; }

/* - - - HEADER - - - */

header{
z-index: 4;
width: 100%;
height: 17rem;
position: fixed;
display: grid;
grid-template-areas: "head head head"
					"menu menu main";
box-shadow: -0.5rem -0.3rem 1.5rem 0rem #202442;
}

.top-header{
width: 100%;
height: 5rem;
display: flex;
grid-area: head;
align-items: center;
justify-content: space-around;
background-color: #FAD02C;
}

.top-header h1{
font-size: 3rem;
color: #E9EAEC;
padding-left: 2rem;
}

.top-header div{
display: flex;
align-items: center;
justify-content: right;
width: 60%;
}

.top-header div a{
text-decoration: none;
}

.top-header div a h1{
cursor: pointer;
padding: 0rem;
font-size: 2rem;
color: #333652;
}

.top-header img{
width: 3.5rem;
height: 3.5rem;
padding-inline: 1.5rem;
}

.left-header{
height: 12rem;
display: flex;
grid-area: menu;
align-items: center;
justify-content: space-around;
background-color: #333652;
}

.left-header img{
width: 12rem;
height: 12rem;
}

.left-header div{
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2rem;
padding-inline: 2rem;
}

.left-header div a{
text-decoration: none;
}

.left-header div a h2{
font-size: 2rem;
color: #E9EAEC;
cursor: pointer;
}

.right-header{
height: 12rem;
display: flex;
grid-area: main;
align-items: center;
justify-content: center;
background-color: #E9EAEC;
}

.right-header div{
display: flex;
align-items: center;
justify-content: center;
}

.right-header div a{
text-decoration: none;
background-color: #333652;
cursor: pointer;
color: #E9EAEC;
border-radius: 1rem;
padding: 1rem 2rem;
}

.right-header div a h2{
}

.right-header img{
width: 8rem;
height: 8rem;
padding-inline: 1.5rem;
}

/* - - - MAIN - - - */

main{
position: relative;
top: 22rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

main div{
width: 85%;
height: 60rem;
padding: 2.5rem;
background-color: #E9EAEC;
margin-bottom: 5rem;
}

main div aside{
width: 100%;
height: 100%;
padding: 6rem 8rem;
box-sizing: border-box;
background: url('fondo_init.jpg');
border-radius: 2rem;
box-shadow: 0rem 0rem 2rem -0.8rem #535858;
}

main div aside form{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 6rem;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.6);
}

form h2{
font-size: 3rem;
font-weight: bold;
color: #E9EAEC;
}

form .bloq{
width: 100%;
height: auto;
display: flex;
justify-content: center;
flex-direction: row;
font-size: 1.7rem;
font-weight: bold;
padding-top: 4rem;
color: #E9EAEC;
background-color: transparent;
}

.bloq label{
padding-right: 2rem;
}

.bloq input{
border: none;
border-radius: 0.5rem;
background-color: #E9EAEC;
padding: 0.3rem 0.5rem;
}

form button{
padding: 0.7rem 1.5rem;
font-size: 2.2rem;
font-weight: bold;
background-color: #E9EAEC;
color: #333652;
border: none;
border-radius: 0.8rem;
cursor: pointer;
}

/* - - - EVENTOS - - - */

.right-header div a:hover{
color: #333652;
background-color: #90ADC6;
}

/*
Azul Marino: #333652;
Amarillo: #FAD02C;
Celeste: #90ADC6;
Blanco: #E9EAEC;
Fondo: #D1D1D1;
Sombras: #202442,
*/