*{
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: inherit;
}
html{
    height: 100%;
    margin:0;
    box-sizing: border-box;
}
body{
    margin:0;
    height:100%;
}
div.main{
    display:grid;
    place-items:center;
    min-height:100%;
    grid-template-rows: auto 1fr auto;
}

img{
    height:50vh;
    max-width:100vw;
    margin-top:20px;
}
p{
    text-align:center;
    font-size:25pt;
    max-width:800px;
}
a{
    color:white;
    background:linear-gradient(#7f09ff, #cf19ff);
    width:90vw;
    text-align:center;
    font-size:30pt;
    text-decoration:none;
    padding:20px;
    border-radius:15px;
    box-shadow:0 5px 10px rgba(0,0,0,.5);
    border:2px solid white;
    transition:all .22s;
    margin:0 15px 40px 15px;
}

a:hover{
    background:linear-gradient(#cf19ff,#7f09ff);
    box-shadow:0 0 3px rgba(0,0,0,.5);
}

.page-body{
    padding:20px 0;
    display:grid;
    place-items:center;
}
.footer{
    padding:20px 0;
    color:white;
    background:linear-gradient(#1c0239, #cf19ff);
    width:100vw;
    text-align:center;
}

@media only screen and (max-width:800px){
    img{
        margin-top:0;
        width:100vw;
        height:auto;
    }
    p{
        font-size:20pt;
    }
}