@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Handlee&display=swap');


/* General Styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Fonts */
h2,nav,footer{
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-style: normal;
}
p,h1,.image-label,form{
    font-family: "Handlee", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Header Styles*/
header {
    position: sticky;
    top: 0;
    background-color: rgb(49 113 80);
    z-index: 10;
    color: #ede8e1;
    justify-content: space-between;
    display: flex;
    text-shadow: 3px 3px 3px black;
    box-shadow: 0px 1px black;
    flex-direction: row;
    align-items: baseline;
    font-size: 120%;
}

header a {
    text-decoration: none;
    text-shadow: none;
    color: #ede8e1;
    height: 10vh;
}

/* Site Navigation Links */
nav {
    position: absolute;
    top: 99%; /* 99 instead of 100 to cover box shadow */
    left: 0%;
    width: 100%;
    background-color: rgb(49 113 80);
    color: inherit;
    display: none;
    box-shadow: inherit;
    overflow: hidden;
}

/* Menu Dropdown Transition Animation */
@keyframes menu-dropdown {
    from {
        max-height: 0px;
    }

    to {
        max-height: 1000px;
    }
}

.toggle-links-label {
    font-size: 150%;
    padding-right: 5px;
}

#toggle-links {
    display: none;
}

#toggle-links:checked~nav {
    display: block;
    animation-name: menu-dropdown;
    animation-duration: 2s;
}

#site-links {
    display: flex;
    flex-direction: row;
    list-style: none;
    text-align: right;
    font-size: 150%;
    width: 100%;
    padding-right: 10px;
    justify-content: space-around;
}

/* Highlight Link to Current Page */
.this-page-link {
    text-shadow: 2px 0px 20px white,
        -2px 0px 20px white,
        0px -2px 20px white,
        0px 2px 20px white;
    color:rgb(40, 98, 68);
}

/* Main Section Styles */
main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin: 0;
}

section a {
    text-decoration:underline;
    color: rgb(253 234 192);
}

img {
    width: 100%;
}

/* Home Page */
#intro1 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: rgb(49 113 80)
}

#intro h2 {
    margin: 10px 0px;
    padding: 10px 0px;
    text-align: center;
    width: 100%;
    background-color:rgb(49, 113, 80);
    color:#ede8e1;
}

#intro p {
    padding-bottom: 10px;
    color: rgb(49, 113, 80)
}

/* Hide mini-gallery on phones */
#mini-gallery,
#right-arrow,
#left-arrow {
    display: none;
}

#mini-gallery-container {
    display: none;
}

#right-arrow {
    font-size: 400%;
    margin-left: -100px;
    margin-right: 50px;
    opacity: 0.9;
    color: #ede8e1
}

#left-arrow {
    font-size: 400%;
    margin-right: -100px;
    margin-left: 50px;
    opacity: 0.9;
    color: #ede8e1;
}

section {
    margin: 5px;
    display: flex;
    flex-direction: column;
}

#shortcuts {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: 30%;
    justify-content: space-between;
    margin: 5px;
}

#shortcuts li {
    color: #ede8e1;
    background-color: rgba(49, 113, 80, 1);
    display: block;
    border: none;
    border-radius: 5px;
    flex-basis: 30%;
    justify-content: center;
    text-align: center;
}

#shortcuts a {
    color: #ede8e1;
}

.subsection h2 {
    margin: 5px 0px;
    background-color: #f1f1f1;
    text-align: center;
    color: rgb(49, 113, 80);
}

.subsection p {
    background-color: rgb(49 113 80);
    color: #ede8e1;
    padding: 5px;
    border: solid black 2px;
    margin-bottom: 5px;
}

/* Gallery */
#gallery img {
    border: none;
    margin: 0px;
}

.image-container {
    position: relative;
    text-align: center;
}

.image-label {
    position: absolute;
    z-index: 2;
    font-size: 300%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: hsl(35, 25%, 91%);
    opacity: 0.9;
    background-color: rgba(0,0,0,0.7);
    border-radius:50%;
    padding:10px 20px;
}

/* Contact Page */
#contact-form-section h2 {
    display: none;
}

#contact-form-section {
    display: flex;
    background: url("../images/treehouse.jpg") no-repeat center 80%;
    background-size: cover;
    flex-grow: 1;
    margin: 0;
    align-items: center;
    justify-content: center;
}

#form-container {
    background-color: rgba(49, 113, 80, 0.8);
    overflow: hidden;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    border: solid rgb(255, 255, 255) 2px;
    box-shadow: -5px 5px 5px black;
}

form {
    text-align: center;
    opacity: 1;
    color: #ede8e1;
}

form input,
textarea {
    margin: 5px;
    background-color: #ede8e1;
    border-radius: 5px;
    padding: 5px;
}

form button {
    padding: 5px;
    box-shadow: -3px 3px 3px black;
    color: rgba(49, 113, 80, 1)
}

/* Press Down Effect On Button */
form button:active {
    position: relative;
    left: -3px;
    top: 3px;
    box-shadow: none;
}

/* Footer */
footer {
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin: 10px 0px 0px;
    flex-direction: column;
    text-align: center;
    border-top: black solid 1px;
    min-height: 10vh;
    max-height: 15vh;
    background-color: rgb(49 113 80);
    color: #ede8e1;
}

footer a {
    color: #ede8e1;
}

footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 30%;
    justify-content: space-around;
    margin: 5px;
    list-style-type: none;
}

#top-shortcut {
    margin: -100px 10px 0px 0px;
    align-self: flex-end;
    color: #ede8e1;
    z-index: 3;
    font-size: 200%;
}

#top-shortcut a {
    text-decoration: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid black;
    background-color: rgb(49 113 80);
    color: #ede8e1;
    text-decoration: none;
    padding: 0px 7px;
}

#top-shortcut em {
    background-color: rgba(0,0,0,0.7);
    border-radius:30px;
    padding:0px 20px;
}


/* Styles for Tablet and Larger */
@media screen and (min-width:768px) {

    /* Header */
    #logo {
        width: 100%;
    }

    /* Display Navigation Links by Default on Larger Screens */
    nav {
        display: block;
        position: relative;
        box-shadow: none;
    }

    .toggle-links-label {
        display: none;
    }

    /* Scroll To Top Button Is Only Needed On Phones */
    #top-shortcut,
    #shortcuts {
        display: none;
    }

    /* Home Page */
    main {
        display: flex;
        flex-direction: column;
    }

    main section {
        flex-direction: column;
    }

    /* Intro Section Style on Larger Screens */

    #intro {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: rgb(231, 231, 231);
        color: rgba(49, 113, 80, 1)
    }

    #intro img {
        object-fit: cover;
    }

    #intro h2 {
        margin:0px;
        border-radius: 100%;
        width: 250px;
        background-color: white;
        color:rgb(49, 113, 80);
    }

    #intro1 {
        flex-shrink: 2;
        min-width: 350px;
        margin: 10px;
    }

    #intro1 img {
        border-radius: 5px;
    }

    #intro2 {
        flex-shrink: 1;
        flex-grow: 1;
        padding: 20px;
        display: flex;
        align-content: space-between;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Show Mini-gallery */

    #mini-gallery-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: rgb(49, 113, 80) solid 2px;
        border-radius: 5px;
        box-shadow: -5px 5px 5px black;
    }

    #mini-gallery {
        display: flex;
        flex-direction: row;
        height: 20vw;
        max-height: 365px;
        max-width: 75vw;
        overflow-y: hidden;
    }

    #mini-gallery img {
        height: 20vw;
        max-height: 365px;
    }

    #right-arrow,
    #left-arrow {
        display: inline;
    }

    /* Hide Mini-gallery scrollbar for Chrome, Safari and Opera */
    #mini-gallery::-webkit-scrollbar {
        display: none
    }

    /* Hide Mini-gallery scrollbar for IE, Edge and Firefox */
    #mini-gallery {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Subsection Styles for Larger Screens*/
    #subsections {
        display: flex;
        flex-direction: column;
    }

    #subsections img {
        display: none;
    }

    /* Show Images Behind the Text on Larger Screens */
    #floor {
        display: flex;
        flex-direction: row;
        background: url("../images/floor.jpg") no-repeat center center/cover;
    }

    #stairs {
        display: flex;
        flex-direction: row-reverse;
        background: url("../images/stairs.jpg") no-repeat center center/cover;
    }

    #walls {
        display: flex;
        flex-direction: row;
        background: url("../images/walls.jpg") no-repeat center center/cover;
        height: 100vh;
    }

    .subsection {
        background-color: rgb(231, 231, 231);
        min-height: 500px;
    }

    .subsection>div {
        align-self: center;
    }

    .subsection h2 {
        border-radius: 50%;
        background-color: rgba(49, 113, 80, 0.7);
        text-align: center;
        color: #ede8e1;
        padding: 5px;
        margin: 10px 150px 10px 150px;
        box-shadow: -5px 5px 5px black;

    }

    .subsection p {
        background-color: rgba(49, 113, 80, 0.8);
        color: #ede8e1;
        padding: 5px;
        margin: 10px;
        border: solid white 2px;
        border-radius: 5px;
        max-width: 500px;
        box-shadow: -5px 5px 5px black;

    }

    /* Change To Horizontal Scrolling Of Gallery On Tablets Or Larger */
    #gallery {
        height: 82vh;
        overflow-y: hidden;
        width: auto;
        display: flex;
        flex-direction: row;
    }

    #gallery img {
        height: 98%;
        width: auto;
        border: solid 10px rgba(49, 113, 80, 0.7);
        border-style: ridge;
        margin: 10px;
    }

    /* Contact Page */
    form {
        display: flex;
        flex-direction: row;
        padding: 10px
    }

    form input,
    textarea {
        margin: 20px;
    }

    button {
        margin-right: 20px;
    }

    #form-part-1 {
        text-align: right;
    }

    #form-part-2 {
        text-align: right;
    }

    .desktop-form {
        display: inline;
    }

    .mobile-form {
        display: none;
    }

    footer{
        margin:0px;
    }
}

/* Styles for very Large Screens */
@media screen and (min-width:1400px) {

    /* pad margins for very large screens */
    #home-page,
    #contact-page {
        padding-left: 15vw;
        padding-right: 15vw;
    }

    /* Sizes scaled for screen padding */
    #mini-gallery {
        height: 14vw;
        max-height: 255px;
        max-width: 52.5vw;
    }

    #mini-gallery img {
        height: 14vw;
        max-height: 255px;
    }
}