/*
author: Zowie Beha
license: Copyright © 2024 Zowie Beha
*/


/* ===========
Google Fonts
============== */

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 700;
    src: url("https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nBrXyw1W3fxIk.woff2")
         format("woff2");
  }

  
/* ===========
Reset
============== */
html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    
    /* Display viewport ( header/main/footer children ) in flex mode */
    display: flex;
    flex-direction: column;
}

*, *::after, *::before {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}


/* ===========
Navigation header
============== */
header > nav {
    background-color: #FFD711;
    padding: 1em 1em;
    font-size: large;
    border-bottom: 1px solid rgb(218, 218, 109);
}
header > nav > ul { 
    width: 100%;
}
header > nav > ul {
    display: flex;
    gap: 1em;
    justify-content: center;
}

header > nav > ul div {
    display: flex;
}

header > nav > ul div.justify-left {
    margin-right: auto;
}


header > nav > ul div.justify-center {
    /* alter this with media query */
    gap: 7em;
}

header > nav > ul div.justify-right {
    gap: 1.1em;
    margin-left: auto;
}

header > nav > ul li {
    list-style-type: none;
}

header > nav > ul a {
    text-decoration: none;
    color: black;
}



/* ===========
Responsive navigation header
============== */
@media screen and (max-width: 44.375em) {
    header > nav > ul div.justify-center {
        gap: 5em;
    }
}

@media screen and (max-width: 38.688em) {
    header > nav > ul div.justify-center {
        gap: 4em;
    }
}

