/*
    http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* GLOBAL/CUSTOM STYLES */
:root{
    /* Colors from Colormind.io */
    --red: #ED4A3C;
    --gold: #FDCB13;
    --lime: #B9C44C;
    --sky: #2DADAC;
    --blue: #193259;

    /* Neutrals */
    --off-wht: #fefdf7;
    --lt-gray: #eaeaea;
    --med-gray: #555;
    --dk-gray: #222;

    /* Fonts from Google Fonts, Pairing by FontJoy.com */
    --heading-fonts: Scada, Verdana, sans-serif; /* 400 or 700 weight */
    --body-fonts: Catamaran, Arial, Sans-serif; /* 100 - 900 weight */
}

/* BODY STYLES */
body{
    /*  In order to position some of our other elements on the page we will need to position the body first. Setting the position on an element to relative and not changing any other styles allows this without actually changing the position of the body */
    position: relative;
    font-family: var(--body-fonts);
    color: var(--dk-gray);
    box-sizing: border-box;
    line-height: 1.35;
    font-size: 1.1rem;
    background-color: var(--off-wht);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23eeede7' fill-opacity='0.61'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* SKIP LINK STYLES */
#skip{
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip:focus{
    position: static;
    width: auto;
    height: auto;
    font-family: var(--body-fonts);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dk-gray);
    outline: 4px solid var(--red);
    background: var(--off-wht);
    margin-bottom: 6px;
}

/* HEADER/MAIN/FOOTER STYLES */
header, main, footer{
    background-color: var(--off-wht);
    padding: 1rem;
    max-width: calc(1000px - 2rem);
    margin: 0 auto;
    border-right: 1px solid var(--lt-gray);
    border-left: 1px solid var(--lt-gray);
}

main{
    background-color: var(--off-wht);
    background-image: url("images/green-dust-and-scratches.png");
}

footer{
    padding: 3rem 1rem;
    text-align: center;
}
    
    /* HEADING STYLES */
h1, h2, h3{
    font-family: var(--heading-fonts);
    font-weight: 700;
    text-align: center;
}

h1{
    font-size: 2.5rem;
    margin: 0.75em 0;
}

h2{
    font-size: 2rem;
    margin: 0.75em 0;
}

h3{
    font-size: 1.5rem;
    margin: 0;
}

/* LINK STYLES */
a{
    display: block;
    padding: 1rem;
    text-decoration-thickness: 2px;
    color: var(--dk-gray);
    text-decoration-color: var(--sky);
}

a:hover{
    text-decoration-color: var(--gold);
}

a:focus{
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* NAVIGATION STYLES */
nav{
    text-align: center;
}

nav a{
	text-decoration: none;
	font-size: 1.35rem;
	font-weight: 600;
	background-color: var(--blue);
    color: var(--off-wht);
    margin: 1rem auto;
    max-width: calc(250px - 2rem);
}

nav a:hover{
    background-color: var(--sky);
    color: var(--dk-gray);
}

nav a:focus{
    outline: 4px solid var(--red);
    outline-offset: 2px;
}

/* IMAGE STYLES */
img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* TEXT STYLES */
p{
    max-width: 65ch;
    margin: 0 auto;
    padding: 0.5rem 0;
}

/* NOTIFICATIONS SECTION IN HEADER */
#notifications{
    width: 100%;
    max-width: 300px;
    margin: 1rem auto;
    display: flex;
    justify-content: space-between;
}

#notifications button{
    border: none;
    background-color: var(--off-wht);
    padding: 16px;
    height: 76px;
    width: 76px;
    margin: 0 6px;
    outline: 4px solid var(--off-wht);
    outline-offset: 2px;
    /* This is a CSS special effect that slows down the transition between states */
    transition: all 300ms;
}

#notifications svg{
    stroke: var(--blue);
    height: 44px;
    width: 44px;
}

#notifications span{
    display: block;
    font-size: 1.1rem;
    /*  This span is a red dot that indicates that the user has a notification (an unread message) we need to position it so that it displays 45 pixels above and 30 pixels to the left of its normal position on the page */
    top: -45px;
    left: 30px;
    font-weight: 600;
    background-color: var(--red);
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
}

#notifications span.none{
    display: none;
}

