:root {
    --side-bar-width: 10vw;
    --side-bar-size: 100;

    
    --white-coffe: 234, 222, 195;
    --gray-coffe: 195, 176, 145;
    --lighter-coffe: 208, 187, 154;
    --black-coffe: 35, 37, 36;
    --dark-coffe: 57, 52, 42;

    --charcoal : 69, 72, 81;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header li {
    list-style: none;
}

body {
    width: 100%;
}
img {
    pointer-events: none;
    width: 100%;
    height: auto;
  }
html, body, .gallery {
    background-color: rgb(var(--white-coffe));
}

header {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 7rem;
    width: var(--side-bar-width);
    height: 100vh;
    background-color: rgb(35, 37, 36);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 1rem;
    transition: width 0.5s ease-out;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.185);
    z-index: 100;
}

.logo {
    border-radius: 50%;
    pointer-events: all;
}
nav .navigation-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

header a {
    color: rgb(var(--white-coffe));
    text-decoration: none;
    transition: ease-out 0.5s;
}
header a.page-links::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 2px;
    background:rgb(var(--white-coffe));
    transition: width 0.5s;
}
header a.page-links:hover {
    padding-left: 1rem;
    text-decoration: none;
}
header a.page-links:hover::after {
    width: 100%;
}
header a.page-links.active {
    padding-left: 1rem;
}
header a.page-links.active::after {
    width: 50%;
    margin-left: 1rem;
}

header .navigation-links li {
    margin: 1rem 0;
}

.social-media-links img {
    width: 1.5rem;
    filter: invert(0.85);
}
.social-media-links {
    justify-content: left;
    transform: translateY(1rem);
}
.social-media-links ul {
    display: flex;
    gap: 1rem
}

footer p {
    text-align: center;
    color: #fff;
    font-size:	0.75rem;
}

main {
    margin-left: max(calc(7rem), calc((var(--side-bar-width)) * var(--side-bar-size) / 100));
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

input, button, textarea {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border: none;
    outline: none;
    cursor: pointer;

    border-radius: 0.5rem;
}

input[type="text"], input[type="email"], input[type="password"] {
    padding: 0.5rem;
    background-color: rgb(var(--gray-coffe));
}

input[type="submit"] {
    padding: 0.5rem;
    background-color: rgb(var(--dark-coffe));
    color: rgb(var(--white-coffe));
}

input[type="submit"]:hover {
    background-color: rgb(var(--black-coffe));
}

textarea {
    padding: 0.5rem;
    background-color: rgb(var(--lighter-coffe));
}

button {
    padding: 0.5rem;
    background-color: rgb(var(--gray-coffe));
    color: rgb(var(--dark-coffe));
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

button:hover {
    background-color: rgb(var(--black-coffe));
    color: rgb(var(--white-coffe));
}

@media screen and (max-width: calc(7rem + 800px)) {
    header {
        height: 6rem;
        width: 100vw;
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 20px;
    }
    header .logo img {
        height: 100%;
        width: auto;
    }
    header nav ul {
        display: flex;
        gap: 1rem;
    }

    header .navigation-links {
        display: flex;
        gap: 1rem;
    }

    header a.page-links:hover {
        padding-left: 0;
    }
    header a.page-links.active {
        padding-left: 0;
    }

    main {
        margin-left: 0;
        margin-top: 6rem;
    }
}