/* ---=== BASE ===--- */

@import url("https://use.typekit.net/njx7drz.css");
:root{
    --green: #9aae74;
    --l-green: #d3d7cb;
    --d-green: #183014;
    --orange: #ba4526;
    --brown: #4b2d24;
    
    --orange-h: #e5a694;

    --lores: lores-15-narrow, sans-serif;
    --lores-bold: lores-15-bold-alt-oakland, sans-serif;
}

/* ======================================================== */


/* === TEXT === */

/* headings */
h1{
    color: var(--orange);
    font-family: var(--lores-bold);
    font-size: 120px;
    text-transform: uppercase;
    margin: 0;
    padding: 10;
}
h2{
    color: var(--orange);
    font-family: var(--lores);
    font-size: 60px;
    text-transform: uppercase;
    margin: 10px 0 20px 0;
}
h3{
    color: var(--d-green);
    font-family: realist, sans-serif;
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 10px 0;
}
/* headings sometimes */
header h1, header h2, footer h1, footer h2{
    text-align: right;
    color: var(--d-green);
    margin: 0;
}

/* text */
p, li, ul{
    color: var(--d-green);
    font-family: realist, sans-serif;
    font-weight: 500;
    font-size: 22px;
    margin: 0;
}
/* links */
a{
    text-decoration: none;
    color: #183014;
}
a:hover{
    text-decoration: underline;
}
/* text sometimes */
.text p{
    margin-bottom: 20px;
}

/* list */
ul{
    list-style: none;
    margin-bottom: 20px;
    list-style-type: "# ";
}

/* ======================================================== */


/* UNIVERSALS */
.wrapper{
    margin: 0 auto;
    max-width: 19200px;
}
video{
    width: 100%;
    border: 6px var(--green) solid;
    margin-bottom: 30px;
}
img{
    width: 100%;
}

/* ======================================================== */


/* === SECTIONS === */
body{
    background: var(--l-green);
}
main{
    margin: 10px 130px 20px 130px;
}

/* header */
header{
    border: var(--green) 6px solid;
    padding: 10px 100px 10px 100px;
    display: flex;
    justify-content: space-between;
}

/* nav */
nav li{
    list-style: none;
    display: flex;
}
nav a{
    text-decoration: none;
    color: var(--d-green);
    font-size: 25px;
    font-family: realist, sans-serif;
    font-weight: 700;
    font-style: normal;
}
nav a:hover{
    text-decoration: underline;
}

/* footer */
footer{
    padding: 30px 100px 10px 135px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: var(--green) 6px solid;
}
footer h2{
    margin-bottom: 10px;
}

/* contact */
.contact-mail, .contact-number{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: end;
}
.contact-number p{
    margin-top: 8px;
}

/* bottom nav */
.bottom-nav{
    display: flex;
    justify-content: center;
    gap: 40px;
}
.up, .back, .next{
    display: flex;
    flex-direction: column;
}

/* ======================================================== */


/* === CONTAINER === */

/* flex */
.flex{
    display: flex;
    gap: 40px;
}

/* grid */
.grid{
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(3, minmax(min(50%, 200px), 1fr));
}
.grid h2{
    grid-area: 1 / 1 / 2 / end;
}

/* ======================================================== */


/* === BUTTONS === */

button{
    padding: 20px;
    margin-top: 30px;
    background: transparent;
    border: 6px dashed var(--orange);
    color: var(--d-green);
    font-size: 25px;
    font-family: realist, sans-serif;
    font-weight: 700;
    font-style: normal;
}
button:hover{
    border-color: var(--orange-h);
    text-decoration: underline;
    padding: 15px;
    margin: 35px 5px 5px 5px;
}

/* ======================================================== */


/* === SVG === */

/* variants */
#up, #back, #next{
    width: 10%;
}
#logo{
    width: 100px;
    margin: 20px 0 20px 35px;
}
#mail-icon{
    width: 40px;
}

/* colours */
.d-green {
    fill: var(--d-green);
}
.orange {
    fill: var(--orange);
}