:root{
    --primary-color: rgb(85, 107, 47);
    --secondary-color: rgba(0, 0, 0, 0.698);
    --tertiary-color: rgb(255,255,255);
    --quaternary-color: rgb(128, 255, 0);
    --quinary-color: burlywood;
    --font-family: 'Rubik';
    --font-family-slim: 'Arimo';
    --gradient-color: linear-gradient(180deg, rgb(110, 180, 100) 0%, rgb(85, 107, 47) 100%);
    --gradient-color-reverse: linear-gradient(0deg, rgb(110, 180, 100) 0%, rgb(85, 107, 47) 100%);
    --gradient-color-secondary: linear-gradient(270deg, rgb(128, 255, 0), rgb(85, 107, 47));
    --font-size: 1rem;
    --font-size-profilo: 1.2rem;
}

/* @media (prefers-color-scheme:light){
    :root{
        --primary-color: rgb(244,98,58);
        --secondary-color: rgb(255,255,255);
        --tertiary-color: #212529;
        --quaternary-color: rgb(33,37,41);
        --quinary-color: rgba(92,77,66,0.8);        
    }
}
@media (prefers-color-scheme:dark){
    :root{
        --primary-color: rgb(14, 68, 1);
        --secondary-color: rgb(255, 255, 255);
        --tertiary-color: #212529;
        --quaternary-color: rgb(33,37,41);
        --quinary-color: rgba(92,77,66,0.8);        
    }
} */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img,svg{
    vertical-align: middle;
}

@font-face {
    font-family: 'Arimo';
    src: url(/assets/fonts/Arimo/Arimo-VariableFont_wght.ttf);
    font-weight: 400;
} 

@font-face {
    font-family: 'Rubik';
    src: url(/assets/fonts/Rubik/Rubik-VariableFont_wght.ttf);
    font-weight: 400;
} 

body{
    background-color: var(--quinary-color);
    color: var(--tertiary-color);
    font-size: var(--font-size);
    font-family: var(--font-family-slim);
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family);
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px var(--secondary-color); 
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: var(--primary-color); 
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--quaternary-color); 
}

.text-cprimary{
    color: var(--primary-color);
}

.my-container{
    max-width: 90vw;
}

.my-navbar-nav{
    margin-block: 1rem;
}

.my-nav-link{
    text-decoration: none;
    padding: 0.8rem;
    color: inherit; /*eredita dal genitore*/
    font-family: var(--font-family);
    transition: color 1s, font-size 1s;
    font-size: 1rem;
    font-weight: 500;
}

.my-nav-link:hover{
    color: var(--quaternary-color);
    font-size: 1.1rem;
}
#nav{
    height: 70px;
}
#chi-sono{
    background-color: var(--quinary-color);
}
#animazioni{
    min-height: 600px;
    background-color: var(--quinary-color);
    margin-block-start: 3rem;
}
#footer{
    background-image: var(--gradient-color-reverse);
    height: 50px;
    font-weight: 700;
    margin-block-start: 5rem;
}
#profilo{
    min-height: 100vh;
}
h1,h4{
    padding-block-start: 3rem;
    color: var(--primary-color);
}
.h-100{
    height: 100%;
}
.h-300{
    height: 300px;
}
.navbar-bg{
    background-image: var(--gradient-color);
}
.animazioni-home{
    /* min-height: 500px; */
    padding-block-start: 10rem;
}
.about-me{
    padding: 15px 30px;
    background-color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--secondary-color-color);
    text-decoration: none;
    transition: all 1.7s ;
    border-radius: 5px;
}

.about-me > span {
    margin-inline-start: 2rem;
}

.about-me:hover{
    background-image: var(--gradient-color-secondary);
    padding: 15px 51px 15px 15px;
}
.h-container{
    height: 300px;
}

.footer-link{
    color: var(--tertiary-color);
    text-decoration: none;
    padding-inline: 0.5rem;
}

.light-mode{
    color: var(--tertiary-color);
    background-color: transparent;
    border: none;
    display: inline-block;
}

.profilo-list-none{
    list-style-type: none;
}

.profilo-list-square{
    list-style-type: square;
}

.profilo-list-p{
    margin-bottom: 0.2rem;
    font-size: var(--font-size-profilo);
}
.fw-bold-500{
    font-weight: 500;
}

.link-social-animati{
    padding: 10px 70px;
    color: var(--tertiary-color);
    text-decoration: none;
    background-color: var(--primary-color);
    display: inline-flex;
    border-radius: 5px;
    margin: 2rem;
    text-transform: capitalize;
}

@media screen and (max-width: 992px) {
    .h-container{
        height: 600px;
    }
    #profilo h4{
        text-align: center;
    }
    #contenuto-animazioni h2{
        text-align: center;
    }
    #contenuto-animazioni{
        margin-block-start: 5rem;
    }
    .animazioni-home {
        padding-block-start: 3rem;
    }
}