/*colors: Purple = #8C1243; Red = #C0213E; Orange = #E6863C; Blue = #49B3BF*/


body {
    margin: 0;
    color:#ffffff;
    font-family: 'Roboto', cursive;
    font-weight: 1500;
    background-color:#ffffff!important;   
    box-sizing: border-box;
    background-image: url('../pics/fond_final.svg');
    background-size: cover;}


/*-----------------------------------------------------HEADER------------------------------------------------*/


.container {
    margin: 0 2% 0 2%
}

header {
    background-color:#BF213E;
    top:0;
    left:0;
    right:0;
    width:100%;
}

header::after {
    content:'';
    display: table;
    clear: both;
}
.logo {
    float: left;
    height: 6%;
    width: 6%;
    padding:1% 0;
    transition: transform .3s; 
}

nav{
    margin: 0 0 0 20%;

}
nav ul {
    padding: 0;
    margin:0;
    list-style: none;
}

nav li {
     display:inline-block;
     padding-top: 3%;
     margin:0 5% 0 1%
        
    }
nav a {
    color:#ffffff;
    text-decoration:none;
    font-size:1em;
    padding: 20px;
    width:300px;
    border-radius: 5mm; 
    
}
nav a:hover {
    background-color:#8C1243;
    border-radius: 5mm;
    padding: 20px;
    width:300px;
    box-sizing: border-box; 
    transition-duration: 0.5s;
}

.compte {
    float: right;
    width: 3%;
    margin-right: 3%;
    margin-top: .7%;
    background-color: #49b3bf;
    padding:1% 1.2%;
    border-radius: 5mm;
    transition: transform .3s; 
}

.compte:hover, .logo:hover{
    transform: scale(1.1);

}

/*--------------------------------------------------CONTENT-------------------------------------------------*/

span{
    font-weight: 1000;
}

#underline1, #underline2, #underline3{
    text-decoration: underline;
}

#titre{
    background-color: #49B3BF;
    border-radius: 5mm;
    padding: 2%;
    width: 120px;
    margin-left: 45%;
}

#intro{
    background-color: #8C1243;
    border-radius: 5mm;
    padding: 2%;
    width: 600px;
    margin-left: 25%;
    text-align: justify;
}

#tuto{
    background-color: #C0213E;
    border-radius: 5mm;
    padding: 2%;
    width: 360px;
    margin-left: 5%;
}


#music{
    background-color: #49B3BF;
    border-radius: 5mm;
    padding: 2%;
    width: 490px;
    margin-left: 53%;
}

#dess{
    background-color: #8C1243;
    border-radius: 5mm;
    padding: 2%;
    width: 280px;
    margin-left: 5%;
}


iframe{
    width: 560px;
    height: 315px;
    margin-left: 25%;
    border-radius: 5mm;
}

#dessin1, #dessin2, #dessin3{
    width:20%;
    border-radius: 5mm;
    margin-left: 10%;
}


/*-----------------------------------------------------ANIM TEXTE------------------------------------------------*/

#anim {
    background-color: #8C1243;
    border-radius: 5mm;
    padding: 2%;
    margin-left: 5%;
    width: 270px;
    animation-duration: 3s;
    animation-name: slidein;
    animation-duration: 1;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
    }
}

/*-----------------------------------------------------FOOTER------------------------------------------------*/

footer{
    background-color: #49B3BF;
    padding: 1%;
}

footer p{
    margin-left: 45%
}