@font-face {
    font-family : 'Kinghand' ;
    src: url('presentation/polices/Kingthings Hand.ttf') format('truetype');
    font-weight : 100 900;
}

body  {
    height: 1500px;
    width: 100vw;
    animation:change-bg 8s;
    -moz-animation-delay : 6s;
    animation-delay : 6s;
    animation-fill-mode: forwards;
}

A:link {
    text-decoration:none;
    color:black;
}

A:visited {
    text-decoration:none;
    color:black; 
}

#bg {
    width:100%;
}

@keyframes change-bg {
    from {background:white;}
    20% {background:cyan;}
    40% {background :rgb(236, 181, 77);}
    60% {background: rgb(30, 107, 107);}
    80% { background: linear-gradient(rgb(236, 181, 77), 40%, rgb(30, 107, 107));
    }
    to {background: linear-gradient(
        217deg,
        rgb(236, 181, 77),
        rgba(255, 0, 0, 0) 70.71%
      ), linear-gradient(127deg, rgb(30, 107, 107), rgba(0, 255, 0, 0) 70.71%),
      linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
  }
}


#titre {
    margin-top:30px;
    height: 100px;
    width:100%;
    overflow:hidden;
    font-size: 25px;
    text-align:center; 
}

#soustitre {
    margin-top:40px;
    width:100%;
    height: 80px;
    font-size:36px;
    font-family:monospace;
    text-align:center;
    font-family:'Kinghand', sans-serif;
    font-size:40px;
    font-weight:bold;
}   


#titre::after {
    content:'';
    font-family:'Kinghand', sans-serif;
    font-size:30px;
    text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    animation: change-text 8s;
    animation-fill-mode:forwards;
}

