/* ---- 
    These styles are just to get you going with responsive layout.
    Customise and adjust as you see fit!
    In particular, change colours, typography, and interface elements.
    You may wish to bring over your Adobe Fonts library from previous weeks, for example.
    -- CF
----




* {
    box-sizing: border-box;
    font-family: "ff-scala", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
   
}

body {
    background: var(--blue-mid);
    margin: 0;
    padding: 0;
}

/* ---- Typography ---- */

.main__heading {
    margin: 1rem 0;
    padding: 0;
    color: black;
    font-family: "ff-scala-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 4rem;
    line-height: 1;
    text-align: center;
}

.main__heading--sub1 {
    color: rgb(225,255,0);
    font-family: "ff-scala-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.main__intro {
    font-family: "ff-scala-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-align: center;
}

p {
    line-height: 1.5rem;
    margin: 0 auto;
    padding: 0;
    max-width: 60ch;
    text-indent: 1rem;
}

p:nth-of-type(1) {
    text-indent: 0;
    /* margin: 1rem auto 0 auto; */
}

/* ---- Layout ---- */

/* Navigation */

.nav-primary {
    margin: 0;
    padding: 0;
}

.nav-primary__list {
    margin: 0;
    padding: 0;

    list-style-type: none;
} 

.nav-primary__item {
    background: rgb(0, 0, 0);
    width: 100%;
    margin: 0;
    padding: 0rem;
    text-align: center;
    border-bottom: thin solid rgb(203, 203, 145);
}

.nav-primary__link {
    display: block;
    width: 100%;
    margin:0;
    padding: 1rem;
    text-decoration: none;
    font-family: "ff-scala-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: rgb(255, 242, 0);
}

.nav-primary__link:hover {
    background: rgb(225,255,0) ;
    color: black;
}

/* Page content layout */

.container {
    width: 100%;
    margin: 0 auto 1rem auto;

    /* Introducing grid for layout */
    display: grid;
    /* grid-template-columns: 2fr 1fr; */
    grid-template-columns: 1fr;
    gap: 1rem;
}

.main {
    background: rgb(255, 255, 89);
    /* width: 90%; */
    padding: 1rem;
}

.aside {
    background: rgb(0, 0, 0);
    padding: 1rem;
    color: rgb(255, 242, 0);
    
}

.footer {
    background: rgb(254,254,140);
    padding: 1rem;
    /* grid-column: span 2; */
}

/* Figures and images */

.content-section__figure {
    margin: 0;
}

.content-section__caption {
    margin: 1rem 0;
}

.content-section__image {
    border-radius: 0.5rem;
}

/* responsive media queries */
    
@media screen and (min-width: 800px) {
    .container {grid-template-columns: 2fr 1fr;}
    .footer {
        grid-column: span 2;
    }
}