@font-face {
    font-family: "Berryfold";
    src: url(/font/Berryfold.otf) format(opentype);
}

@font-face {
    font-family: "Peach Lotus";
    src: url(/font/PeachLotus.otf) format(opentype);
}

@font-face {
    font-family: "Funny Hello";
    src: url(/font/FunnyHello.otf) format(opentype);
}

body {
    margin: 0;
    font-family: "Funny Hello";
    background-color: #fffaf8;
}

header {
    height: fit-content;
    background-color: #fee5db;
    padding: 10px;
    position: sticky;
    text-align: center;

    .title {
        font-family: "Peach Lotus";
    }
}

.title {
    font-family: "Berryfold";
    margin: auto;
}

#nav p {
    margin: 5px auto 0;
    font-size: 1.15em;
    font-family: "Berryfold";
}

a {
    color: #a32f00;
    text-decoration: none;
    transition: 0.25s ease;
}

p {
    margin: 5px 0;
}

a:hover {
    color: #e92410;
}

main {
    padding: 10px 20px;
}

footer {
    text-align: center;
    height: fit-content;
    background-color: #fee5db;
    padding: 10px;
}

#about {
 width: 750px;
    margin: 0 auto
}

@media (max-width: 767px) {
    #about {
        width: 100%;
    }
}