{
font-size: xx-large;
}
h2
{
font-size: large;
color: white;
}
p
{
opacity: 1;
padding: 10px;
font-family: "arial";
font-size: medium;
color: black;
z-index: 1;
background-color: lemonchiffon;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
transition: all 1s ease-out;
}
.bouton
{
opacity: 1;
padding: 5px;
font-family: "arial";
font-size: medium;
float:right;
color: black;
margin-right: 15px;
width: fit-content;
z-index: 5;
background-color: grey;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
transform: translate(0px, 0px);
transition: all 1s ease-out;
}
.bouton:hover
{
opacity: 1;
padding: 5px;
font-family: "arial";
font-size: medium;
float:right;
color: black;
margin-right: 15px;
width: fit-content;
z-index: 5;
background-color: yellow;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
transform: translate(-2px, -2px);
transition: all 0.5s ease-out;
box-shadow: 5px 5px 5px black;
}
html 
{
overflow: scroll;
}
/*ci dessous le fond*/
body
{
width: 750px;
margin-top: 20px;
margin-bottom: 20px;
margin: auto;
color: gold;
background-image:url('bg.jpg');
background-color: grey;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#lefttop
{
z-index: 5;
float: left;
text-align: center;
width:195px;
height: 62px;
margin-top: 30px;
position: fixed;
border-style: solid;
border-color: black;
border-width: 1px;
padding : 6px;
transform: rotate(-3deg);
transition: 0.2s ease-out;
backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#lefttop:hover
{
z-index: 5;
float: left;
text-align: center;
width:195px;
height: 62px;
margin-top: 30px;
position: fixed;
background-color:yellow;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 15px;
padding : 6px;
transform: rotate(-3deg);
transition: 0.2s ease-out;
}

.scrdwn {
background-color: yellow;
  border-radius: 0px 0px 30px 30px;
  padding: 6px;
}

#top
{
float: right;
text-align: right;
width:700px;
height : 180px;
}
#menu    
{
float: left;
width: 150px;
height: 410px;
top: 180px;
position: fixed;
}
#corps
{
background-image: url('');
background-repeat: no-repeat;
background-size: contain;
background-position: sticky;
float: right;
width: 700px;
top: 140px;
position: relative;
z-index: 1;
}
table.photo
{
padding: 6px;
width: 100%;
font-family: "arial";
font-size: medium;
text-align: left;
color: black;
background-color: lemonchiffon;
background-repeat: no-repeat;
background-size: contain;
background-position: sticky;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
}
th
{
padding-bottom: 15px;
}
td.px
{
height:120px;
padding: 3px;
height: 20px;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
background-color: white;
text-align: center;
font-size: small;
}
td.px:hover
{
padding: 3px;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
background-color: white;
text-align: center;
font-size: small;
transform: translate(-2px, -2px);
transition: all 0.5s ease-out;
box-shadow: 5px 5px 5px black;
}
img.pix
{
cursor: pointer;
width: 330px;
height: 250px;
object-fit: cover;
}
iframe
{
border:0;
margin:10;
background-color:;
color: white;
scrolling: auto;
}
#bodybg
{
background-image:url('set.png');
float: right;
text-align: center;
width: 550px;
height: 600px;
}
.photos
{
transform: none;
transition:all 0.2s ease-in-out;
}
.photos:hover
{
transform: rotate(2deg);
transition:all 0.2s ease-in-out;
}

#bottom
{
text-align: center;
font-family: "arial";
font-size: medium;
color: black;
padding: 6px;
position : fixed;
width: 750px;
color: black;
border-style: solid;
border-width:1px;
border-color: black;
border-radius: 30px 30px 0px 0px;
background-color: yellow;
clear:both;
bottom: 0;
z-index: 2;
box-shadow: 3px;
}
#profile
{
position: relative;
margin-top: 0px;
margin-right: 0%;
width: 30%;
float: left;
}
a
{
text-decoration: none;
color: black;
transition:all 0.5s ease-in-out;

}
a:hover
{
font-size: large;
transition: all 0.3s ease-in-out;

}
a img
{
border: none;
spacing: none;
}
.modal {
  display: none;
  position: fixed;
  z-index: 8;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(0.5px);
transition: all 0.5s ease-out;
}
.popup {
    width: 100%;
    margin: 0 auto;
    height: 100%;
 }
.modal-content {
  position: relative;
  display: flex;
overflow: fit-content;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 0 0;
  width: 80%;
padding: 3px;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
background-color: white;
text-align: center;
transition: all 0.5s ease-out;
box-shadow: 5px 5px 5px black;
position: relative;
      top: 50%;
-webkit-transform: translateY(-50%);
      transform: translateY(-50%);

  max-width: 750px;

}

.slide {
  display: none;
color: black;
font-family: arial;

}

.image-slide {
border-radius: 5px;
background-color: lightgrey;
  width: 100%;
height: 460px;
object-fit: contain; 
transition: all 0.5s ease-out;
}

.previous,
.next {
position: absolute;
  cursor: pointer;
  top: 300px;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: lemonchiffon;
background-color: rgba(0, 0, 0, 0.2);
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 10px 10px 0;
  user-select: none;
  -webkit-user-select: none;
}
.next {
  right: 0;
  border-radius: 10px 0 0 10px;
}

.previous:hover,
.next:hover {
color: black;
border-style: solid;
border-width: 1px;
  background-color: yellow;

}
span.close
{
right: 0;
position: absolute;
  cursor: pointer;
  top: 0px;
  width: auto;
  padding: 5px;
  margin-top: 0px;
  color: black;
  font-weight: bold;
  font-family: arial;
background-color: lemonchiffon;
  transition: 0.6s ease;
  border-radius: 0 5px 0 10px;
text-align: center;
}
span.close:hover
{
right: 0;
position: absolute;
  cursor: pointer;
  top: 0px;
  width: auto;
  padding: 5px;
  margin-top: 0px;
  color: black;
  font-weight: bold;
  font-family: arial;
background-color: yellow;
  transition: 0.6s ease;
  border-radius: 0 5px 0 10px;
text-align: center;
}

table.contac
{
background-color: none;
width: 100%;
}
img.mimi
{

margin-right: 30px;
border-style: solid;
border-color: black;
border-width:1px;
box-shadow: 5px 5px 5px black 20%;
width: 150px; 
height: 150px; 
object-fit: cover;
border-radius: 100px;
}
span.covid
{
color: red;
font-size: bold;
border-style: solid;
border-color: red;
border-width:1px;
z-index:10;
width: 700px;
text-align: center;
background-color: yellow;
}
.set
{
height: 480px
}
.un
{
z-index: 0;
float: left;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translate(20px, 20px) rotate(15deg);
 background-color: white;
  box-shadow: 10px 10px 5px black;
transition: all 0.5s ease-out;
}
.un:hover
{
z-index: 10;
float: left;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translate(20px, 20px) rotate(12deg) scale(1.1);
 background-color: white;
  box-shadow: 10px 10px 5px black;
}
.deux
{
z-index: 1;
float: right;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translateX(-80px) rotate(-12deg);
 background-color: white;
  box-shadow: 10px 10px 5px black;
transition: all 0.5s ease-out;
}
.deux:hover
{
z-index: 10;
float: right;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translateX(-80px) rotate(-10deg) scale(1.1);
 background-color: white;
  box-shadow: 10px 10px 5px black;
}
.trois
{
float: left;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translateX(60px) rotate(-9deg);
 background-color: white;
  box-shadow: 10px 10px 5px black;
transition: all 0.5s ease-out;
}
.trois:hover
{
float: left;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translateX(60px) rotate(-7deg) scale(1.1);
 background-color: white;
  box-shadow: 10px 10px 5px black;
}
.quatre
{
float: right;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translate(-110px, -30px) rotate(1deg);
 background-color: white;
  box-shadow: 10px 10px 5px black;
transition: all 0.5s ease-out;
}
.quatre:hover
{
float: right;
border: 1px solid black;
width: 300px;
padding: 3px 3px 0px 3px;
transform: translate(-110px, -30px) rotate(0deg) scale(1.1);
 background-color: white;
  box-shadow: 10px 10px 5px black;
}
table.acces
{
padding: 6px;
width: 100%;
font-family: "arial";
font-size: medium;
text-align: left;
color: black;
background-color: lemonchiffon;
background-repeat: no-repeat;
background-size: contain;
background-position: sticky;
border-style: solid;
border-color: black;
border-width:1px;
border-radius: 5px;
}
td.accex
{
width: 400px;
top: 0;
vertical-align:top;
}