@font-face {
font-family: 'Agrandir-Bold';
src: url('/fonts/agrandir/PPAgrandirText-Bold.woff2') format('woff2'),
url('/fonts/agrandir/PPAgrandirText-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: fallback;
}

@font-face {
font-family: 'Agrandir-Regular';
src: url('/fonts/agrandir/PPAgrandir-Regular.woff2') format('woff2'),
url('/fonts/agrandir/PPAgrandir-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: fallback;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    height: 100%;
    font-family: 'Agrandir-Bold', sans-serif;
}

:root{
    --primary-color: #e7dfd8;
    --text-color: #231f20;
}

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

body {
    margin: 0;
    font-family: Georgia, serif;
    background-color: var(--primary-color);
    color:  var(--text-color);
}

nav {
    background-color: var(--primary-color);
    margin-top: 50px;
}

.nav_links {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 10%;
    font-family: Agrandir-Bold, serif;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
    transition: all 0.3s ease;
}


.nav_links li a {
    text-decoration: none;
    color: #231f20;
    font-size: 22px;
}

.nav-item-current {
    font-style: italic;
}

.nav_links li:hover {
    transform: scale(1.05) skewX(-11deg);
}



#open-sidebar-button{
    display: none;
    background: none;
    border: none;
    padding: 1em;
    margin-left: auto;
    cursor: pointer;
}

#close-sidebar-button{
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;
}

#overlay{
    background: rgba(0,0,0,0.5);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
}

/* Responsive design for hamburger menu */
@media screen and (max-width: 650px) {
    #open-sidebar-button, #close-sidebar-button {
        display: block;
    }
    nav{
        position: fixed;
        top: 0;
        margin-top: 0px;
        right: -100%;
        height: 100vh;
        width: min(20em, 100%);
        z-index: 10;
        transition: right 300ms ease-out;
    }

    nav.show {
        right: 0;
    }

    nav.show ~ #overlay{
        display: block;
    }

    .nav_links {
        width: 100%;
        flex-direction: column;
        padding: 0px 0px;
        gap: 1.8rem;
    }

    #close_icon {
        margin-left: auto;
        padding: 0px 0px;
    }

    .nav_links li a {
        font-size: 27px; /* or larger size you prefer */
    }

    .close-sidebar-button{
        border: 1;
    }

    nav a {
        width: 100%;
    }
}


.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; /* Makes it responsive */
    padding: 2rem;
    gap: 2rem;
    animation: fade 1s;
}

.intro {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Use this instead of baseline */
    justify-content: flex-start; /* Align content to the top */
    height: 100%; /* allows intro to stretch with image height */

}

.intro h1 {
    font-size: 5rem;
    margin-bottom: 10px;
    font-family: Agrandir-Regular, serif;
    letter-spacing: 3px;
}

.intro h2 {
    font-size: 1.9rem;
    font-weight: normal;
    margin-bottom: 10px;
    font-family: Agrandir-Regular, serif;
}

.intro h3 {
    font-weight: normal;
    margin-top: 10px;
    font-family: Agrandir-Bold, serif;
    letter-spacing: -1px;
    text-decoration: underline;
}

.intro p {
    font-size: 1rem;
    color: #555;
}



.photo-with-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
}


.page-footer-email {
    text-align: center;
}


.socials-container{
    margin-top: 40px;
    margin-bottom:40px;
    display: flex;
    gap: 20px;
    justify-content: center;
    animation: fade-movement-up 0.5s;
}

/* svg fill */
.socials-container a .img-instagram {
    cursor: pointer;
    fill: var(--text-color);
    height: 22px;
    stroke: var(--text-color);
    stroke-width: 0;
    transition: 0.2s ease-in-out;
    margin-top: 5px;
    margin-right:1px;

}

.socials-container a .img-mail {
    cursor: pointer;
    fill: var(--text-color);
    height: 33px;
    stroke-width: 1.1%;
    stroke: var(--text-color);
    transition: 0.2s ease-in-out;
}

.socials-container a .img-imdb {
    cursor: pointer;
    fill: var(--text-color);
    height: 22px;
    stroke-width: 0.5%;
    margin-top: 5px;
    stroke: var(--text-color);
    transition: 0.2s ease-in-out;
}


.socials-container a svg:hover {
    fill: #e1306c;
    stroke: #e1306c;
    transition:0.2s ease-in-out;
}

.socials-container a .img-mail:hover {
    fill: #00bbff;
    stroke: #00bbff;
    transition:0.2s ease-in-out;
}

.socials-container a .img-imdb:hover{
    fill: #F5C518;
    stroke: #F5C518;
    transition:0.2s ease-in-out;
}


#imdb-thick-rec:hover {
    fill: #F5C518;
    stroke: #F5C518;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}

@keyframes fade-movement-up {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    100% {
        opacity:1;
        transform: translateY(0px) scale(1);
    }
}