@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Poiret+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Bitter:ital,wght@0,100..900;1,100..900&family=Poiret+One&display=swap');

:root {
    --text-primary: #d4bc7f; /* Wythe Gold */
    --text-secondary: #e7dec6;
    --background-primary: #222222; /* Ebony */
    --background-secondary: #333333;
}

html {
    scroll-padding-top: 90px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--background-primary);
}

hr {
    border-top: 1px solid var(--text-primary);
}

.main {
    padding: 16px 0px;
    margin-top: 90px;
    background: linear-gradient(180deg, #222222 0%, #111111 33%, #222222 66%, #111111 100%);
    /* Font */
    font-family: "Atkinson Hyperlegible", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text-primary);
}

.main > * {
    width: 50vw;
    margin: auto;
    padding: 100px 0px;
}

.main > * > h1 {
    margin: 16px 0px 0px 0px;
}

.main > :first-child h1 {
    margin: 0px;
}

.highlight {
    color: var(--text-secondary);
    font-weight: bold;
}

h1 {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--text-secondary);
}

p {
    font-size: 16px;
}

@media only screen and (max-width: 1008px) {
    .main > * {
        width: 75vw;
        margin: auto;
    }
    
    h1 {
        font-size: 31px;
    }
    
    p {
        font-size: 15px;
    }
}