/* Copyright Katherine Townsend */

/* Brown: #332e10, rgb(51,46,16), hsl(51.4,52.2,13.1)
	Blue: #1c4682, rgb(28,70,130), hsl(215.29, 64.6, 31)
    Yellow: #f5c501, rgba(245, 197, 1, 1), hsl(48.2,99.2,48.2)
*/

body {overflow: hidden;}

header {position: fixed; background: white;}

main {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
        padding-top: 150px;
    }

h2 {
    font-size: 3rem;
    padding: 0 0 1.5rem 1.5rem;
}

/* Main Grid spans width of accordion*/

.grid-container {
    margin: 0;
}   

.webprogramming, .webdesign, .multimedia {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
}
.accordion {
    /*background-color: #eee;*/
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 2rem;
    transition: 0.4s;
    text-shadow: none;
    opacity: .9;
    position: relative;
    height: 10rem;
    grid-row: 1;
}

button.one {
    color: white;
    background-color: #1c4682;
}

    button.one ~ div {
        background: radial-gradient(circle, rgba(28,70,130, .10) 70%,rgba(28,70,130, .15));
    }

button.two {
    color: #1c4682;
    background-color: #f5c501;
}

    button.two ~ div {
        background: linear-gradient(180deg, rgba(245,197,1, 0) 10%, rgba(245,197,1, 1));
    }


button.three {
    color: #f5c501;
    background-color: #332e10;
}

    button.three ~ div {
        background: #332e10;
    }


.active, .accordion:hover {
    opacity: 1;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    position: absolute;
    right: 5%;
    font-size: 3rem;
    top: 2rem;
}

.active:after {
    content: "\2212";
    font-size: 3rem;
}

.panel {
    grid-row: 2;
    /* subgrid for projects list - unspecified number of rows, first row is column heading */
    display: grid;
    grid-template-columns: 25% [projects] 50% 25%;
    /* space between each project */
    grid-row-gap: 4rem;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.projectLink {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    grid-column: projects;
}

/* space between last project in a panel an the next panel header (accordion) */
.projectLink:last-child {margin-bottom: 4rem;}

.link1 {
    grid-row: 2;
}

.link2 {
    grid-row: 3;
}

.link3 {
    grid-row: 4;
}

.link4 {
    grid-row: 5;
}

.link5 {
    grid-row: 6;
}

.link6 {
    grid-row: 7;
}



.project {
    display: grid;
    grid-template: 100% / 60% 40%;
}

.project h3 {
    font-size: 1.5rem;
    color: #1c4682;
}

.project h4 {
    font-weight: 300; 
    line-height: 3rem;
}

.projectdesc {
    padding: 4rem 2rem;
    line-height: 1.5rem;
    background: white;
}

.webprogramming .link1 .projectimg {
        background: url('../projects/kportfolio/img/KristinaShowreel 2Thumb.jpg') center;
        background-size: cover;
    }

.webprogramming .link2 .projectimg {
    background: url('../projects/aplus/images/why4.jpg') left;
    background-size: cover;
}

.webprogramming .link3 .projectimg {
    background: url('../projects/handy/img/img1.jpg') right;
    background-size: cover;
}

.webprogramming .link4 .projectimg {
    background: url('../projects/brilliant/img/laptop.jpg') center;
    background-size: cover;
}

.webprogramming .link5 .projectimg {
    background: url('../projects/shorebirds/img/shorebird.jpg') right;
    background-size: cover;
}

.webprogramming .link6 .projectimg {
    background: #b63333 url('../projects/pizza/img/favicon/apple-touch-icon.png');
    background-repeat: round;
}

.webdesign .link1 .projectimg {
    background: url('../projects/groundhog/groundhog.jpg') left;
    background-size: cover;
}

.webdesign .link2 .projectimg {
    background: url('../projects/accessibility/img/accessible.jpg') center;
    background-size: contain;
}

.webdesign .link3 .projectimg {
    background: url('../projects/globalmobile/img/icons2.png');
    background-repeat: round;
}

.webdesign .link4 {
    background-color: black;
}

    .webdesign .link4 .projectimg {
        background: white;
        margin: auto;
        width: 100%;
    }

    .webdesign .link4 .projectimg p {
        font-size: 4rem;
        color: black;
        font-family: Georgia,'Times New Roman',serif;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }



    .webdesign .link5 .projectimg {
        background: white;
        width: 100%;
        position: relative;
    }

        .webdesign .link5 .projectimg div:first-child {
            background: orange;
            width: 25%;
            height: 100%;
        }

        .webdesign .link5 .projectimg div:nth-child(2) {
            background: black;
            width: 25%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 25%;
        }

        .webdesign .link5 .projectimg div:nth-child(3) {
            background: darkred;
            width: 25%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
        }

        .webdesign .link5 .projectimg div:nth-child(4) {
            background: #4800ff;
            width: 25%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 75%;
        }

.multimedia .link1 .projectimg {
    background: white url('../projects/databases/golf/img/img1.jpg') center no-repeat;
}

.multimedia .link2 .projectimg {
    background: url('../projects/flyers/img/img7.jpg') center;
    background-size: cover;
}

.multimedia .link3 .projectimg {
    background: url('../projects/hike/HikeKeehnerThumb.jpg') left;
    background-size: cover;
}

.multimedia .link4 .projectimg {
    background: url('../projects/games/scratch/ocean.png');
    background-size: cover;
}

.multimedia .link5 .projectimg {
    background: white url('../projects/games/scratch/babybird.png') no-repeat center;
    background-size: contain;
    transform:scaleX(-1);
}

.modal {
    display: none; /* hide by default */
    position: fixed;
    z-index: 1; /* on top of everything */
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    overflow:auto;
    background-color: #1c4682; 
}

img.modal-content {
    display: block;
    max-width: 88%; 
    margin: 5% 5% 0 5%;
}

#groundhogCaption {
    margin: 0 auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #332e10;
    padding: .5rem 0;
    height: 5%;
    color: white;
}

