@font-face {
    font-family: sunflower;
    src: url(./font/MADE\ Sunflower\ PERSONAL\ USE.otf);
}

:root{
    --color1: #b1f5c9;
    --color2: #79eea2;
    --color3: #268346;
    --color4: rgb(24, 80, 44);
    
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    --height-min-nav: 65px;
    --height-nav: 75px;
}

@media screen and (max-width: 769px) {
    h1{
        font-size: 35px !important;
    }

    .nav{
        display: none !important;
    }

    .content{
        height: 100% !important;
    }
}

@keyframes boxStart {
    from{ height: 0; }
    to{ height: 65%; }
}

html{ height: 100%; }
body{ margin: 0; }
h1{ font-size: 50px; }

.nav{
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7;
    width: 100%;
    height: var(--height-nav);
    background-color: white;
    scroll-behavior: smooth;
}

.nav a{
    display: inline-block;
    position: relative;

    margin: 25px;
    text-decoration: none;
    color: black;
    font-weight: bolder;
    font-size: larger;
}
 
.nav a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    border-radius: 25px;
    background-color: black;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
 
.nav a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

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

    width: 100%;
    height: calc(100% - var(--height-nav));
    color: white;
    /* overflow: hidden; */
    /* background: linear-gradient(var(--cc1), var(--cc2)); */
}

.presentation{ background: linear-gradient(#b1f5c9, #79eea2); }
.competences{ background: linear-gradient(#79eea2, #44AF69); }
.projets{ background: linear-gradient(#44AF69, #268346); }
.contact{ background: linear-gradient(#268346, rgb(24, 80, 44)); }

.box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    width: 70%;
    height: 65%;
    border-radius: 5px;
    padding: 25px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75));
    color: black;
    animation: boxStart 1s;
}

.box h1{ margin: 5px; font-size: 50px !important; }
.box p{ font-size: 25px !important; }