@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: 80px;
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;}


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;}



/*image descriptive nouveauté*/


main .reac {
	font-family: "comic sans MS", sans-serif, "verdana";
    font-weight: normal;
    color: white;
    font-size: 30px;
    padding-top: 50px;
    text-align: center;
	margin-left: -110px;
}

.disparition{
  transition-property: opacity;
  transition-duration: 1s;
}

.disparition:active{
  opacity: 0;
}

.deplacement{
  transition-property: margin;
  transition-duration: 1s;
}

.deplacement:active{
  margin-left: 18em;
}

.rideau-horizontal{
  transition-property: width,content;
  transition-duration: 1s;
}

.rideau-horizontal:active{
  width: 0em;
  color: transparent;
}

.rideau-vertical{
  transition-property: height;
  transition-duration: 1s;
}

.rideau-vertical:active{
  height: 0em;
  color: transparent;
}

main{
  width: 1000px;
  height: 2000px;
  margin: 2em auto;
  padding-left: 10px;
}

.conteneur{
  display: inline-block;
  position: relative;
  width: 15em;
  height: 15em;
  border-style: solid;
}

.box{
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}

.box span{
  display: inline-block;
  margin: 7em auto;
}

.faux{
  color: blue;
}

.vrai{
  color: blue;
}
.cache{
  background-color: orange;
}

.beton{
  background-size: 250%;
  background-position: 10% 30%;
}

.oeil{
  background-size: 250%;
  background-position: 90% 100%;
}

.visage2{
  background-size: 19em;
  background-position: bottom right;
}

.moitie{
  background-size: 25em;
  background-position: -6em;
}

.demon{
  background-size: 250%;
  background-position: 10% 30%;
}

.cadre{
  background-size: 250%;
  background-position: 90% 100%;
}


.explications
{font-size: 20px;
font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif" ;
color: white;
padding-top: 5px;
margin-top: 0px;
text-align: center;
}


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

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



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