/* 
Author: Sara Brennan
Course: CGS1821.0M1
Date: 8/4/2023
Assignment: Final Project Website
*/

/* the styles for the elements */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 90%;
    max-width: 1024px;
    margin: 1em auto;
    border: 1px solid black;
    box-shadow: 0px 0px 8px 5px black;
    display: grid;
    grid-template-rows: 100px auto 290px auto auto auto;
    grid-template-columns: repeat(12, 1fr);
}

a {
    font-weight: bold;
}

/* the styles for the header */
header {
    grid-column: 1 / span 12;
    grid-row: 1 / 2;
    justify-self: center;
    margin: 1em 0;
    padding: 0;
}

@font-face {
    font-family: 'Amatic SC';
    font-weight: 700;
    font-style: normal;
}

header h1#webfont {
    font-size: 400%;
    font-family: Amatic SC;
    align-content: center;
    margin: 0;
    padding: 0;
}

body img {
    width: 100%;
    max-width: 200px;
    min-width: 50px;
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
}

/* the styles for the navigation menu */
#nav_menu {
    grid-column: 4 / span 6;
    grid-row: 2 / 3;
    padding: 0;
    justify-self: center;
}

#nav_menu ul {
	list-style-type: none;
    margin: 0;
	padding: 0;
    display: grid;
    grid-template: auto / repeat(5, 1fr);
}

#nav_menu ul li a {
    border-top: 1px solid black;
    display: block;
	text-align: center;
	padding: .5em;
	background-color: white;
	color: black;
    text-decoration: none;
}

#nav_menu a.current {
	background-color: #dee9dffb;
    color: black;
}

#nav_menu ul li a:hover, #nav_menu ul li a:focus {
	background-color: #dee9dffb;
    font-style: italic;
    color: black;
}

/* the styles for the section */
#intro {
    padding-left: 1em;
    padding-right: 2.5em;
    margin: 1em .5em;
    grid-column: 1 / span 7;
    grid-row: 3 / span 2;
}

#intro a:link, #intro a:visited { 
    color: black;
}

#intro a:hover, #intro a:focus {
    color: darkgray;
}

#intro h1 {
    font-size: 150%;
    padding: 0;
    margin: 0;
    font-style: italic;
}

#intro h2 {
    font-size: 120%;
    padding: 1em 0 0 0;
    margin: 0;
    font-style: italic;
}

#intro h3 {
    color: #75a079fb;
    font-size: 105%;
    padding: .5em 0 0 0;
    margin: 0;
}

#intro p {
    font-size: 100%;
    padding: .5em 0 0 0;
    margin: 0;
}

/* the styles for the sidebar with events*/
#events {
    padding: 0;
    margin: 1em 1.5em 1em 1em;
    background-color: #dee9dffb;
    border: 1px dashed black;
    border-radius: 15px;
    grid-column: 8 / span 5;
    grid-row: 3 / 4;
}

#events a:link, #events a:visited { 
    color: black
}

#events a:hover, #events a:focus {
    color: darkgray;
}

#events h2 {
    color: black;
    font-size: 130%;
    padding: 1em 0 1.5em 0;
    margin: 0;
    font-style: italic;
    text-align: center;
}

#events h3 {
    font-size: 100%;
    padding: .25em 0 .25em 0;
}

#events ul, #events li {
    padding: 0;
    margin: 0;
}

#events li {
    padding-right: 1.75em;
    padding-bottom: 1em;
}

#events ul {
    line-height: 1.5;
    font-size: 85%;
    padding-left: 3em;
}

#events ul.circle {
    list-style-type: circle;
}

/* the styles for the article image */
#photo {
    padding: 0 0 .5em 0;
    margin: 1em 1.5em 1em 1em;
    grid-column: 8 / span 5;
    grid-row: 4 / 5;
    justify-self: center;
}

#photo img {
    width: 100%;
    max-width: 386px;
    padding: 0;
    border-radius: 15px;
    border: 1px dashed black;
    justify-self: center;
}

/* the styles for the footer */
footer {
    background-color: #dee9dffb;
    grid-column: 1 / span 12;
    grid-row: 5 / 6;
}

footer p {
    color: black;
    text-align: center;
    font-size: 70%;
    font-weight: bold;
    padding: 1em 0 0 0;
    margin: 0;
}

footer h4 {
    color: black;
    text-align: center;
    font-size: 60%;
    padding: .25em 0 1em 0;
    margin: 0;
}

footer a:link, section a:visited { 
    color: black;
}

footer a:hover, section a:focus {
    color: darkgray;
}

/* the styles for the media queries */
#mobile_menu {
	display: none;
}

/* max-width 930px */
@media only screen and (max-width: 930px) {
    body { 
        width: 90%;
        font-size: 85%;
        border: 1px solid black;
        grid-template-rows: 85px auto auto auto auto auto;
    }
    body img {
        width: 100%;
        max-width: 175px;
        grid-column: 1 / span 3;
    }

    /* the styles for the header */
    header h1#webfont {
        font-size: 375%;
        padding: 0;
    }

    /* the styles for the navigation */
    #nav_menu {
        grid-column: 5 / span 4;
        padding: 0;
        justify-self: center;
    }

    /* the styles for the sidebar with events*/
    #events h2 {
        padding: 1em 0 .85em 0;
    }

     /* the styles for the article image */
    #photo img {
        width: 100%;
        max-width: 355px;
    }
}