@keyframes change-text {
    from   { content: '';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none;
        font-size:30px;}
    3% {content:'_';
        font-family: monospace; 
        font-weight:normal ;
        text-shadow:none;
        font-size:30px;
     }       
    6% {content:'A';
        font-family: monospace; 
        font-weight:normal ;
        text-shadow:none;
        font-size:30px;
    }
    9% {content:'A_';
        font-family: monospace;
       font-weight:normal ;
       text-shadow:none;
       font-size:30px;}
    12% {content:'An';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none; 
        font-size:30px;}
    15% {content:'An_';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none;
        font-size:30px;}
    18% {content:'Ant';
        font-family: monospace; 
        text-shadow:none;
        font-size:30px;}
    21% {content:'Ant_';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none;
        font-size:30px;}
    24% {content:'Anto';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px;}
    27% {content:'Anto_';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    30% {content:'Antoi';
        font-family: monospace; 
        font-weight:normal ;
        text-shadow:none;
        font-size:30px;}
    33% {content:'Antoi_';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none; 
        font-size:30px; }
    36% {content:'Antoin';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none;
        font-size:30px; }
    39% {content:'Antoin_';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    42% {content:'Antoine';
        font-family: monospace;
        font-weight:normal ;
        text-shadow:none; 
        font-size:30px; }
    45% {content:'Antoine_';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    48% {content:'Antoine _';
        font-family: monospace;
        font-weight:normal ;
        font-size:30px;  }
    51% {content:'Antoine C';
        font-weight:normal ;
        font-family: monospace;
        text-shadow:none;
        font-size:30px;  }
    54% {content:'Antoine C_';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    57% {content:'Antoine Ca';
        font-family: monospace; 
        font-weight:normal ;
        text-shadow:none;
        font-size:30px; }
    60% {content:'Antoine Ca_';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    63% {content:'Antoine Can';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    66% {content:'Antoine Can_';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;}
    70%  {content:'Antoine Cani';
        font-family: monospace;
        font-weight:normal ; 
        text-shadow:none;
        font-size:30px; }
    75%  {content:'Antoine Cani';
        font-family: monospace;
        font-weight:bold ;
        font-size:40px;
        text-shadow:none; }
    80% {content:'Antoine Cani';
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight:bold; 
        font-size:50px;
        text-shadow:none;}
    84% {content:'Antoine Cani';
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight:bold; 
        font-size:60px;
        text-shadow: none;}
    90% {content:'Antoine Cani';
        font-family:'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
        font-weight:bold;
        font-size:65px;
        text-shadow: none;}
    95% {content:'Antoine Cani';
        font-family:'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
        font-weight:bold;
        font-size:65px;
        text-shadow: -5px 4px 5px rgba(0,0,0,0.39);
    }
    to {content:'Antoine Cani';
        font-family:'Kinghand', sans-serif;
        font-size:90px;
        text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    }

}

#soustitre::after {
    content:'';
    animation: stitre 15s linear ;
    -moz-animation-delay : 10s;
    animation-delay : 10s;
    animation-fill-mode: forwards;
    text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
}



@keyframes stitre {
    from   { 
        content: 'Développeur Web'; 
        text-shadow:none;}
    4% {text-shadow:-5px 4px 5px rgba(29, 23, 23, 0.69);}
    8% {text-shadow:none;}
    12% {content:'Développeur Mobile';
         }
    16% {
        text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    }
    20% {text-shadow:none;}
    24% {content:'Spécialiste Javascript/Typescript';}
    28% {
        text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);     
    }
    32% {text-shadow:none;}
    36% {content:"Geek Old School";}
    40% {text-shadow:-5px 4px 5px rgba(29, 23, 23, 0.69);
    }
    44% {text-shadow:none;}
    48% {content:"Passionné de Jeux de Stratégie";
    }
    52% {
        text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    }
    56% {text-shadow:none;}
    60% {content:"Moddeur";}
    64%  {text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    }
    68% {text-shadow:none;}
    72% {content:"Game Designer";}
    76% {text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    } 
    80% {text-shadow:none;}
    84% {content:"Concepteur d'Applications";}
    88% {text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);
    } 
    92% {text-shadow:none;}
    96% {content : "Rédacteur de Contenus";}
    to {content:'Présentation & Projets';
        text-shadow: -5px 4px 5px rgba(29, 23, 23, 0.69);}
    }

    #menu {
        width: 100%;
        padding-left : 15%;
        padding-right : 15%;
        opacity:0;
        animation:displaymenu 5s;
        animation-delay:9s;
        animation-fill-mode: forwards;
    }

    .menuElem {
        width:70%;
    }

    .textMenu {
        position:relative;
        top:-80px;
        left: 10%;
        font-family:'Kinghand', sans-serif;
        font-size:36px;
        text-shadow: -5px 4px 3px rgba(44, 37, 37, 0.49);
    }

    .textMenu:hover {
        color :darkred;
        .msOver {
            color : black;
            opacity:1;
        }
    }

    .msOver {
        position:absolute;
        top:45px;
        left:28%;
        max-width:600px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:16px;
        text-justify:auto;
        text-shadow:none;
        opacity:0;
    }

    @keyframes displaymenu {
        from {opacity:0;}
        to {opacity:1;}
    }

    .boutons {
        margin-top:35px;
        height:80px;
        width:120px;
    }
    .rotation3d {
        float: left;
        transform : perspective(0px) rotateZ(-30deg);
      }
    .box {
        background: linear-gradient(rgb(235, 224, 7), 40%, rgb(191, 108, 13));
        height: 50px;
        text-align: center;
        width: 120px;
        font-family:'Kinghand', sans-serif;
        font-size:21px;
        font-weight: 700;
        padding-top:15px;
        border:solid rgb(118, 104, 104) 2px;
        border-radius:6px;
        box-shadow:-5px 6px 5px rgba(29, 23, 23, 0.69);
        animation: run-rotation2 10s linear infinite;
        animation-delay : 6s;
        -moz-animation-delay: 6s;
      }
      .box:hover {
        animation: run-rotation 4s linear infinite;
      }
      .run-rotation {
        transform-style: preserve-3d;
      }

      @keyframes run-rotation {
        0% {
          transform: rotateY(0deg) rotateX(0deg);
        }
        40% {
            transform: rotateY(0deg) rotateX(90deg);
        }
        80% {
            transform: rotateY(240deg) rotateX(60deg);
        }
        100% {
          transform: rotateY(360deg) rotateX(0deg);       
        }
      }

      @keyframes run-rotation2 {
        0% {
          transform: rotateZ(0deg);
          box-shadow:-5px 6px 5px rgba(29, 23, 23, 0.69);
        }
        50% {
            transform: rotateZ(0deg);           
        }
        75% {
            transform: rotateZ(180deg);
            box-shadow:5px -6px 5px rgba(29, 23, 23, 0.69);
        }
        100% {
          transform: rotateZ(360deg);     
        }
      }

      #piedpage {
        position:absolute;
        width:100%;
        top : 1450px;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
      }

      #wcb-cont {
        top:1400px;
        width:100%;
        text-align:center;
      }

      

      @media screen and (min-width:1500px) {
        .boutons {
            width:200px;
        }
        .box {
            width:165px;
            height:60px;
            font-size:28px;
        }
        .textMenu {
            font-size:44px;
        }
        .msOver {
            top:60px;
            left:25%;
            width:70%;
            max-width:750px;
            font-family:Arial, Helvetica, sans-serif;
            font-size:20px;
            text-justify:auto;
        }

      }

      @media screen and (min-width:575px) and (max-width:680px) {
    
        .boutons {
            width:105px;
        }

        .box {
            width:100px;
            height:45px;
            font-size:18px;
        }

        #menu {
            padding-left:10%;
            padding-right:3%;
        }

        .menuElem {
            width:87%;
        }

        .textMenu {
            left:8%;
            font-size:32px;
            overflow:none;
        }
        .msOver {
            top:48px;
            left:23%;
            max-width:350px;
            font-family:Arial, Helvetica, sans-serif;
            font-size:14px;
            text-justify:auto;
        }
      }


      @media screen and (min-width:422px) and (max-width:575px) {

        .boutons {
            width:90px;
        }

        .box {
            width:90px;
            height:45px;
            font-size:16px;
        }

        #menu {
            padding-left:5%;
            padding-right:3%;
        }

        .menuElem {
            width:92%;
        }

        .textMenu {
            left:2%;
            font-size:24px;
            overflow:none;
        }

        .msOver {
            top:40px;
            left:33%;
            max-width:255px;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
            text-justify:auto;
        }
      }      

 
      @media screen and (max-width:422px) {

        .boutons {
            width:70px;
        }

        .box {
            width:70px;
            height:40px;
            font-size:14px;
        }

        #menu {
            padding-left:3%;
            padding-right:3%;
        }

        .menuElem {
            width:94%;
        }

        #texte3 {
            content:"Générateur d'Articles"
        }

        .textMenu {
            left:2%;
            font-size:14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .msOver {
            top:36px;
            left:40%;
            max-width:255px;
            font-family:Arial, Helvetica, sans-serif;
            font-size:10px;
            text-justify:auto;
        }
      }