@tailwind base;
@tailwind components;
@tailwind utilities;

 h1{
    color: orange;
    /* margin: 0; */
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(0.5rem, 5cqw, 5rem);
    white-space: nowrap;
}

/*
h2{
    color: orange;
    margin: 0;
    padding: 5px;
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(1em, 7cqw, 3em);
}

h3{
    color: orange;
    font-size: normal;
    text-align: justify;
    font-weight: 500;
    margin: 0;
    padding: 5px;
    font-family: 'Times New Roman', Times, serif;
} */


/* - creation de différent élément en css https://www.cssportal.com/css-scrollbar-generator/ */

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 11px;
    width: 11px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: #EEEEEE;
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: #D3D3D3;
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: #A5A5A5;
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #DA8B30;
    border: 2px solid #FFFFFF;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: #B97629;
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: #83541D;
  }

.body{
    background-color: red;
    margin: 0;
}

.headerBackground{
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 30%);
}

.section{
    width: auto;
    min-height: 500px;
    height: 100vh;
    margin: 0;
    display: grid;
    align-items: center;
    justify-content: center;
}

.sectionGradient{
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%);
}

.sectionGradientOrange{
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(218, 139, 48,0) 0%, rgba(218, 139, 48,1) 15%, rgba(218, 139, 48,1) 85%, rgba(218, 139, 48,0) 100%);
}

.footerGradient{
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(218, 139, 48,1) 0%, rgba(218, 139, 48,1) 85%, rgba(218, 139, 48,0) 100%);
}

.sectionContent{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.sectionContentChild{
    min-width: 150px;
    max-width: 400px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 40px;
}

.sectionContentTitle{
    color: orange;
    margin: 0;
    padding: 5px;
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(2rem, 7cqw, 2.5rem);
    text-align: left;
}

.sectionContentText{
    color: orange;
    font-size: medium;
    text-align: justify;
    font-weight: 500;
    margin: 0;
    padding: 5px;
    font-family: 'Times New Roman', Times, serif;
}

@media (max-width: 800px) {

    .sectionContent{
        display: flex;
        flex-direction: column;
    }
    
    .sectionContentChild{
        margin: 30px 10px;
    }

    .sectionContentReverse{
        flex-direction: column-reverse;
    }
}

/* tool: https://scroll-driven-animations.style/ */
.titleReveal{
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 81%, transparent);
    mask-size:200%;
    mask-position: 200%;
    mask-repeat:no-repeat;
    animation: titleRevealAnimation 1.5s normal forwards ease-in-out;
    animation-delay: 0.5s;
}

@keyframes titleRevealAnimation {
    0%{
        mask-position: 200%;
    }
    100% {
        mask-position: 0%;
    }
}

.textReveal{
    animation: textRevealAnimation linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

@keyframes textRevealAnimation {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    100% {
        opacity: 1;
        }
}

.imageUp{
    box-shadow:0 0px 0px 0px rgba(0,0,0,0.5);
    animation: imageUpAnimation linear both;
    animation-timeline: view();
    animation-range: entry 70% cover 60%;
}

@keyframes imageUpAnimation {
    0%{
        box-shadow:0 0px 0px 0px rgba(0,0,0,0.5);
        transform: translateY(0px);
    }
    100% {
        box-shadow:0 10px 15px 5px rgba(0,0,0,0.5);
        transform: translateY(-15px);
        }
}