:root{
    --main-color:#f3f3f3;
    --secondary-color:#000000;
    --accent-color:#590391;
    --xlarge-caption:4rem;
    --large-caption:3rem;
    --med-caption:2rem;
    --small-caption:1.5rem;
    --paragraph-text:2rem;
    --base-font:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family:var(--base-font);
    background-color:var(--main-color);
}

.content{
    display:flex;
    flex-direction:column;
    padding:0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.intro-row{
    margin-top:50px;
}

.intro-description{
    height:auto;
    text-align:left;
    aspect-ratio: 1;
    display:flex;
    align-items:center;
    padding:0 60px;
    flex-direction:column;
    justify-content:center;
}

.intro-img{
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1;
    transition: transform 0.3s ease-in-out;
}

.intro-img:hover{
    transform: scale(1.05);
}

.intro-head, .intro-text{
    width:100%;
}

.intro-head{
    font-size:var(--xlarge-caption);
    font-weight:bolder;
}

.intro-text{
    font-size:var(--small-caption);
}

.uw-text{
    font-weight:bolder;
    font-size:var(--med-caption)
}


.project-holder{
    padding:15px;
    flex:1;
}

.project-row{
    display:flex;
}
.project-content{
    display:flex;
    flex-direction:column;
    flex:1;

}

.project-desc{
    margin-top:5%;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.project-img{
    width:100%;
    border-radius:5px;
    height:auto;
    transition:transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.project-img:hover{
    transform:scale(1.03);
    opacity:0.8;
}

.project-label{
    font-weight:bold;
    color:var(--accent-color);
}

.project-deps{
    font-style:italic;
    width:100%;
    word-wrap:break-word;
    overflow-wrap:break-word;
}

.project-text{
    font-size:var(--small-caption);
}

.project-link, .project-link:visited, .project-link:active, .project-link:focus{
    text-decoration:none;
    color:inherit;
    transition:opacity 0.3s ease-in-out;
}

.project-link:hover{
    color:inherit;
    text-decoration:none;
    opacity:0.6;
}

.section-divider{
    text-align:center;
    font-weight:bolder;
    color:var(--primary-color);
    margin:110px 0px 110px 0px;
    border-bottom:#000000 2px solid;
    width:100%;
}

@media (max-width: 995px) {
    .intro-description {
        display:flex;
        justify-content:flex-start;
        text-align:center;
        padding:25px;
        height:min-content;
        aspect-ratio:0;
    }
    .project-row{
        display:block;
    }
}