* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

html:focus-within {
    scroll-behavior: smooth;
}

.header-contain {
    max-width: 300px;
    width: 100%;
    padding-top: 0;
}

aside {
    height: 100%;
}

#body-contain {
    display: flex;
    gap: 2rem;
    padding: 1em 0em;
}

.nav-container {
    /* position: sticky; */
    height: 100%;
    padding: 5em 1.5em;
}

#sidenav {
    position: sticky;
    z-index: 1;
    top: 1rem;
    left: 0;
}


#sidenav li {
    font-size: 100%;
}

#sidenav li a {
    width: fit-content;
}

.external-icon {
    transition: 0.2s ease-in-out;
}

.external-svg {
    transition: 0.2s ease-in-out;
    scale: 1
}

.external-icon:hover {
    text-decoration: none;
    .external-svg {
    filter: invert(58%) sepia(15%) saturate(1082%) hue-rotate(299deg) brightness(88%) contrast(106%);
    }
    
}

.ksikes {
    display: block;
    margin-bottom: 1rem;
    font-size: 140%;
}

.main-contain {
    padding-top: 5em;
    padding-bottom: 0;
    margin-bottom: 0;
}

.main-portion {
    margin: 0;
    height: auto;
    width: 100%;
    padding: 1em;
}
.main-portion img {
    max-width: 100%;
    height: auto;
}

.writing-section p {
    margin-bottom: 2em;
    max-width: 80ch;
}
.grass {
    display: block;
    margin: auto;
}



.photo-section {
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 1024px;
}

.photo-heading p {
    margin-bottom: 2em;
}

.photos {
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 900px;
    height: auto;
}

.photo-section img {
    
}

.contact-header {
    font-size: 75%;
}

@media (max-width: 1023px) {
    .header-contain {
        max-width: 100%;
    }
    #body-contain {
        flex-direction: column;
    }
    .nav-container {
        padding: 1em;
    }
    .main-contain {
        padding-top: 1em;
    }
    #sidenav {
        display: flex;
        flex-wrap: wrap;
        gap: 0 2rem;
        align-items: center;
        justify-content: center;
    }
    #sidenav li {
        padding: 0.5rem;
    }
    #sidenav a {
        margin: auto;
    }
    .logo-text {
        width: 100%;
    }
    .logo-text a {
        margin: auto;
    }
    .ksikes {
        margin-bottom: 0;
    }
}