.modal-content, #groundhogCaption {
    animation-name: zoom;
    animation-duration: .6s;
}

@keyframes zoom {
    from {transform: scale(0)}
    to {transform:scale(1)}
    }

/* close button on modal */
#closeGroundhog {
    position: absolute;
    top: 10%;
    right: 35px;
    font-size: 40px;
    color: #f1f1f1;
    font-weight: bold;
    transition: .3s;
}

#closeGroundhog:hover, #closeGroundhog:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

footer {
    position: relative;
    opacity: 1;
    color: white;
    background: #1c4682;
    line-height: 3rem;
    font-size: .5rem;
    align-items: center;
    width: 100%;
}


@media (max-width: 1024px) {

    body {
        overflow: unset;
    }


    .panel {
        /* subgrid for projects list - unspecified number of rows, first row is column heading */
        grid-template-columns: 5% [projects] 90% 5%;
        grid-row-gap: 2rem;
    }

    /* space between last project in a panel an the next panel header (accordion) */
    .projectLink:last-of-type {
        margin-bottom: 2rem;
    }

    
        .project {
        grid-template: 6fr 4fr / 100%;
    }

    .projectdesc {
        padding: 1rem 1rem;
        line-height: 1.35rem;
        background: white;
    }

.webdesign .link4  .project {
        grid-template: 4fr 6fr / 100%;
    }

    .modal {
        width: 100%;
        height: unset;
        top: 50%;
        left: 0;
    }

    img.modal-content {
        display: block;
        max-width: 88%;
        margin: 5% 5% 0 5%;
    }

    #groundhogCaption {
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: .5rem 0;
        height: 5%;
        color: white;
    }

    /* close button on modal */
    #closeGroundhog {
        top: 55%;
        right: 5%;
        font-size: 3rem;
    }

}