:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}
*{
    /* border: solid red 1px; */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    /*Remove default padding and margin on body*/
    margin:0;
    /*Make body stretch to fill the viewport*/
    min-height: 100vh;
    /*Set default font family to InterVariable*/
    font-family: InterVariable, sans-serif;
    /*Create flexbox to centre items in viewport*/
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    color: #ddd;
}

/* Flex box containers */
body, .header, .footer, .right-links, .left-links, .hero-section{
    display: flex;
}


.header, .footer{
    width: 100%;
    justify-content: space-between;
    background-color: none;
    padding: 5px 10px;
}
.right-links, .left-links{
    align-items: center;
    gap: 15px;
}
.section{
    flex-basis: 30vh;
}

.nav-link{
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 800;
    transition: color 0.3s;
}
.nav-link:hover{
    color: lime;
}

.hero-section{
    max-width: 800px;
    padding: 10px;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    gap:10px
}
.hero-section h1{
    font-size: clamp(2rem, 10vw, 5rem);
}
.hero-section p{
    font-size: clamp(1rem, 5vw, 1.25rem);
}
.hero-section p a{
    color: lime;
    font-weight: 600;
}
.hero-img{
    border-radius: 100vw;
    align-self: center;
    width: 40%;
    max-width: 150px;
}
.left-links img{
    transition: rotate 1s;
}

.left-links img:hover{
    rotate: -5deg;
}
.footer button{
    font-weight: 700;
    font-family: inherit;
    background: none;
    color: inherit;
    border: none;
    font-size: 1.2rem;
    transition: transform 10s;
}

@keyframes waving {
    0%{transform: rotate(-5deg);}
    50%{transform: rotate(5deg);}
    100%{transform: rotate(-5deg);}
}
.wave{display: inline-block;}
.wave{
    animation-name: waving;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}