@charset "UTF-8";
@font-face {
    font-family: 'Sono Regular';
    src: url(../fonts/Sono-Regular.ttf);
}
@font-face {
    font-family: 'Sono Light';
    src: url(../fonts/Sono-Light.ttf);
}
@font-face {
    font-family: 'Sono Bolder';
    src: url(../fonts/Sono-ExtraBold.ttf);
}

:root{
    --sono1: 'Sono Light';
    --sono2: 'Sono Regular';
    --sono3: 'Sono Bolder';
    --corBg: rgb(10, 16, 22);
    --corYellow: rgb(255, 196, 0);
    --animate-delay: 2s;
}

*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

body{
    font: 1.2em var(--sono2), 'Arial', 'sans-serif';
    color: white;
    background-color:var(--corBg);
    overflow: hidden;
}

body, html{
    width: 100%;
}

h1{
    font-size: 2.3em;
    text-align: center;
    padding: 100px 0px;
    position: relative;
    z-index: 2;
    text-shadow: .5px 1px 1px rgb(0, 0, 0);
}

h1::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to top, var(--corBg), rgba(255, 255, 255, 0)45%);
}

h1::after{ /*Background H1*/
    content: '';
    position: absolute;
    background-image: url(../images/bg-start.jpg);
    background-size:cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .7;
    z-index: -1;
} 

#main--screen{
    opacity: 0;
    transition: opacity 2s;
}

main p {
    font-size: .8em;
    line-height: 1.5em;
    padding: 20px 40px;
    text-align: justify;
    margin: auto;
}

#section--introduction, #section--second-page{
    position: absolute;
    transition: top 1.5s ease;
    width: 100%;
}

#section--introduction{top: 0}

#section--introduction > p::after {
    content: '';
    display: block;
    width: 200px;
    height: 20px;
    border-bottom:1.5px solid var(--corYellow);
    margin:auto;
    margin-top: 35px;
    border-radius: 90%;
}

main button {
    display: block;
    width: 220px;
    height: 60px;
    color: var(--corYellow);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.349);
    box-shadow: inset .1px .1px 20px rgba(255, 255, 255, 0.096);
    font: 1.8em var(--sono1), 'Arial', 'sans-serif';
    background-color: rgba(238, 255, 0, 0);
    border: 1px solid ;
    cursor: pointer;
    transition: box-shadow .5s;
}

div.button-main{
    margin: auto;
    margin-top: 20px;
    box-shadow: .1px .1px 10px rgba(255, 230, 0, 0.425);
    width: fit-content;
    transition: box-shadow .2s;
}

div.button-main:hover{
    box-shadow: .1px 1px 1px rgba(0, 0, 0, 0);
    transition: .4s;
}

main button:hover {
    box-shadow: inset .1px .1px 50px 9px rgba(229, 255, 0, 0.171);
    transition: box-shadow .15;
    transition: background-color 1s;
}

main button:active{
    text-shadow: .1px 1px .1px black;
    background-color: rgb(140, 147, 148);
    transition: background-color .2s;
}

footer, #footer2{
    background-color: black;
    display: block;
    width: 100vw;
    text-align: center;
    padding: 4px;
    font-size: .8em;
    position: fixed;
    bottom: 0px;
}

#footer2{
    position: relative;
}

/* ==============================================================
 SEGUNDA PAGINA
============================================================== */

#section--second-page{
    top: 900px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100vw;
}

#section--second-page p{
    margin: 210px auto 50px auto;
    background-color: rgb(244, 252, 255);
    color: black;
    padding: 15px;
    width: 350px;
    border: 3px solid black;
    box-shadow: inset .1px .1px 20px 1px rgba(0, 0, 0, 0.212);
}

a{text-decoration: none;}