*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    background: linear-gradient(0.5turn, #000030, #5080C0, #000030);
    height:100%;
    display:flex;
    justify-content:center;
    font-size:62.5%;
}
body{
    margin:10vh auto auto auto;
}
h1{
    font-size:4.5rem;
    color:#FF0000;
    text-align: center;
}
h2{
    margin-top:5vh;
    font-size:3.5rem;
    color:#FFFFFF;
    text-align:center;
}
p{
    color:#FAFAFF;
    font-size: 2.5rem;
    margin-top:2vmin;
    text-align:center;
}
#buttons{
    width:70vw;
    height:40vh;
    margin:5vh auto auto auto;
    background: linear-gradient(
        #7aa6d8,
        #5b86c6,
        #355fa3
    );
    border:1px solid #cfe4ff;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);
    display:flex;
    flex-direction:column;
    justify-content: center;
    gap:5vh;
}
button{
    font-size:3rem;
    margin: 0 auto 0 auto;
    text-align: center;
    width:60vw;
    height:10vh;
    border: hidden;
    box-shadow:
        inset 0 0.2vmin 0.2vmin rgba(255,255,255,0.8),
        inset 0 -0.2vmin 0.2vmin rgba(0,0,0,0.35),
        inset 0.2vmin 0 0.2vmin rgba(255,255,255,0.6),
        inset -0.2vmin 0 0.2vmin rgba(0,0,0,0.25);
    cursor:pointer;
}
button:active{
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.45);
}
#red{
    background: linear-gradient(
        to bottom,
        #fff5f2 0%,
        #e0a0a0 60%,
        #fff5f2 100%
    );
}
#blue{
    background: linear-gradient(
        to bottom,
        #f2f5ff 0%,
        #7fa8d8 60%,
        #f2f5ff 100%
    );
}
button:hover{
    filter: brightness(1.2);
}