/* Déclaration FONTS */

@font-face {
    font-family: 'Typewriter';
    src: url('../fonts/Typewriter.woff2') format('woff2'),
        url('../fonts/Typewriter.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biko Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Biko_Regular.woff') format('woff');
}


@font-face {
    font-family: 'Biko Light';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Biko_Light-Restricted.woff') format('woff');
}


@font-face {
    font-family: 'Biko Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Biko_Bold.woff') format('woff');
}


@font-face {
    font-family: 'Biko Black';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Biko_Black.woff') format('woff');
}

/* Variables niveau global */

:root {
    --primary-color: #FFF05A;
    --secondary-color: #FF855C;
    --third-color: #A0FF5C;
    --opacity-color: rgba(252, 227, 7, 0.5);
    --darkColor: #212529;
    --primaryGradient: linear-gradient(
        90deg,
        rgba(247,166,25,1) 31%,
        rgba(233,156,84,1) 100%
    );
    --font-color: #fff;
    --backgroundImg2: url('../img/arn-formateur-mid.jpg');
    --backgroundImg1: url('../img/PIC4ARNO-DRUMS3.jpg');
    --backgroundPos: center;
    --backgroundColor: #060B17;
    --boxWidth: 75%;
}

@media (max-width: 575px) {
    :root {
        --boxWidth: 85%;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0 15px;
    background-color: var(--backgroundColor);
}

/* Style Defaut ELEMENTS */

h1, h2, a, p, em {
    color: var(--font-color);
    font-family: 'Biko Regular', 'Inter', 'Typewriter', Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 4em;
}

p {
    font-weight: 400;
}

h5 {
    color: var(--font-color);
    font-family: 'Inter', 'Typewriter', Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: center;
}

header, section {
    height: 100vh;
    background-size: cover;
    background-position: var(--backgroundPos);
    background-blend-mode: multiply;
}

.interTitle {
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interTitle h2 {
    font-size: 2em;
    color: darkgray;
    text-transform: uppercase;
    text-align: center;
}

@media (max-width: 575px) {
    h1 {
        font-size: 3em;
    }
    h2 {
        font-size: 1.2em;
    }
}

.box {
    max-width: var(--boxWidth);
    padding: 2em;
}

/* HEADER */

#main-header {
    height: 100vh;
    overflow: hidden;
}

#title {
    display: flex;
    justify-content: space-between;
}

.menu-item {
    color: var(--darkColor);
    font-size: 3em;
    display: inline-block;
    transition: color 1s;

    -webkit-animation: loopColor 2s ease-in-out infinite alternate ;
    -z-animation: loopColor 2s ease-in-out infinite alternate ;
    -o-animation: loopColor 2s ease-in-out infinite alternate ;
    animation: loopColor 2s ease-in-out infinite alternate ;
}

.menu-item-deux {
    animation-delay: 0.2s;
}

.menu-item-trois {
    animation-delay: 0.4s;
}

.menu-item:hover {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
    cursor: pointer;
    color: var(--secondary-color);
}

#title h2 {
    color: var(--secondary-color);
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

#header-content {
    height: 90vh;
    display: flex;
}

#textHeaderLeft {
    width: 40%;
}

#mediaHeaderRight {
    width: 50%;
    background: url('../img/arnaud-girard-musicien-batteur-vertical_003-mid.jpg') no-repeat;
    background-size: cover;
    background-position: center 25%;
    background-blend-mode: multiply;
    background-color: dodgerblue;
}

#textHeaderLeft h2 {
    /* width: 150%; */
    position: absolute;
    top: 50%;
    left: 15%;
    display: block;
    z-index: 100;
    mix-blend-mode: exclusion;
    font-size: 6em;
}

@media (max-width: 575px) {

    #title {
        flex-direction: column;
        text-align: center;
    }

    .menu-item {
        font-size: 2.1em;
    }

    #textHeaderLeft h2 {
        font-size: 3em;
        left: 15%;
    }
}

/* CARRIERE - A PROPOS */

#aboutme {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.focusAboutme {
    width: 75%;
    height: 75%;
    padding: 2em;
    text-align: left;
}

.focusAboutme p {
    font-size: 2em;
}

@media (max-width:575px) {

    .focusAboutme {
        width: unset;
    }

    .focusAboutme p {
        font-size: 1.05em;
    }
}

/* FLEX CARDS */

#activites {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 1em;
    height: unset;
}

.cardItemOne {
    display: flex;
    padding: 1rem;
    width: 33.33%;
}

.cardUnique {
    background: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    padding: 1em;
    overflow: hidden;
    border-radius: 0.25rem;
    box-shadow: 0px 5px 10px black;
    border: 1px solid black;
    transition: box-shadow 1s;
}

.cardUnique:hover {
    box-shadow: 0px 5px 10px white;
}

.cardUnique-img-top {
    min-height: 350px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    filter: contrast(180%);
    overflow: hidden;
    position: relative;
    transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);;
}

.cardUnique-img-top:hover {
    filter: contrast(100%);
}

.cardUnique-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem;
}

.cardUnique-text {
    color:  rgba(255, 255, 255, 0.5);
    flex: 1 1 auto;
    margin-bottom: 1.25rem;
}

.btn-card {
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0.5em;
    /* color: #212529; */
    /* color: #fff; */
    background-color: #e0a800;
    background: var(--primaryGradient);
    border: 1px solid #d39e00;
}

.btn-card:hover {
    text-decoration: none;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}


@media (max-width: 1080px) {
    .cardItemOne {
        width: 50%;
    }
}

@media (max-width: 575px) {
    .cardItemOne {
        width: unset;
    }
}

/* CARDS BG */

.card-bg-1 {
    background-image: url('../img/PIC4ARNO-DRUMS5.jpg');
}

.card-bg-2 {
    background-image: url('../img/PIC4CARDMAO.jpg');
}

.card-bg-3 {
    background-image: url('../img/PIC4CARDCONSERVATOIRE.jpg');
}

.card-bg-4 {
    background-image: url('../img/PIC4CARDMEDIATION.jpg');
}

.card-bg-5 {
    background-image: url('../img/PIC4CARDCOACHING-2.jpg');
}

.card-bg-6 {
    background-image: url('../img/arnaudgirard-stage-mao.jpg');
}

/* FOOTER */

footer {
    height: 75px;
    text-align: center;
    padding: 25px;
}

.rainbowRoadN64 {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  
@-webkit-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
}
@keyframes rainbow { 
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
}

@media (max-width: 575px) {
    footer {
        height: unset;
    }
}

/* LoopColor Icons */

@-webkit-keyframes loopColor {
    0% {color: var(--darkColor);}
    100% {color: var(--secondary-color);}
}
  
  @keyframes loopColor {
    0% {color: var(--darkColor);}
    100% {color: var(--secondary-color);}
}