@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');



:root {
    --forest: #1E2B24;
    --fern: #445C49;
    --burntOrange: #9B483B;
    --salmon: #C77362;
    --tan: #EDDECF;
    --tanDarker: #d4b99b;
}

* {
    box-sizing: border-box; 
    text-decoration: none;
    list-style: none;
    max-width: 100%;
    padding: 0;
    margin: 0;
    color: var(--forest);

    font-family: "Times New Roman", Times, serif;
    line-height: 1.5;
}

h1, h2, h3 { line-height: 1.2;}

html {
    background: #d1bca5;
    background: radial-gradient(circle, rgba(209, 188, 165, 1) 0%, rgba(237, 222, 207, 1) 100%);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 100dvh;

    /* border: solid red 2px; */
}

h1 {
    font-size: 45px;
    color: var(--burntOrange);
    text-align: center;

  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
}

h2 {
    font-size: 30px;

  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
    
}

h3 {
    font-size: 30px;
    color: var(--burntOrange);

  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
}

h4 {
    font-weight: bold;

  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
}

.flex--row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;

}

.flex--column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;


}

.flex--columnAlt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

header {
    margin: 50px 0 50px 0;
    padding: 5px;

    /* border: solid green 2px; */
}

.header__group {
    width: 100%;

    gap: 0px;
    justify-content: space-between;
    padding: 0 25px 0 25px;

    /* border: solid hotpink 2px; */
}

nav {
    font-size: 30px;

}

.header__contact {
    font-size: 18px;

}

.group__l img {
    width: 300px;
    height: 300px;
    background-color: var(--salmon);
}

main p {
    font-size: 20px;
}

.home__group {
    /* width: 80%; */
    padding: 30px;
    justify-content: center;

    background-color: var(--tan);

    /* border: solid red 1px; */
}

.group__r {
    width: 30%;
}

footer {
    margin: 25px;
    margin-top: auto;


    /* border: red solid 2px; */

    /* justify-content: start; */
}

.footer__group {
    width: 100%;
    padding: 15px;

    /* border: red solid 2px; */

}

.footer__group--insert {
    justify-content: center;
}

.resume--item {
    font-size: 25px;
    padding: 20px;
    width: 90%;
    text-align: center;

    background-color: var(--forest);
    color: var(--tan);
}

.resume--item:nth-child(even) {
    background-color: var(--fern);
}

.work {
    width: 100%;

    /* border: solid 5px blue; */
}

.work--group {
    width: 80%;
    padding: 15px;
    text-align: center;

    border: solid 3px var(--burntOrange);


}



.project--simple {
    padding: 2px;
}

.project--card {
    border: solid 2px var(--tanDarker);
    background-color: var(--tan);
    padding: 15px;

}

.project--card__title {
    padding: 15px;
    background-color: var(--salmon);
    color: var(--tan);
    font-size: 20px;

}

.project--card__title a {
    text-decoration: underline;
    color: var(--tan);
}

.featured {
    padding: 15px;

}

.work--group h2 {
    color: var(--burntOrange);
}

.project--card__featured {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 80%; */

    gap: 5px;
    border: solid 2px var(--tanDarker);
    background-color: var(--tan);
    padding: 15px;


}


.featured {
    width: 1000px;
}

.button {
    background-color: var(--fern);
    border: solid 2px var(--fern);
    width: 100%;

    padding-top: 5px;
    padding-bottom: 5px;

}

.button a {
    color: var(--tan);
}

/* @ MOBILE */

@media(max-width: 768px) {



    .flex--row {
        flex-direction: column;
    }

    .group__r {
        width: 100%;
    }

    h2 {
        text-align: center;
    }

}


































































































.floating-nav {
    height: 50px;
    width: 50px;
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;  

    z-index: 1;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--tanDarker);
    /* outline: 3px solid var(--tanDarker); */
    border-radius: 100%;
}


.floating-nav a, .floating-nav a label {
    text-decoration: none;
    transition: color .3s ease;
    font-size: 3rem;
    color: var(--tan);
}

.floating-nav a:hover, .floating-nav a:hover label {
    color: var(--tanDarker);
}

.floating-nav__checkbox {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    /* top: -7px;
    left: -5px; */
    
    cursor: pointer;
    
    opacity: 0;
    z-index: 2;
    
    -webkit-touch-callout: none;
}

.floating-nav span {
    display: block;
    width: 33px;
    height: 4px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    position: relative;
    
    background: var(--forest);
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}



.floating-nav span:first-child {
    transform-origin: 0% 0%;
}

.floating-nav span:nth-last-child(2) {
    transform-origin: 0% 100%;
}


.floating-nav__checkbox:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background-color: var(--tan);
}

.floating-nav__checkbox:checked:hover ~ span {
    background-color: var(--tanDarker);
}

.floating-nav__checkbox:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}


.floating-nav__checkbox:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}



.floating-nav__menu {
    position: fixed;
    inset: 0;
    padding: 50px;

    box-sizing: border-box;
    overflow-y: auto;
    background: var(--burntOrange);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.floating-nav__menu > *:not(:last-child) {
    border-bottom: 2px solid var(--salmon);
}

.floating-nav__menu li {
    padding: 10px 0;
    font-size: 22px;
}


.floating-nav__menu li label {
    cursor: pointer;
}

.floating-nav__checkbox:checked ~ .floating-nav__menu {
    transform: none;
}

body:has(.floating-nav__checkbox:checked) {
    overflow-y: hidden;
}