@font-face {
    font-family: Trixie;
    src: url("files/9209.ttf");
}
* {
    font-family: Trixie;
    margin: 0;
    padding: 0;
    color: white;
}
body {
    background: #020202;
    
    min-height: 100vh;
}
header {
    width: 70%;
    margin: 0 auto;
    display: grid;
    grid-template-areas: "logo  title";
    justify-content: center;
    align-items: center;
}
header img {
    grid-area: logo;
    padding-top: 25px;
    width: auto;
    height: 8rem;
}
header h1 {
    grid-area: title;
    font-size: 8rem;
    font-family: Trixie;
}
.infobox {
    width: 60%;
    padding: 20px;
    margin: 0 auto;
    background: rgba(128, 128, 128, 0.247);
    font-family: Trixie;
    text-align: left;
    font-size: 1.1rem;
}
.content {
    padding-top: 10px;
    width: 50%;
    margin: 0 auto;
}
.quote {
    text-align: center;
    font-style: italic;
    font-size: 2rem;
}
.author {
    font-size: 2rem;
    margin-top: 10px;
    text-align: right;
    font-style: italic;
}
.content-text p {
    margin-bottom: 10px;
    font-size: 1.3rem;
}
.content-text p:nth-of-type(1) {
    margin-top: 10px;
}
.date {
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    font-size: 1.3rem;
}
.raz-end {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 2rem;
}
footer {
    text-align: center;
    padding: 50px;
}
footer a {
    color: white;
    font-size: 3rem;
    text-decoration: none;
}
footer a:hover {
    text-decoration: none;
}




@media(max-width: 1025px) {
    .infobox {
            width: 90%;
    }
    .content {
            width: 80%;
    }
}
@media(max-width: 585px) {
    header {
        justify-items: center;
        align-content: center;
    }
    header img {
        display: none;
    }
    .infobox {
        width: 100%;
        padding: 20px 0px;
    }
    .infobox p {
        padding: 5px;
    }
    .content {
        margin: 0 auto;
        width: 95%;
        text-align: justify;
    }
    .content-text p {
        width: 100%;
    }
    footer a {
        font-size: 2rem;
    }
}
@media(max-width: 426px) {
    header h1 {
        font-size: 5rem;
    }
}
@media(max-width: 320px) {
    header h1 {
        font-size: 3.5rem;
    }
    .quote {
        font-size: 1.5rem;
    }
    .author {
        font-size: 1.5rem;
    }
    footer a, .raz-end {
        font-size: 1.5rem;
    }
}