#notifications button:hover{
    background-color: var(--blue);
    border-radius: 50%;
}

#notifications button:hover svg{
    stroke: var(--off-wht);
}

#notifications button:focus{
    outline-color: var(--red);
}

/* CONTAINER STYLES */
main > section{
    padding: 2rem 0;
}

/* FRIENDS SECTION STYLES */
#friends section{
    max-width: 300px;
    margin: 2rem auto;
}

#friends h3{
    padding: 8px 0;
    background-color: var(--sky);
    margin: 1rem auto;
}

#friends button.star{
    background-color: var(--off-wht);
    border: none;
    height: 40px;
    width: 40px;
    /*  These stars show whether a friend is on the user's list of favorites. We want to position it so that it displays 25 pixels above and 175 pixels to the left of its normal position on the page */
    position: relative;
    top: -25px;
    left: 175px;
    border: 1px solid var(--lt-gray);
}

#friends button.star svg{
    stroke: var(--gold);
    fill: var(--off-wht);
}

#friends button.star:hover svg{
    fill: var(--gold);
    stroke: var(--gold);
}

#friends button.fav.star svg{
    fill: var(--gold);
    stroke: var(--gold);
}

#friends button.fav.star:hover svg{
    stroke: var(--gold);
    fill: var(--off-wht);
}

#friends button.star:focus{
    outline: 4px solid var(--red);
    outline-offset: 0;
}

#friends img{
    width: 128px;
    height: 128px;
}

#friends svg{
    stroke: var(--red);
}

#friends p{
    padding: 1rem 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
}

#friends div{
    display: flex;
    justify-content: space-around;
}

#friends button{
    border: 2px solid var(--blue);
    background-color: var(--blue);
    padding: 8px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* This is a CSS special effect that slows down the transition between states */
    transition: all 300ms;
}

#friends button svg{
    stroke: var(--off-wht);
    width: 38px;
    height: 38px;
}

#friends button:hover{
    background-color: var(--off-wht);
}

#friends button:hover svg{
    stroke: var(--blue);
}

#friends button:focus{
    outline: 4px solid var(--red);
    outline-offset: 2px;
}


/* PHOTOS SECTION STYLES */
#photos{
    border-top: 4px solid var(--lt-gray);
}

#photos img{
    max-width: 640px;
    margin: 1rem auto;
}

/* BACK TO TOP LINK STYLES */
#btt{
    width: 44px;
    height: 44px;
    /*  A link back to the top of a longer page is commonly included near the lower right-hand corner of the page and it will stay in that location as the screen width changes. Use the calc function to move this element down by 100% of the viewport height minus 85 pixels, and to the right by 100% of the viewport width minus 100 pixels */
    position: fixed;
    top: calc(100vh - 85px);
    left: calc(100vw - 100px);
    background-color: var(--off-wht);
    border-radius: 1rem;
}

#btt svg{
    stroke: var(--sky);
    width: 44px;
    height: 44px;
}

#btt:hover{
    background-color: var(--sky);
}

#btt:hover svg{
    stroke: var(--off-wht);
}

#btt:focus{
    outline: 4px solid var(--red);
}

@media screen and (min-width: 525px){
    nav ul{
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin: 1.5rem 0;
    }

    nav a{
        margin: 0;
    }
}

@media screen and (min-width: 675px){
    header{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1rem 5rem;
    }

    h1{
        margin: 0;
    }

    nav ul{
        margin: 0;
    }

    #notifications{
        margin: 0;
    }

    #friends{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 24px;
    }

    #friends h2{
        flex-basis: 100%;
    }

    #friends section{
        min-width: 275px;
        margin: 0;
        padding-bottom: 1rem;
    }

    #friends h3{
        margin-top: 0;
    }

    #photos{
        display: flex;
        flex-wrap: wrap;
    }

    #photos h2{
        flex-basis: 100%;
    }

    #photos img{
        width: 45%
    }
}

@media screen and (min-width: 950px){
    header{
        position: sticky;
        top: 0;
        z-index: 2;
        flex-wrap: nowrap;
        gap: 1rem;
        justify-content: space-between;
        border-bottom: 4px solid var(--lt-gray);
    }

    footer{
        border-top: 4px solid var(--lt-gray);
    }
}