@import  url( 'https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap' );


*{
  font-family: Montserrat, cursive;
  list-style-type: none;
  text-decoration: none;
}

/*hearder et base*/

img.header-logo-img{
  width: 100px;
}

section.top-page{
  background: linear-gradient(90deg, orange, yellow);
  padding: 10px;
}

header.header{
  display: flex;
  align-items: center;
  width: 90;
}

.trait{
  border-radius: 50px;
  margin-top: 30px;
}

body{
  margin: 0px;
}

/*menu de navigation*/

nav.nav{
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  margin-left: 50px;
  width: 600px;
}

nav.nav li a{
  color: white;
  font-size: 20px;
}


li.anim::after {
  content: "";
  display: block;
  position: absolute;
  width: 0%;
  height: 3px;
  background-color: white;
  transition: width 0.3s ease-in-out;
  border-radius: 3px;
}

li.anim:hover::after {
  width: 100%;
}
/*commandes pop-up*/

div.admin{
  display: block;
  border-width:2px;
  border-radius: 10px;
  background-color: #1C2833;
  padding: 20px 50px;
  box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 50px;
  margin-top: 50px;
}

h1.admin{
  color: orange;
}

p.admin{
  color: #D7DBDD;
}

div.serveur{
  display: block;
  border-width:2px;
  border-radius: 10px;
  background-color: #1C2833;
  padding: 20px 50px;
  box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 50px;
}

div.utiles{
  display: block;
  border-width:2px;
  border-radius: 10px;
  background-color: #1C2833;
  padding: 20px 50px;
  box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 50px;
}

div.fun{
  display: block;
  border-width:2px;
  border-radius: 10px;
  background-color: #1C2833;
  padding: 20px 50px;
  box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 50px;
}

div.jeux{
  display: block;
  border-width:2px;
  border-radius: 10px;
  background-color: #1C2833;
  padding: 20px 50px;
  box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
  margin: 50px;
}

/*pop_up*/

.btnPopup{
  background-color: orange;
  padding: 10px 10px;
  cursor: pointer;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 10px;
  margin-top: 20px;
}

.btnPopup:hover{
  margin: 10px;
  transition: 0.3s;
}

.animated-pop-up{
  transition-property: margin, background-color, color;
  transition-duration: 0.3s;
}

div.btn{
  height: 20px;
  padding: 15px 15px;
}

.overlay {
position: fixed;
left: 0px;
top:0px;
background-color: rgba(0,0 ,0 , 0.5);
width: 100%;
height: 100%;
z-index:1;
display:none;
}
.popup{
margin: 10% auto;
width : 70%;
background-color: #707B7C;
padding: 1em;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.btnClose {
float: right;
font-size:50px;
cursor: pointer;
color: rgb(26, 26, 26);
}


body{
  margin: 0 auto;
}

footer {
  color: #2e4053;
  font-size: 25px;
  margin: 20px;
  margin-top: 100px;
  background-color: orange;
  border-radius: 20px;
}

section.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.navigation,
.contact {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
}

div.developppment {
  padding: 0px;
}

a {
  color: #2e4053;
  display: inline;
}


@media(orientation: portrait){
  p.admin{
    font-size: 13px;
  }

  .btnPopup{
    padding: 18px 30px;
    font-size: 35px;
    margin-top: 0px;
    border-radius: 30px;
  }
  div.btn{
    padding: 40px;
  }

  h1.pop-titre{
    font-size: 50px;
  }

  p.p-pop{
    font-size: 40px;
  }

  span.btnClose{
    font-size: 100px;
    margin-top: 0px;
  }


   nav.nav li{
  font-size: 40px;
 }

  nav.nav li a{
  font-size: 35px;
 }

  nav.nav{
  width: 750px;
  }

section.footer {
    flex-direction: column;
    font-size: 50px;
    align-items: baseline;
  }

  div.image {
    display: none;
  }

  div.contact,
  div.navigation,
  div.developppment {
    margin-left: 10%;
  }

  p.footer-p{
    margin-top: 50px;
    font-size: 20px;
  }
}

/* test */