@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
:root{
    --bg-accent: hsl(0, 0%, 95%);
    --text-accent:hsl(0,0%,35%);
    --text-highlight:hsl(222, 49%, 29%);
    --link-highlight:hsl(222, 49%, 50%);
    --tooltip-color:#BBBBBB;
    --tooltip-text:#333333;
}
*, html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    max-width:100%;
}
body{
    font-family: 'Montserrat', sans-serif;
    color:hsl(0,0%,15%);
    background-image:url("images/waves.svg");
    background-repeat:no-repeat;
    background-position: 10rem 2rem;
    background-size: 100%;
}
section{
    margin-bottom:3rem;
}
section p:not(:last-child){
    margin-bottom:1rem;
}
img{
    max-width: 100%;
    max-height:100%;
}
.photoContainer {
    margin: 0 0 0.5rem 0;
    display: flex;
    overflow: visible;
}
.single{
    height: 75vh;
}
.multiple{
    gap: 1rem;
    flex-wrap: wrap;
}
img.photo {
    height: 100%;
    object-fit: contain;
    flex-grow: 1;
}
.multiple img {
    height: 30vh;
}
div{
    margin:0 0 0.5rem 0;
}
a{
    text-decoration:none;
    color:inherit;
}
form{
    margin-top:1rem;
}
label{
    display:inline-block;
    margin-bottom:0.5rem;
}
input{
    margin-bottom:1rem;
}
button{
    padding:0.5rem;
}
.highlight{
    color:var(--text-highlight);
}
#hamburger{
    display:None;
    z-index:99;
    cursor:pointer;
}
#container{
    position:absolute;
    max-width:100%;
}
.fixed{
    position:fixed !important;
}
#navigation{
    position:fixed;
    height:100vh;
    width:25%;
    background: var(--bg-accent);
    text-align: center;
    padding-top:2rem;
}
#main-content{
    display:block;
    position:relative;
    left:25%;
    width:75%;
    padding: 0 5rem 0 3rem;
    box-sizing: border-box;
}
#profile-pic{
    max-width: 10rem;
    max-height:10rem;
    margin:auto;
}
#profile-pic img{
    width:100%;
    height:auto;
}
#name{
    margin-top:0.5rem;
    font-weight:bolder;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}
#motto{
    color:var(--text-accent);
    margin:0 1rem 0 1rem;
}
nav{
    margin-top:1rem;
}
nav ul{
    list-style-type: none;
    padding:0;
    margin:0;
}
nav li{
    padding: 0.5rem;
}
nav a{
    position:relative;
}
nav a.active{
    color:var(--link-highlight);
}
nav a:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    background: var(--link-highlight);
    transition: 0s;
}
nav a:hover::after, nav a.active::after{
    transition: 0.25s ease-in-out;
    left: 0;
    width: 100%;
}
#hero{
    display:flex;
    flex-direction: row;
    align-items: center;
    height:100vh;
}
#hero-text{
    display:flex;
    flex-direction:column;
    width:50%;
}
#hero-text h1{
    font-size: clamp(2rem, 5vw, 3rem);
}
#hero-text h3{
    margin-bottom: 2rem;
}
#hero-desc{
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    line-height:1.65rem;
    color:var(--text-accent);
}
#hero-button{
    display:flex;
    justify-content:center;
    width:50%;
}
#learn-more{
    cursor:pointer;
    padding:1rem;
    color:var(--bg-accent);
    background:var(--text-highlight);
}
section h2{
    font-size:2rem;
    margin-bottom:1rem;
}
section h3{
    margin: 1.5rem 0 0.75rem 0;
}
section h4{
    margin: 0 0 0.5rem 0;
}
section p{
    line-height:1.5rem;
}
.software-container{
    display:flex;
    gap:1rem;
    justify-content: start;
    flex-wrap:wrap;
}
.software-container img{
    max-width:clamp(2rem, 6vw, 5rem);
    max-height:clamp(2rem, 6vw, 5rem);
}
.tooltip{
    position:relative;
}
.tooltip::before, .tooltip::after{
    --scale: 0;
    position:absolute;
    top:-0.25rem;
    left:50%;
    transform: translateX(-50%) translateY(var(--ty, 0)) scale(var(--scale));
    transition: 50ms transform;
    transform-origin: bottom center;
    z-index:10;
}
.tooltip::before{
    --ty:calc(-100% - 10px);
    background: var(--tooltip-color);
    color: var(--tooltip-text);
    width:max-content;
    padding:0.5rem;
    content:attr(data-tooltip);
    text-align:center;
    border-radius:0.3rem;
}
.tooltip::after{
    --ty: -10px;
    content:'';
    border: 10px solid transparent;
    border-top-color: var(--tooltip-color);
}
.tooltip:hover::before, .tooltip:hover::after{
    --scale: 1;
}
#work-experience h4{
    color:var(--text-accent);
}
@media (max-width:800px){
    body{
        background-position: 0 20rem;
    }
    #navigation{
        display:none;
        width:100%;
    }
    #navigation.is-visible{
        display:block;
        animation: animate 0.5s linear;
    }
    @keyframes animate {
        0% {
          opacity: 0;
          position:-100vw;
        }
        100% {
          opacity: 1;
          position:0;
        }
      }
    #main-content{
        width:100%;
        left:0;
        margin:0;
        padding:0 3rem 0 3rem;
        box-sizing: border-box;
    }
    .hidden{
        visibility:hidden;
    }
    #hero{
        flex-direction: column;
        justify-content:center;
    }
    #hero-text{
        width:100%;
    }
    #hero-button{
        margin-top:2rem;
        width:100%;
    }
    #hamburger{
        display:block;
        position:absolute;
        margin:2rem;
    }
}