@media screen and (max-width: 37.125em) {
    header > nav {
        padding: 0em 0em;
    }
    
    header > nav > ul {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    
    /* hacky */
    header > nav > ul li {
        margin-top: 0.5em;
        padding-bottom: 0.5em;
    }
    
    header > nav > ul li {
        border-bottom: 2px solid #bca013;
        /* we have to pull out the text-align: center,
        as we can't use align items because
        we need the div to be display: block.
        this is because if the div is display: flex
        with align-items: center, the li border
        is only as big as the li.
        
        if we make li width: 100%,
        it messes up the align-items property.
        
        if we do align-items: stretch,
        the text is aligned left.
        
        end goal: we want the bottom border to span
        100% of the container, and for the text to be
        centered.
        
        text-align: center;
        */
        text-align: center;
    }

    header > nav > ul div.justify-right a:last-child li {
        border-bottom: none;
    }
    
    header > nav > ul div {
        /*
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1em;*/
        /* align-self: flex-end;
        
        width: 100%; */
        width: 100%;
        display: block;
        /*
        flex-direction: column; 
        justify-content: center;
        gap: 2.5em; */
    }
    
    header > nav > ul div.justify-left {
        margin-right: 0;
    }
    
    header > nav > ul div.justify-center {
        /* alter this with media query */
        gap: 0;
    }
    
    header > nav > ul div.justify-right {
        margin-left: 0;
        gap: 0;
    }
    
}


/* ===========
Search bar
============== */
header > div.search {
    width: 100%;
    padding: 0.3em 0;  
    background-color: rgb(245, 242, 242);
    border-bottom: 1px solid rgb(214, 214, 212);
}

header > div.search > form.search {
    width: 100%;
    
    display: flex;
    gap: 10px;
    /* alter this with media query */
    justify-content: center;
}

header > div.search > form.search input[type="text"] {
    border-radius: 0.7em;
    border: 1px solid rgb(108, 108, 108);
    padding: 0em 1em;
    width: 30%;
    height: 2.7em;
    align-self: center;
}


/* ===========
Responsive search bar
============== */
@media screen and (max-width: 85.25em) {
    header > div.search > form.search input[type="text"] {
        width: 40%;
    }
}

@media screen and (max-width: 82.375em) {
    header > div.search > form.search input[type="text"] {
        width: 50%;
    }
}

@media screen and (max-width: 63.563em) {
    header > div.search > form.search input[type="text"] {
        width: 70%;
    }
}

@media screen and (max-width: 36.688em) {
    header > div.search > form.search input[type="text"] {
        width: 80%;
    }
}



header > div.search > form.search input[type="text"]:focus {
    /* Change focus color and thickness to something nicer */
    outline: 1px solid #87c9ff;
}

header > div.search > form.search input[type="submit"] {
    border: 1px solid rgb(134, 132, 132);
    width: 2.9em;
    height: 2.9em;
    border-radius: 1.2em;
    background: url("../images/magnifier.png") no-repeat;
    background-color: #ffffff;
    background-size: cover;
    background-position: center; 
    background-origin: content-box;
    padding: 0.8em;
}

header > div.search > form.search input[type="submit"]:hover {
    background-color: #efeaea;
    /* yuh */
    cursor: pointer;
}

header > div.search > form.search input {
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    font-size: medium;
}

header > div.search > form.search label {
    /* Keep labels in the document for accessibility,
    but don't show them to the user. */
    display: none;
    opacity: 100;
    background-color: red;
}


/* ===========
Main content
============== */
main {
    /* Main should take up all available free space.
    The default flex-grow value for elements is 0, so 1 will fill
    the container (viewport) until it reaches the footer.
    Thus footer will always be on the bottom. */
    flex-grow: 1;
    padding-bottom: 1em;
}

main section,
main article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

main .mt-2 {
    margin-top: 2em;
}
/* ===========
Responsive main content
============== */
@media screen and (max-width: 28.75em) {
    p {
        /* On small screen sizes,
        the p takes up the whole width and is justified center,
        however the text is aligned left and appears uncentered. 
        This corrects the behavior to make it look centered even
        at small sizes. */
        text-align: center;
    }
}

/* ===========
Footer content
============== */
footer {
    background-color: rgb(24, 23, 28);
    color:rgb(161, 161, 161);
    border-top: 3px solid rgb(66, 60, 60);
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0.5em;
    
    margin-bottom: 0;
}

footer p.author-note {
    color: white;
    font-size: medium;
}

footer p.author-note .heart {
    transition-property: color;
    transition-duration: 0.3s;
}

footer p.author-note .heart:hover {
    color: red;
}

footer p {
    font-size: small;
}

footer a {
    color: #ceb11e;
}

footer section.portion-1 h2 {
    text-align: center;
}

footer section.portion-1 {
    padding-top: 1.4em;
    padding-bottom: 1em;
}

footer section.portion-1 h2 {
    color: white;
}

footer section.portion-1 {
    flex-basis: 2;
}

footer section.portion-2 {
    flex-basis: 1;
    text-align: center;
}

footer section.portion-3 {
    flex-basis: 1;
    text-align: center;
}

footer section.portion-2 a {
    text-decoration: none;
    font-size: 1.1em;
}
footer section.portion-2 p:nth-child(1n+2) {
    margin-top: 0.5em;
}


/* Homepage link */
footer p.homepage-link {
    margin-top: 0.1em;
    font-size: x-large;
    background-color: rgb(24, 23, 28);
    border-radius: 2em;
    padding: 0.1em 0.1em;
    /* padding-bottom: 0.3em; */
    
    border: 2px solid rgb(76, 60, 60);
    
    transition-property: background-color;
    transition-duration: 0.7s;
    
    display: inline-block;
}

footer p.homepage-link a {
    /* The house icon isn't centered 
    in the available icon canvas, so center it manually here: */
    text-decoration: none;
    position: relative;
    top: -0.15em;
}

footer p.homepage-link:hover {
    background-color: rgb(225, 225, 221);
}

footer p.homepage-link .link-text {
    /* Keep text in the document for accessibility,
    but don't show to the user. */
    display: none;
}


/* ===========
Responsive footer content
============== */
@media screen and (max-width: 90.25em) {
    footer section.portion-1 {
        padding-left: 2em;
    }
}

@media screen and (max-width: 74.25em) {
    footer {
        flex-direction: column;
        padding-bottom: 1em;
    }
}

@media screen and (max-width: 29.25em) {
    footer section.portion-1 {
        padding-right: 2em;
    }
}

/* ===========
Selection
============== */
header *::selection {
    background:#5a2d06;
    color: rgb(215, 169, 20);
}
footer *::selection, main *::selection {
    background:#FFD711;
    color: black;
}