/* 
Name: Kelly Ferrigan
MEID: kel2072380
Date: 7/29/2023 - 1/7/2025
*/

@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* reset browser */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* variables */
:root {
    /* fonts */
    --heading-font: 'Lora', Garamond, 'Times New Roman', serif;
    --body-font: 'Anybody', 'Open Sans', Helvetica, Arial, sans-serif;    

    /* colors */
    --main-dark-color: #10002b;
    --main-med-dark-color: #3c096c;
    --main-med-color: #7b2cbf;
    --main-med-light-color: #c77dff;
    --main-light-color: #F0D6FF;
    --accent-dark-color: #081c15;
    --accent-med-dark-color: #2D6A4F;
    --accent-med-color: #52B788;
    --accent-med-light-color: #B7E4C7;
    --accent-light-color: #D8F3DC;
}
/* body styles */
body {
    /* sets font */
    font-family: var(--body-font);
}

/* Skip Navigation styles - start */
#skip-nav {
    /* sets skip nav button to top left */
    position: absolute;
    top: 0;
    left: .5rem;
    /* adds whitespace within the button */
    padding: .5rem 1rem;
    /* colors the button and text */
    background-color: var(--accent-light-color);
    color: var(--accent-dark-color);
    /* bolds the font for readability */
    font-weight: bold;
    /* removes the underline */
    text-decoration: none;
    /* rounds bottom corners only */
    border-radius: 0 0 .5rem .5rem;
    /* hides skip nav when not in focus */
    transform-origin: top;
    transform: rotateX(90deg);
    transition-duration: 200ms;
    transition-property: all;
    z-index: 4;
}
#skip-nav:focus {
    /* shows skip nav when in focus */
    background-image: linear-gradient(to bottom, var(--accent-light-color), var(--accent-med-light-color));
    transform: rotateX(0);
    outline: red;
}
/* Skip navigation styles - end */
.wrapper {
    /* sets font color */
    color: var(--main-dark-color);
    /* sets background color */
    background-image: linear-gradient(to bottom right, var(--accent-med-color), var(--main-med-color));
    background-repeat: no-repeat;
    /* ensures background color fills the viewport no matter the screen size */
    /* height: 100vh; */
    /* min-width: 650px; */
    max-width: 100%;
    /* sets up grid with 2 columns and 3 rows */
    display: grid;
    grid-template-columns: 16rem auto;
    /* accessibility/readability */
    line-height: 1.5;
}
/* heading styles */
h1, h2, h3, h4, h5, h6 {
    /* sets font */
    font-family: var(--heading-font);
}
/* header styles */
special-header {
    /* places header in grid */
    grid-row: 1;
    grid-column: 1 / 3;
    /* sets as flex container in row direction */
    display: flex;
    flex-direction: row;
    /* centers content horizontally and vertically */
    justify-content: center;
    align-items: center;
    /* sets colors */
    background-color: var(--main-dark-color);
    color: var(--accent-light-color);
    /* sets shadow */
    box-shadow: 0 3px 5px var(--main-med-light-color);
    width: 100%;
    /* adds whitespace above and below */
    height: 5rem;
    /* puts on top of all */
    z-index: 3;
}
/* logo styles */
.logo {
    width: 5rem;
    position: absolute;
    top: .3rem;
    left: .5rem;
}
/* h1 styles */
h1 {    
    margin-left: 3rem;
    margin-right: .5rem;
    /* spacing out letters */
    letter-spacing: .05em;
}

/* left-nav styles */
#myNav {
    /* places in grid */
    grid-row: 1 / 4;
    grid-column: 1;
    /* sets as flex container in column direction */
    display: flex;
    flex-direction: column;
    /* centers content vertically */
    justify-content: center;
    height: 100vh;
    /* sets background color */
    background-image: linear-gradient(to bottom right, var(--accent-dark-color), var(--accent-med-dark-color));
    /* sets right shadow */
    box-shadow: 5px 0 10px var(--accent-dark-color);
} */
/* navigation ul */
.nav-list {
    /* increases font size */
    font-size: 1.2em;
}
/* navigation list items */
.nav-list-item {
    /* removes bullets */
    list-style: none;
    /* whitespace above and below each list item */
    margin-top: .5em;
    margin-bottom: .5em;
    /* adds top and bottom border */
    border-top: solid 1px var(--accent-light-color);
    border-bottom: solid 1px var(--accent-light-color);
    /* centers text vertically */
    text-align: center;
    /* spacing out letters */
    letter-spacing: .05em;
}
/* navigation links */
.nav-link {
    /* removes underlines */
    text-decoration: none;
    /* centers nav links and extends them the full width of the container */
    display: block;
    /* adds whitespace above and below the nav list items and links */
    padding-top: .6em;
    padding-bottom: .5em;
    /* sets text color */
    color: var(--main-light-color);
}
/* active page nav styles */
/* active list item */
.active-list {
    /* sets background color */
    background-color: var(--main-med-light-color);
    /* adds top and bottom border */
    border: none;
    /* makes font bold for readability */
    font-weight: bold;
}
/* active link */
.active-link {
    /* removes top and bottom border */
    border: none;
    /* sets font color */
    color: var(--accent-dark-color);
}
/* style for return to portfolio link */
.left-nav .portfolio-return {
    margin-bottom: 1rem;
}
.left-nav .portfolio-return a {
    color: var(--main-light-color);
    text-decoration: none;
    padding: 1rem 6px 1rem 10px;
    letter-spacing: .06em;
    font-size: .9em;
}
/* end of active page nav styles */
/* hovering on nav link */
.nav-link:hover, .nav-link:focus, .left-nav .portfolio-return a:hover, .left-nav .portfolio-return a:focus {
    /* sets colors */
    background-image: linear-gradient(to bottom left, var(--accent-med-color), var(--main-med-light-color));
    color: var(--accent-dark-color);
    /* bolds text for readability */
    font-weight: bold;
}
/* nav link focus style */
.nav-link:focus, .left-nav .portfolio-return a:focus {
    /* adjusts offset to make more noticeable */
    outline-offset: .2em;
}

