@import "_reset.css";

.sr-only {
    display: none;
}

html {
    font-size : 16px;
}

main {
    width:100vw;
    height:100vh;
    overflow : hidden;
    background-color : #282a36;
    font-family : Monospace;
}


/* HOMEPAGE */
#homepage {
    display:grid;
    grid-template-columns : 1fr 1fr;
}

#homepage > section:first-of-type {
    border-right : 1px solid #44475a;
    display:grid;
    grid-template-rows: 0.2fr 0.5fr 0.1fr 0.2fr;
}

#homepage > section:first-of-type h2{
    grid-row: 2 / 3;
    text-align:center;
    font-size: 2.8rem;
    font-weight:500;
    color: #ff5555;
    align-self:center;
    justify-self:center;
}

#homepage > section:first-of-type a{
    grid-row: 3 / 4;
    padding: 2rem 0;
    background-color: #6272a4;
    text-align:center;
    align-self:center;
    color:white;
    font-size: 1.7rem;
    font-weight: 500;
}

#homepage > section:last-of-type {
    display : grid;
    grid-template-rows : 0.1fr 0.6fr 0.3fr;
}

#homepage > section:last-of-type figure{
    grid-row : 2 / 3;
    display: flex;
}

#homepage > section:last-of-type figure img{
    width:50%;
    align-self:center;
    margin:auto;
}

#homepage > section:last-of-type h1{
    grid-row : 3 / 4;
    text-align:center;
    font-size: 4rem;
    font-weight:500;
    color: #50fa7b;
}


/* GAME */

#game {
    display:grid;
    grid-template-columns : 0.15fr 0.7fr 0.15fr;
}

#game > article {
    grid-column : 2 / 3;
    display: grid;
    grid-template-rows: 0.2fr 0.8fr;
}

#game > article > header {
    padding: 1rem 0;
}

#game > article > header figure {
    display: flex;
    align-items:center;
    justify-content:center;
}

#game > article > header figure img{
    width: 10%;
}

#game > article > header h1 {
    display: flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size: 1.5rem;
    font-weight:500;
    color: #50fa7b;
}

#game > article > section {
    padding: 2rem 0;
}

#game > article > section p{
    color:white;
    font-size:1.5rem;
    font-weight:500;
    line-height:2rem;
    margin-bottom:2rem;
}

#game > article > section fieldset{
    margin: 1rem 0;
}

#game > article > section label{
    color:white;
    font-size:1.3rem;
    line-height:2rem;
    margin-bottom:2rem;
}

#game > article > section input[type="radio"]{
    width:1rem;
    height:1rem;
}

#game > article > section button{
    margin-top: 3rem;
    background-color: #ff5555;
    color: white;
    border: none;
    font-size:1.5rem;
    font-family: Monospace;
    padding: 0.5rem 2rem;
}