@font-face {
    font-family: Lato;
    src: url('./fonts/Lato/Lato-Regular.ttf');
}
@font-face {
    font-family: Lato;
    src: url('./fonts/Lato/Lato-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: Lato;
    src: url('./fonts/Lato/Lato-Italic.ttf');
    font-style: italic;
}
@font-face {
    font-family: Raleway;
    src: url('./fonts/Raleway/Raleway-Regular.ttf');
}
@font-face {
    font-family: Raleway;
    src: url('./fonts/Raleway/Raleway-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: Raleway;
    src: url('./fonts/Raleway/Raleway-Italic.ttf');
    font-style: italic;
}
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
p {
    font-family: 'Lato', sans-serif;
    font-size: 0.9em;
}
h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.6em;
}
.split {
    height: 25%;
    width: 33.3%;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
}
.splitend {
    height: 25%;
    width: 33.4%;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.uno {
    left: 0;
    background-color: #8fc4b0;
    top: 0;
    color: black;
}
.uno:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.due {
    left: 0;
    background-color: #bcdeae;
    top: 25%;
    color: black;
}
.due:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: -4px 4px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.tre {
    left: 0;
    background-color: #a9beaf;
    top: 50%;
    color: black;
}
.tre:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: 4px 0 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.quattro {
    left: 0;
    background-color: #c7ebd8;
    top: 75%;
    color: black
}
.quattro:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.cinque {
    left: 33.3%;
    background-color: #edcbde;
    top: 0;
    color: black;
}
.cinque:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: 4px 0 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.sei {
    left: 33.3%;
    background-color: #cab8e5;
    top: 25%;
    color: black;
}
.sei:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.sette {
    left: 33.3%;
    background-color: #cbb4c7;
    top: 50%;
    color: black;
}
.sette:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: 4px -4px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.otto {
    left: 33.3%;
    background-color: #b07f7e;
    top: 75%;
    color: black
}
.otto:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: -4px -4px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.nove {
    left: 66.6%;
    background-color: #e6ab9e;
    top: 0;
    color: black;
}
.nove:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: 4px 0 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.dieci {
    left: 66.6%;
    background-color: #eac8b9;
    top: 25%;
    color: black;
}
.dieci:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.undici {
    left: 66.6%;
    background-color: #d8b194;
    top: 50%;
    color: black;
}
.undici:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: 4px -4px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.dodici {
    left: 66.6%;
    background-color: #e3aeab;
    top: 75%;
    color: black
}
.dodici:hover {
    background-color: #001f41;
    color: #fff;
    box-shadow: -4px -4px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}
@media (max-width: 769px), (max-height: 769px) {
    p {
        display: none;
    }
    h2 {
        font-size: 1em !important;
    }
}