@import "reset.css";
@import "fonts.css";
@import "grid.css";
@import "text.css";
@import "padding.css";
@import "margin.css";
@import "colors.css";
@import "display.css";
@import "positions.css";
@import "pointer.css";
@import "opacity.css";


*{
    transition: all 0.25s ease-in-out;
}

:root {
  --blur: 0px;
  --scale: 1;
}

body {
    font-size: 13px;
    text-align: left;
    background: #f5f5f5;
    color: rgb(75, 75, 75);
    letter-spacing: 0.025rem;
}

header{
    padding: 10px 50px;
    position: fixed;
    z-index: 2;
    width: 100%;
    background: #f5f5f5;
}

footer{
    padding: 50px;
    width: 100%;
    z-index: 2;
    position: relative;
    background: #f5f5f5;
}


hr{
    background:rgb(220, 220, 220);
    border: none;
    height: 1px;
    display: block;
}


section{
    padding: 5rem 50px;
    position: relative;
    z-index: 1;
    background: #f5f5f5;
}

section.large-padding{
    padding: 12rem 50px;
}
section.background-cover{
    min-height: 80vh;
}

section.hero{
    z-index: 0;
    position: sticky;
    top: 0;
}

.background-cover{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.item-preview {
    height: 50vh;
    position: relative;
}

.item-preview .image {
    height: 100%;
    filter: grayscale(100%);
}
.item-preview .overlay{
    background: rgb(0, 0, 0, .65);
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0;
    z-index: 0;
}

.item-preview .item-title{
    opacity: 0;
    color: white;
    position: relative;
    z-index: 1;
}

.item-preview:hover .overlay, 
.item-preview:hover .item-title {
    opacity: 1;
}
.item-preview:hover .background-cover{
    background-position: bottom;
}

input, textarea{
    width: 100%;
    padding: .75rem;
    background: transparent;
    border: 1px solid rgb(220, 220, 220);
    background: rgb(235, 235, 235);
}

button, .button {
    background: rgb(75, 75, 75);
    color: #f5f5f5;
    padding: .75rem;
    font-family: 'Poppins-Bold';
    border: none;
    cursor: pointer;
}
button.block{
    width: 100%;
}
button:not(.background-transparent):hover, .button:hover {
    background: rgb(247, 202, 24);
    color: rgb(75, 75, 75);
}
button.small{
    padding: .5rem;
    font-size: .65rem;
}

@media (max-width: 767px) {
    body{
        font-size: 12px;
    }
    section{
        padding: 3rem 20px;
    }

    section.large-padding{
        padding: 7rem 20px;
    }   
    header{
        padding: 10px 20px;
    }

    footer{
        padding: 20px;
    }
    #mainMenu{
        position: fixed;
        height: 0vh;
        width: 100%;
        top: 62px;
        z-index: 1;
        left: 0;
        padding: 0;
        background: #f5f5f5;
        overflow: hidden;
    }
    #mainMenu.show{
        padding: 40px;
        height: calc(100vh - 62px);
    }
    #mainMenu .nav-link{
        height: 30%;
        font-size: 2rem;
    }
}