html{
    font-size: 10pt;
}

h1 {
    color:white; 
    font-size:42px; 
    font-family: azukifontB;
}
h2 {color:yellowgreen;}
p {color:white;}
@font-face {
font-family: OptimaNovaLT-Black;
src: url(OptimaNovaLT-Black.ttf);
}
@font-face {
font-family: Persona5MenuFontPrototype-Regular;
src: url(Persona5MenuFontPrototype-Regular.ttf);
}
body {
    background-image: url(background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: OptimaNovaLT-Black;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    display: grid;
    padding: 0;
    margin: 0;
}

header {
    color:white;
    Background-color: rgba(71, 71, 71, 0.9);
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    grid-auto-flow: column;
    gap: 1rem;
    font-family: Persona5MenuFontPrototype-Regular;
    margin: 20vh;
    padding: 5vh;
}

main {
    Background-color: rgba(20, 20, 20, 0.65);
    display: grid;
    margin: 10vh;
    min-height: 70vh;
    place-items: center;
    font-size: 1.5rem;
    border-radius: 5pt;
}

main ul {
    list-style-type: none;
    padding:0;
    text-align: center;
    line-height: 3rem;
}

main ul li {
    Background-color: rgba(23, 23, 23, 0.78);
    padding: 3vh;
    margin: 2vh;
    border-radius: 5pt;
}

main ul a {
    color: white;
    text-decoration: none;
}

main ul li:hover {
    background-color:rgba(137, 137, 137, 0.83);
    padding: 3vh;
    margin: 2vh;
    border-radius: 5pt;
}

main ul a:hover {
    text-shadow: 2px 2px 5px #404040;
    color: #121212;
}

main section {
    background-color: #868686;
    padding: 55px;
    border: 1px solid black;
}

main section:hover {
    transform: scale(1.1) rotate(5deg);
    transition: all 0.3s ease;
}

header img {
    max-height: 25vh;
}