:root{
    /* fonts */
    --font-1: "JetBrains Mono";
    --font-2: "Righteous";
    --font-3: "Lato";
    --font-4: "Josefin Sans";

    /* font sizes */
    --font-base: 16px;
    --size-1: 18px;
    --size-2: 24px;
    --size-3: 32px;
    --size-4: 48px;
    --size-5: 64px;
    --size-6: 80px;
    --size-7: 96px;
    --size-8: 112px;

    /* colors */
    --light-beige: #fdf7e7; 
    --dark-beige: #c3bba5;
    --black: #120f06;
    --light-red: #ff283e;
    --dark-red: #a50010;
    --light-orange: #ff8000;
    --dark-orange: #c76400;
    --light-yellow:#ffee00;
    --dark-yellow: #b9ae0f;
    --light-blue: #3f52fe;
    --dark-blue: #0012b7;

    /* line */
    --line: var(--black) solid 1px;
}

body{
    background-color: var(--light-beige);
}

/* mobile top nav on all pages*/
header{
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav{
    background-color: var(--black);
    border-bottom: solid var(--light-beige);
    display: flex;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
}

.nav-item{
    padding: 16px;
    font-size: var(--size-4);
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
}

.navcirclehome{
    color: var(--light-beige);
}

.navcircle1{
    color: var(--light-red);
}

.navcircle2{
    color: var(--light-orange);
}

.navcircle3{
    color: var(--light-yellow);
}

.navtitle-home{
    font-family: var(--font-1);
    font-size: var(--font-base);
    color: var(--light-beige);
}

.navtitle-01{
    font-family: var(--font-1);
    font-size: var(--font-base);
    color: var(--light-red);
}

.navtitle-02{
    font-family: var(--font-1);
    font-size: var(--font-base);
    color: var(--light-orange);
}

.navtitle-03{
    font-family: var(--font-1);
    font-size: var(--font-base);
    color: var(--light-yellow);
}


/* site footer on all pages*/
h1{
    font-family: var(--font-1);
    font-size: var(--font-base);
    color: var(--light-beige);
}

.footer{
    background-color: var(--black);
    display: flex;
    justify-content: space-between;
    padding: 16px;
}

.footer-class{
    margin: 0;
    text-align: start;
}

.footer-name{
    margin: 0;
    text-align: end;
}

/* mobile font settings*/
h2{
        font-family: var(--font-2);
        font-size: calc(var(--size-4)*1.1);
        text-wrap: balance;
        padding: 16px;
    }

h3{
        font-family: var(--font-4);
        font-size: var(--size-2);
        padding: 16px;
    }

h4{
    font-family: var(--font-4);
    font-size: calc(var(--size-1)*1.2);
    margin-left: 16px;
}

.top-button {
    position: fixed;
    bottom: 30px;
    right: 16px;
    cursor: pointer;
    background-color: var(--dark-beige);
    padding: 8px 12px 8px 12px;
    border-radius: 50px 50px 50px 50px;
}

.top-button h5 {
    font-family: var(--font-4);
    font-size: var(--size-2);
    color: var(--black);
    transition: 0.1s ease-in-out;
}

article{
    padding-top: 24px;
    padding-bottom: 30px;
}

p{
    font-family: var(--font-3);
    font-size: var(--size-1);
    font-weight: 400;
    line-height: calc(var(--size-1)*1.6);
    text-align: left;
    text-wrap: balance;
    padding: 16px;
    max-width: 65ch;
    margin: 16px;
}

blockquote{
    font-family: var(--font-4);
    font-size: var(--size-3);
    font-weight: 700;
    line-height: calc(var(--size-3)*1.3);
    text-wrap: balance;
    padding: 24px;
    position: relative;
    transition: border-color 0.5s ease;
}

em{
    font-family: var(--font-1);
}

/* media queries*/
@media (min-width: 745px){
.nav-item{
    font-size: var(--size-4);
    display: grid;
    grid-template-columns: auto auto;
    }

    .navtitle-home{
        font-size: var(--size-2);
        padding: 16px;
    }
    .navcirclehome:hover{
        color: var(--dark-beige);
    }

.navtitle-01{
    font-size: var(--size-2);
    padding: 16px;
}
.navcircle1:hover{
    color: var(--dark-beige);
}

.navtitle-02{
    font-size: var(--size-2);
    padding: 16px;
}
.navcircle2:hover{
    color: var(--dark-beige);
}

.navtitle-03{
    font-size: var(--size-2);
            padding: 16px;
}
.navcircle3:hover{
    color: var(--dark-beige);
}

h1{
    font-size: var(--size-1);
}

p{
    display: flex;
    justify-content: flex-end;
    max-width: 90%;
}

blockquote{
    max-width: 80%;
}

.top-button {
    bottom: 65px;
}

.top-button h5 {
    font-size: var(--size-3);
}

.footer h1{
    font-size: var(--size-1);
}
}

@media (min-width: 1000px){
.nav-item{
        font-size: var(--size-5);
    }

    .nav-item:hover{
        color: var(--dark-beige)
    }

    .navtitle-home{
        font-size: var(--size-3);
    }

    .navtitle-01{
        font-size: var(--size-3);
    }

    .navtitle-02{
        font-size: var(--size-3);
    }

    .navtitle-03{
        font-size: var(--size-3);
    }

    p{
        display: flex;
        justify-content: flex-end;
        max-width: 70%;
        margin: 0 auto;
    }
}

@media (min-width: 1400px){
    .nav-item{
        font-size: var(--size-6);
    }
}