/* max width 775px */
@media only screen and (max-width: 775px) {
    body { 
        font-size: 80%;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
        grid-template-rows: 70px auto auto auto auto auto auto;
    }

/* the styles for the header */
    header h1#webfont {
        font-size: 300%;
        padding: 0;
    }
    body img {
        width: 75%;
        max-width: 125px;
        grid-column: 1 / span 4;
        grid-row: 1 / span 2;
    }

/* the styles for the navigation */
    #nav_menu {
        display: none;
    }
    #mobile_menu {
        display: flex;
        grid-row: 2 / 3;
        grid-column: 1 / span 12;
        justify-self: center;
        align-self: center;
        padding: 0;
    }

/* the styles for the section */
    #intro {
        padding: .25em;
        margin: .25em 2em;
        grid-column: 1 / span 12;
        grid-row: 5 / 6;
    }
    #intro h1 {
        text-align: center;
    }
    #intro h2 {
        text-align: center;
        padding: 1.5em 0 .25em 0;
    }

/* the styles for the sidebar with events*/
    #events {
        padding: .5em;
        margin: 1em 2em;
        grid-column: 1 / span 12;
        grid-row: 6 / 7;
    }
    #events h2 {
        font-size: 120%;
        padding: .75em 1em .5em 0;
    }
    #events ul {
        font-size: 100%;
        padding-left: 2em;
    }
    #events li {
        padding-left: .25em;
    }

/* the styles for the image */
    #photo {
        padding: .5em;
        grid-column: 1 / span 12;
        grid-row: 3 / 4;
        margin-top: 0;
    }
    #photo img {
        width: 100%;
        max-width: 355px;
        margin: 0;
        padding: 0;
        border-radius: 15px;
    }

/* the styles for the footer */
    footer {
        grid-row: 7 / 8;
    }

/* the styles for the slicknav menu */
    .slicknav_nav .slicknav_txtnode {
        margin-left: 5px !important;
    }
    .slicknav_menu {
        background: none !important;
        padding: 3px !important;
        text-align: center !important;
    }
    .slicknav_menu .slicknav_menutxt {
        color: black !important;
        text-shadow: none !important;
    }
    .slicknav_menu .slicknav_icon-bar {
        background-color: black !important;
    }
    .slicknav_btn {
        margin: 2px !important;
        -webkit-border-radius: 3px !important;
        -moz-border-radius: 3px !important;
        border-radius: 3px !important;
        background-color: #dee9dffb !important;
        text-shadow: none !important;
    }
    .slicknav_nav ul {
        margin: 0 !important;
    }
    .slicknav_nav .slicknav_item {
        padding: 0 !important;
        margin: 0 !important;
    }
    .slicknav_nav a {
        padding: .25em !important;
        margin: .25em !important;
        text-decoration: none;
        color: black !important;
    }
    .slicknav_nav .slicknav_item a {
        padding: 0;
        margin: 0;
    }
    .slicknav_nav .slicknav_item:hover {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    .slicknav_nav a:hover {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #dee9dffb !important;
        color: black !important;
    }
}

/* min width 320px and max width 480px */
@media only screen and (min-width: 320px) and (max-width: 480px) {
    body { 
        font-size: 85%;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
        display: grid;
        grid-template-rows: 60px auto auto auto auto auto auto;
        grid-template-columns: repeat(12, 1fr);
    }

    /* the styles for the header */
    header {
        grid-column: 3  / span 8;
        grid-row: 1 / 2;
        justify-items: center;
        margin: 1em 0;
        padding: 0;
    }
    header h1#webfont {
        font-size: 250%;
        font-family: Amatic SC;
        align-content: end;
        margin: 0;
        padding: 0;
    }
    body img {
        width: 75%;
        max-width: 100px;
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
    }

/* the styles for the image */
    #photo img {
        width: 100%;
        max-width: 355px;
        margin: 0;
        padding: 0;
        border-radius: 15px;
    }

    /* the styles for the navigation */
    #mobile_menu {
        display: flex;
        grid-row: 2 / 3;
        grid-column: 1 / span 12;
        justify-items: center;
        align-items: center;
        padding: 0;
    }

    /* the styles for the section */
    #intro {
        padding: 0;
        margin: .25em 1em;
        grid-column: 1 / span 12;
        grid-row: 5 / 6;
	}
    #intro h1 {
        text-align: center;
    }
    #intro h2 {
        text-align: center;
    }

    /* the styles for the sidebar with events*/
    #events img {
        float: left;
        padding: 0;
        margin: 0;
    }
    #events ul {
        font-size: 80%;
        padding-left: 3em;
    }
    #events li {
        padding-left: .25em;
    }
	#events {
        padding: .5em;
        margin: 1em;
        background-color: #dee9dffb;
        border: 1px dashed black;
        grid-column: 1 / span 12;
        grid-row: 6 / 7;
	}

    /* the styles for the footer */
    footer {
        background-color: #dee9dffb;
        grid-column: 1 / span 12;
        grid-row: 7 / 8;
    }
}