@charset "utf-8";

@font-face {
    font-family: Champagne;
    src: url(cac_champagne.ttf)format('ttf'), url(cac_champagne.woff) format('woff');
}

/*List & Styling*/

ul#lang {
    list-style-type: square;
}

ul#work {
    list-style-type: circle;
    list-style-position: outside;

}

h2.heading {
    font-family: Champagne;
    font-size: 2.5em;
    text-decoration: underline;
}




/*Navigation*/
nav a {
    color: rgb(191, 184, 173);
    padding: 0px 25px;
}

nav ul {
    list-style-type: none;
    display: inline-flex;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.5em;
    align-content: space-around
}

nav a:hover {
    background-color: #a83432;

}


nav a:active {
    background-color: greenyellow;
    color: #3432a8;
}

a#navicon {
    display: none;
}


header {
    text-align: center;
    color: rgb(255, 255, 255);
}

footer {

    text-align: center;
}

/*Images */
figure>img {
    width: 75%;
}

#photography img {
    box-shadow: black 1px 1px 20px;
    margin: 15px;
}

#webDev img {
    width: 45%;

}

body {
    background-color: rgb(149, 94, 74);
}


#dad {
    filter: sepia(100%);
}



#pic4 {
    opacity: 75%;
}

#pic5 {
    filter: grayscale(100%);
}

#aboutMe {
    background-image: url(KylesWedding.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 10%;

}

/*Media Queries*/

/*Mobile Styles*/
@media only screen and (max-width: 480px) {
    body {
        max-width: 480px;
    }

    a#navicon {
        display: block;
    }

    nav.menu ul {
        display: none
    }

    a#navicon:hover+ul,
    nav.menu ul:hover {
        display: block;
    }

    body {
        display: flex;
        flex-flow: column wrap;
    }

    header {
        width: 100%;
        text-align: center;
    }

    #passTime img {
        width: 65%;
    }
}

/*Tablet Styles*/
@media only screen and (min-width: 481px) and (max-width:768px) {

    body {
        margin: 75px;
    }

    #passTime img {
        width: 65%;
    }
}

/*Desktop Styles*/
@media only screen and (min-width: 769px) {
    body {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        padding: 25px;
    }

    img {
        max-width: 50%;

    }

    #lights,
    #photography>figure>figcaption:nth-child(4) {
        transform: translate(150px);
    }

    #sun,
    #photography>figure>figcaption:nth-child(6) {
        transform: translate(250px);
    }
}

/*Print Styles*/

@media only print {
    @page {
        size: 8.5in 11in;
        margin: 0.5in;
    }

    h1 {
        font-size: 28pt;
        line-height: 36pt;
        margin: 0.3in 0in 0.2in;
    }

    p {
        font-size: 12pt;
        margin: 0.1in 0in 0.1in 0.3in;
    }

    nav,
    #Programming,
    #game {
        display: none;
    }

    img,
    #passTime {
        width: 3in;
    }

    a::after {
        content: "(" attr(href) ")";
        font-weight: bold;
        word-wrap: break-word;
    }
}