/*This stylesheet contains the style rules for GrecoClips.com*/

/*Font Styles*/
@font-face {
    font-family: grecoClips;
    src: url("Comfortaa-VariableFont_wght.ttf") format("truetype");
  }
/*HTML, Body, Header*/
html {
    background-image: url("background_clippers.jpg");
    background-repeat: repeat;
}

body {
    font-family: grecoClips, sans-serif;
    background-color: #d9d9d9;
    color: #000000;
    box-shadow: -3px 0 5px black, 3px 0 5px black;
}

header {
    width: 100%;
}


/*Navigation*/
nav#pageNav li {
    flex: 1 0 25%;
    display: block;
    text-align: center;
    background-image: linear-gradient(to right, #010007, #2400f0, hsl(233, 100%, 5%));
}

nav#pageNav li:hover, nav#pageNav li:active {
    flex: 1 0 25%;
    display: block;
    text-align: center;
    background-image: linear-gradient(to right, #010007, #d60000, hsl(233, 100%, 5%));
}

nav#pageNav a {
    color: #ffffff;
    text-decoration: none;
}

nav#pageNav a:hover, nav#pageNav a:active{
    color: #ffffff;
    text-decoration: none;
}

/*Main*/

h1 {
    font-size: 1.7em;
    font-weight: bold;
}

h2 {
    font-size: 1.5em;
    font-weight: bold;
}

h3 {
    font-size: 1.3em;
    font-weight: bold;
}

#title {
    text-decoration: underline;
}

#intro {
    text-decoration: underline;
}

section#meetHunky a:link, section#meetHunky a:visited {
    color: blue;
    text-decoration: none;
}

section#meetHunky a:hover, section#meetHunky a:active {
    color: red;
    text-decoration: none;
}

section#meetHunky img {
    border: 5px outset rgb(49, 49, 49);
}

section#services {
    background-color: rgb(49, 49, 49);
    color: white;
}

div.service section.serviceGallery {
    background-image: linear-gradient(to right, #010007, #2400f0, hsl(233, 100%, 5%));
    transition: background-image 5s ease-in-out;
}

div.service section.serviceGallery:hover {
    background-image: linear-gradient(to right, #010007, #d60000, hsl(233, 100%, 5%));

}

div#mobile-button {
    background-color: transparent;
    width: 100%;
}

@media screen and (min-width: 600px) {
    h1#serviceGallery {
        font-size: 2.7em;
    }
    h3#fades {
        font-size: 2em;
    }
    h3#tapers {
        font-size: 2em;
    }
    h3#styles {
        font-size: 2em;
    }

    div#contact {
        background-image: linear-gradient(to right, #010007, #2400f0, hsl(233, 100%, 5%));
        color: white;
    }

    .thankYou a {
        display: none;
    }
}


/*Aside*/

aside#photoGallery {
    background-color: rgb(49, 49, 49);
}

aside#photoGallery a:link, aside#photoGallery a:visited {
    color: #ffffff;
    text-decoration: none;
}

aside#photoGallery a:hover, aside#photoGallery a:active {
    color: #ff0000;
    text-decoration: none;
}

aside#photoGallery img {
    border: 1px solid blue;
}

aside#photoGallery img:hover {
    border: 1px solid red;
}

aside#actionPics {
    background-color: rgb(49, 49, 49);

}

/*Footer*/

body > main > footer {
    background-color: #d9d9d9;
    color: #000000;
    border: 5px solid rgb(27, 27, 27);
    box-shadow: -1px -1px 4px 1px rgba(0,0,0,0.75);    

}

@media screen and (max-width: 599px) {
    body > main > footer {
        box-shadow: none;
    }
    

    .thankYou a {
        padding-bottom: 5%;
    }

    .thankYou a:link, .thankYou a:visited {
        color: white;
    }

    .thankYou a:hover, .thankYou a:active {
        color: red;
    }
}

footer a:link, footer a:visited {
    color: blue;
    text-decoration: none;
}

footer a:hover, footer a:active {
    color: red;
    text-decoration: none;
}

/*Scroll animations*/
.scroll-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.scroll-in.show {
    opacity: 1;
}