/* main styles */
main {
    /* places main in the grid */
    grid-column: 2;
    grid-row: 2;
    /* makes main a flex container in the row direction */
    display: flex;
    /* forces the card to fill the full height */
    flex-flow: row wrap;
    /* adds whitespace around content */
    padding-bottom: 2rem;
}
/* card styles for page main content */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 1.5em .75em 1em .75em; */
    padding: 2rem;
    margin: auto;
    /* sets background and border */
    background-color: var(--main-light-color);
    border: solid 3px var(--main-dark-color);
    border-radius: 10px;
    box-shadow: 3px 3px 5px var(--main-med-dark-color);
    max-width: 75ch;
    /* "text-wrap: balance" makes the lines of text as even as possible - this is new functionality not supported by every browser but it doesn't break anything if the browser doesn't honor it - source: Kevin Powell on https://www.youtube.com/watch?v=snKm-VzJCOo */
    /* NOTE: The CSS validator will fail with it active but passes with it commented out */
    text-wrap: balance;
}
/* paragraph styles */
p {
    /* adds whitespace before paragraphs */
    margin-top: 1em;
}
/* footer styles */
special-footer {
    margin-top: auto; /* moves footer to bottom of page when content short */
    /* places in grid */
    grid-row: 3;
    grid-column: 1 / 3;
    /* sets as flex container in row direction */
    display: flex;
    flex-basis: auto;
    flex-flow: row wrap;
    /* centers and evenly spaces content along the row */
    justify-content: space-evenly;
    /* sets colors */
    background-color: var(--main-dark-color);
    /* sets shadow */
    box-shadow: 0 -3px 5px var(--main-med-light-color);
    /* puts on top of all */
    z-index: 3;
    /* spacing out letters */
    letter-spacing: .1em;
    height: fit-content;
}
footer p {
    color: var(--accent-light-color);
    font-size: .85rem;
    font-style: italic;
    text-align: center;
}
footer ul {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding-bottom: .5rem;
}
footer a {    
    text-decoration: none;
    color: var(--accent-light-color);
    font-size: .85rem;
    font-style: italic;
    text-align: center;
    padding: 3px 10px;
}
footer a:hover, footer a:focus {
    text-decoration: none;
    background-color: var(--main-light-color);
    color: var(--main-dark-color);
}
/* GitHub footer link */
.foot-link {
    /* sets font color */
    color: var(--accent-light-color);
    /* adds whitespace around */
    padding: .5em .25em;
}
/* on GitHub link hover and focus */
.foot-link:hover, .foot-link:focus {
    /* removes underline */
    text-decoration: none;
    /* sets colors */
    background-color: var(--accent-med-light-color);
    color: var(--main-med-dark-color);
    /* rounds background box */
    border-radius: 20px;
    /* adds bold for readability */
    font-weight: bold;
}
/* on nav and footer link focus */
.nav-link:focus, .foot-link:focus, .left-nav .portfolio-return a:focus {
    /* changes outline color and to a dashed line */
    outline: dashed var(--main-light-color);
}
/* centers text */
.text-center {
    text-align: center;
}
/* bolds text */
.bold-text {
    font-weight: bold;
}
/* italicizes text */
.italic-text {
    font-style: italic;
}
/* home page styles */
/* slideshow styles */
#slideshow {
    /* sets frame around slideshow images */
    margin: 2em auto 1em auto; /* sets top/bottom margin to 60px and centers slideshow horizontally */
    /* positions the slideshow on the card */
    position: relative;
    height: 280px;
    width: 260px;
    /* sets border around images */
    padding: 10px;
    box-shadow: 0 0 20px var(--main-med-dark-color); /* sets shadow behind the slideshow frame */
    background-color: lightgrey;
}
#slideshow > div {
    /* positions the images in the center of the slideshow frame */
    position: absolute;
    top: 10px;
    left: 10px;
}
/* caption on image frame */
figcaption {
    /* moves the name onto the photo */
    margin-top: -.25em;
    /* italicizes the font */
    font-style: italic;
}
/* end slideshow styles */
/* end of home page styles */

