@font-face {
    font-family:Lato;
    src: url(Lato/Lato-Regular.ttf);
}

@font-face {
    font-family:Lato-Italic;
    src: url(Lato/Lato-Italic.ttf);
}

@font-face {
    font-family:Lato-Bold;
    src: url(Lato/Lato-Bold.ttf);
}

@font-face {
    font-family:Lato-BoldItalic;
    src: url(Lato/Lato-BoldItalic.ttf);
}

@font-face {
    font-family:Lato-Light;
    src: url(Lato/Lato-Light.ttf);
}

@font-face {
    font-family:Lato-LightItalic;
    src: url(Lato/Lato-LightItalic.ttf);
}

@font-face {
    font-family:Lato-Thin;
    src: url(Lato/Lato-Thin.ttf);
}

@font-face {
    font-family:Lato-ThinItalic;
    src: url(Lato/Lato-ThinItalic.ttf);
}

@font-face {
    font-family:Romanica;
    src: url(Romanica.ttf);
}
html{
    background-color: rgb(255, 84, 65);
}

*{
    margin:0;
}
body {
    background-color: rgb(255, 249, 213);
    font-family: Lato, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0;
}

h1 {
    text-align:center;
    font-family: Lato-Bold, Arial, Helvetica, sans-serif;

    color:black;
    font-size:10vh;
    
}
h2 {
    font-size:3vh;
    font-family: Lato-Thin, Arial, Helvetica, sans-serif;
}

p {
    font-size:20px;
    font-family:Lato, Arial, Helvetica, sans-serif;
}

a {
    color: #000000;
    text-decoration: none;
}


.pages {
    text-align:center;
}


button{
    border:none;
    font-family: Lato;
    background-color:transparent;
    text-align:center;
    font-size:4vh;
    transition: 0.4s;
    border-radius:20px;
    padding-inline: 2vh;
    color:black;
}
button:hover{
    background-color:rgb(255, 84, 65);
    color:rgb(255, 249, 213);
}
.LinkButtons:hover{
    background-color:rgb(255, 84, 65);
    color:rgb(255, 249, 213);
    padding: 0px;
    font-size:20px;
}

header {
    padding: 3vh;
    text-align: center;
}

footer {
    padding: 10px;
    margin-top: auto;
    background-color: rgb(255, 84, 65);
}

article{
    padding: 10px 30px 30px 30px;
    max-width: 700px;
    margin:auto
}