@charset "utf-8";
/* CSS Document */

header
{height: 150px;
width: 980px;
padding-left:20px;
background-color:none;
}

logo img {
    max-height: 100%;
}

body * {
    box-sizing: border-box;
}
img[Attributes Style] {
    height: 35px;
}


.animation{
  animation-name: neon;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
neon {
    height: 100%;
    display: inline-block;
    margin-left: 100px;
	margin-top: 3px;
    vertical-align: middle;
    white-space: nowrap;
}
@keyframes neon{
  from{text-shadow: 0px 0px 9px blue;}
  50%{text-shadow: 0px 0px 4px blue;}
  to{text-shadow: 0px 0px 10px blue;}
}

/*------------------------------
Style appliqué, ne pas modifier*/

body{
  background-color: #6CCBDB;
}

h1{
  text-align: center;
  font-family: 'Lobster', cursive;
  font-size: 4em;
  color: white;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    font-size: 16px;
}

nav
{height: 40px;
width: 980px;
background-color:#6CCBDB;}


/* Menu déroulant*/
#menu-deroulant, #menu-deroulant ul 
{padding: 0;
margin: 0;}

#menu-deroulant 
/* on centre le menu dans la page */
{text-align: center;}
    
#menu-deroulant li
/* on place les liens du menu horizontalement */
{display: inline-block;
position: relative;
border-radius:8px;}

#menu-deroulant li:nth-child(2)
/* on place les liens du menu horizontalement */
{position: relative;
border-radius:8px  8px 0 0;}

#menu-deroulant ul li 
/* on enlève ce comportement pour les liens du sous menu */
{display: inherit;
border-radius:0;}

#menu-deroulant ul li:hover
{border-radius:0;}

#menu-deroulant ul li:first-child
{border-radius:0;}

#menu-deroulant ul li:nth-child(2)
{border-radius:0;}

#menu-deroulant ul li:last-child
{border-radius:0 0 8px 8px;}

#menu-deroulant ul
/* on cache les sous menus complètement sur la gauche */
{position: absolute;
left: -999em;
text-align:center;
 z-index: 1000;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;}

#menu-deroulant li:hover ul 
/* Au survol des li du menu on replace les sous menus */
{left: auto;
max-height:15em;}

/* background des liens sous menus */
#menu-deroulant li:nth-child(2) li
{background:white;}


/* background des liens menus et sous menus au survol */
#menu-deroulant li:first-child:hover
{background:white;}

#menu-deroulant li:nth-child(2):hover
{background:white;}

#menu-deroulant li:nth-child(2) li:hover
{background: dimgray;}

#menu-deroulant li:nth-child(3):hover
{background:white;}
    
#menu-deroulant li:last-child:hover
{background:white;}

/* les a href */
#menu-deroulant a
{text-decoration:none;
display:block;
padding:8px 32px;
color:white;
font-family: sans-serif, "verdana";
font-size: 20px;
font-weight: lighter;
padding-top: 10px;
text-align: center;
padding-right: 30px;}

#menu-deroulant li:hover li a
{color:#282828;}

/*couleur texte survole APC*/
#menu-deroulant li:hover a, #menu-deroulant li li:hover a
{color:#282828;}



/*Autobiographie*/
h2
{font-family: "comic sans MS", sans-serif, "verdana";
font-weight: normal;
color: white;
font-size: 30px;
text-align: center;
margin-top: -60px;}


section
{font-family:"comic sans MS", sans-serif, "verdana";
color:white;
font-size: 20px;
width: 980px;
height: 2000px;
background-color:#6CCBDB;
padding-left:20px;
padding-bottom: 30px;}



/*Diaporama Autobiographie*/

.slideshow
{width: 800px;
height: 600px;
padding-top: 30px;
margin: auto;
overflow: hidden;
}

.middle
{position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);}


.navigation
{position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;}

/*rond défilants*/
.bar
{width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 50%;
margin: 3px;
cursor: pointer;
transition: 0.4s;}

.bar:hover
{background: white;}


input[name="r"]
{position: absolute;
visibility: hidden;}


.slides
{width: auto;
height: auto;
margin-top: -30px;
display: flex;
}


.slide
{width:auto;
transition: 0.6s;}

.slide img
{width: auto;
height: auto;}

img{
	margin:80px;
}

#r1:checked ~ .s1
{margin-left: 10%;}

#r2:checked ~ .s1
{margin-left: -75%;
}

#r3:checked ~ .s1
{margin-left: -160%;}


/*Tout un art*/
h3
{font-family: "comic sans MS", sans-serif, "verdana";
font-weight: normal;
color: white;
font-size: 30px;
padding-top: 50px;
text-align: center;}

article
{width: 980px;
height: 1400px;
background-color: #6CCBDB;
margin-top:0px;}



/*Diaporama Tout un art*/

.slideshow2
{width: 800px;
height: 600px;
padding-top: 10px;
margin: auto;
overflow: hidden;}

.navigation2
{position: absolute;
bottom: -780px;
left: 50%;
transform: translateX(-50%);
display: flex;}

/*rond défilants en bas*/
.bar2
{width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 50%;
margin: 6px;
cursor: pointer;
transition: 0.4s;}

.bar2:hover
{background: white;}

input[name="t"]
{position: absolute;
visibility: hidden;}


.slides2
{width: 800%;
height: 80%;
display:flex;}


.slide2
{width: 20%;
transition: 0.6s;}

.slide2 img
{height: 100%;}

img{margin:80px;}

#t1:checked ~ .s2
{margin-left: 1.5%;}

#t2:checked ~ .s2
{margin-left: -18.5%;}

#t3:checked ~ .s2
{margin-left: -39%;}

#t4:checked ~ .s2
{margin-left: -58%;}

#t5:checked ~ .s2
{margin-left: -79%;}



/*Une touche précieuse*/

.precieuse
{width: 980px;
height: 2280px;
background-color: #6CCBDB;
margin-top: 0px;
margin-left:0px;}

h2
{font-family: "comic sans MS", sans-serif, "verdana";
font-weight: normal;
color: white;
font-size: 20px;
padding-top: 130px;
text-align: center;}


/* Colonne gauche */

.left
{display: flex;
width: 450px;
height:600px;
background-color: #313D97;
margin-top: 100px;
margin-left:5px;
justify-content:center;
border-radius:20px;}


.intro{
font-family: "comic sans MS", sans-serif, "verdana";
font-weight: normal;
color: white;
margin-top:10px;
font-size: 20px;
padding-top:3px;
text-align: center;}

/* Colonne droite */

.picture{
width: 450px;
height: 650px;
margin-top: -600px;
margin-left:480px;
color:none;
}

footer
{height: 50px;
width: 980px;
background-color: #6CCBDB;
margin-top: 500px;}

body
{background-color: #6CCBDB;
display: flex;
align-items: center;
flex-direction: column;}



/* Copyright 2020 */
.copyright
{font-size: 15px;
font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif" ;
color: black;
padding-top: 5px;
text-align: center}