/* RESET */
*,
*::before,
*::after{
    box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
}

body{
    min-height: 100vh;
}

img,
picture,
svg,
video{
    display: block;
    max-width: 100%;
}
/* RESET END */

/* FONT */
:root{
    --fs-1: 1rem;
    --fs-2: 1.333rem;
    --fs-3: 1.777rem;
    --fs-4: 2.369rem;
    --fs-5: 3.157rem;
    --fs-small: 0.75rem;
}
  
@media (min-width: 34rem){
    :root{
        --fs-1: 1rem;
        --fs-2: 1.618rem;
        --fs-3: 2.618rem;
        --fs-4: 4.236rem;
        --fs-5: 6.854rem;
        --fs-small: 0.618rem;
    }
}

@font-face {
    font-family: 'Jimmy';
    src: url('../font/JimmyRegular.woff2') format('woff2'),
        url('../font/JimmyRegular.woff') format('woff');
    font-weight: 400;
}

body{
    font-family: 'Jimmy';
    font-size: var(--fs-2);
}

h1{
    font-size: var(--fs-4);
} 

h2{
    font-size: var(--fs-3);
}
/* FONT END*/

main{
    position: relative;
    overflow: clip;
}

a{
    color: black;
    transition: color 300ms ease-in-out;
    &:hover{
        color: #e8993c;
    }
}

#intro{
    display: grid;
    place-items: center;
    height: 100vh;
    height: 100dvh;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    .logo{
        height: 80vh;
        height: 80dvh;
        width: 100%;
    }
}