/* bigfoot page styles */
/* button style */
button {
    width: 9em;
    /* whitespace between the border and text inside the button */
    padding: .5em;
    /* adds space between the button and the paragraph above it */
    margin-top: 1em;
    /* rounds button's corners */
    border-radius: 10px;
    /* removes border */
    border: none;
    /* button colors */
    background-color: var(--accent-med-dark-color);
    color: var(--accent-light-color);
    /* shadow */
    box-shadow: 2px 2px 6px var(--accent-dark-color);
    /* increase font size */
    font-size: 1.1em;
}
/* button hover states */
button:hover, button:focus {
    /* button colors */
    background-color: var(--accent-light-color);
    color: var(--accent-med-dark-color);    
}
/* button focus state */
button:focus {
    /* sets the outline larger and dashed */
    outline: dashed 4px var(--main-med-dark-color);
    /* moves the outline inside the button */
    outline-offset: -.25em;
}
/* end of bigfoot page styles */

/* nightcrawler page, mothman page, and loch ness monster page HTML output styles */
#mothman_result {
    /* colors */
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
    /* whitespace around text within background */
    padding: 10px;
}

/* nightcrawler page styles */
/* container for label, input field, and button styles */
.test-input {
    /* creates flex container with column direction */
    display: flex;
    flex-direction: column;
    /* centers content horizontally */
    align-items: center;
    text-align: center;
}
/* label for text input field styles */
.test-input label {
    /* adds whitespace above */
    margin-top: 1em;
}
/* input field styles */
#isValidInput {
    /* adds whitespace within the text field */
    padding: .5em;
    /* shrinks field width to more logical size */
    /* width: 50%; */
    text-align: center;
    /* increases font size in input field */
    font-size: 18px;
}
/* focused input field styles */
#isValidInput:focus {
    /* sets the outline larger and dashed */
    outline: dashed 3px var(--main-med-dark-color);
}
/* nightcrawler page styles end */

/* loch ness monster page style */
/* loch ness monster page HTML output */
#imgHolder {
    /* adds space between circle/image and paragraph above it */
    margin-top: 1.5em;    
    /* resizes circle/image */
    height: 240px;
    width: 240px;
    /* makes shape a circle */
    border-radius: 50%;
    /* adds shadow */
    box-shadow: 0 0 20px var(--main-med-dark-color);
}
#imgHolder:focus {
    /* sets the outline larger and dashed */
    outline: dashed 5px var(--accent-dark-color);
    outline-offset: 1px;
}
/* loch ness monster page styles end */

/* projects page */
/* contains paragraphs on the card */
.p-wrapper {
    /* adds whitespace on the left and right of the paragraphs */
    margin: 0 .75em 0 .75em;
    /* "text-wrap: wrap" turns off text balance because it looks better off for left-aligned text - this is new functionality not supported by every browser but it doesn't break anything if the browser doesn't honor it - source: Kevin Powell on https://www.youtube.com/watch?v=snKm-VzJCOo */
    /* NOTE: The CSS validator will fail with it active but passes with it commented out */
    text-wrap: wrap;
}
/* page name styles */
.project-page {
    /* sets font color */
    color: var(--main-med-color);
}
/* project link styles */
.project-link {
    /* sets font color */
    color: var(--accent-med-dark-color);
}
/* project links on hover and focus */
.project-link:hover, .project-link:focus {
    /* sets font color */
    color: var(--main-med-dark-color);
}
.project-link:focus {
    /* sets the outline larger and dashed */
    outline: dashed 4px var(--main-med-dark-color);
    /* adjusts whitespace for readability */
    padding-right: .2em;
    padding-left: .2em;
}
/* end of projects page */

/* @media queries */
@media (max-width: 700px) {
    .wrapper {
        display: block;
    }
    header {
        display: block;
        text-align: center;
        padding-bottom: 125px;
    }
    .logo {
        position: relative;
        left: -10px;
    }
    h1 {
        font-size: 24px;
        margin-left: 0;
    }
    #myNav {
        display: block;
        height: max-content;
        padding-top: .1px;
    }
    .card {
        max-width: 350px;
        padding: 20px;
    }
    special-footer {
        padding-bottom: 15px;
    }
}

@media (max-width: 900px) {
    .card {
        margin: auto;
    }
}