*
{
    font-family: "Inria Serif";
    margin:0 !important;
    padding: 0 !important;
}
nav a 
{
    text-decoration: none;
    color:black
}
nav a:hover 
{
    text-decoration: underline;
}
body
{
    margin:0 !important;
    padding: 0 !important;
}
nav 
{
    height: 10vh;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
nav div 
{
    width:80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.main_content
{
    margin-top:10hv;
    overflow: auto;
}

.first_section 
{
    height: 80vh;
    margin-top: 10vh !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.titre
{
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    width: 40%;
    height: 60vh;
}
.titre_accueil
{
    font-size: 3.2em;
}
html
{
    margin:0 !important;
    padding: 0 !important;
}
footer
{
    height: 10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer p 
{
    text-align: center;
    font-size: 0.8em;
    color:grey;
    margin:0 !important;
    padding: 0 !important;
}
.btn_histoire
{
    background-color: rgb(53, 53, 53);
    border-radius: 16px;
    height: 6vh;
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    color:white;
}
.logo_navbar
{
    height: 4vh;
}
.img 
{
    width: 11vw !important;
    min-width: 100px;
    min-height: 300px;
    height: 40vh !important;
    background-color: bisque;
    width:2vw;
    height: 4vh;
}
.images
{
    height: 50vh;
    width: 40%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.img_one 
{
    align-self: flex-start;
    object-fit: cover;
}
.img_two
{
    align-self: flex-end;
    object-fit: cover;
}
.img_three
{
    align-self: flex-start;
    object-fit: cover;
}
/*
POLICES IMPORTEES
*/

.inria-serif-light {
    font-family: "Inria Serif", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .inria-serif-regular {
    font-family: "Inria Serif", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .inria-serif-bold {
    font-family: "Inria Serif", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .inria-serif-light-italic {
    font-family: "Inria Serif", serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .inria-serif-regular-italic {
    font-family: "Inria Serif", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .inria-serif-bold-italic {
    font-family: "Inria Serif", serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .merriweather-light {
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .merriweather-regular {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .merriweather-bold {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .merriweather-black {
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .merriweather-light-italic {
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .merriweather-regular-italic {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .merriweather-bold-italic {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .merriweather-black-italic {
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: italic;
  }
  
@media screen and (max-width: 1024px) {
    .images
    {
        display: none;
    }
    .main_content
    {
        justify-content: center;
        align-items: center;
    }
    .titre
    {
        width: 80%;
    }
    .titre_accueil
    {
        font-size: 2.5em;
    }
    .btn_histoire
    {
        min-width: 200px;
        min-height: 50px;
    }
    .invisible_resizable
    {
        display:none;
    }
    nav div 
    {
        justify-content: space-between;
    }
    footer p 
    {
        font-size: 10px;
    }
}






legend, label, input, ul, li{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{ text-decoration: none;}

.input-toggler{ display: none;}
.menu-toggler{position: absolute; right: 0px; top: 0px; width:80px;height: 90px; background: transparent; z-index: 100; display: flex; justify-content:center; align-items:center; flex-direction:column; cursor: pointer;}

.menu-toggler-line{
    width: 60%; height:3px; background: black; margin: 0 0 10px 0px !important; position: relative; transition: all .40s ease-out;}

.input-toggler:checked ~ .menu-toggler .menu-toggler-line {top: 5px; translateY:100px;  transform:rotate(45deg);}

.input-toggler:checked ~ .menu-toggler .menu-toggler-line:nth-child(2) {display: none;}

.input-toggler:checked ~ .menu-toggler .menu-toggler-line:nth-child(3) {top: -5px; translateY:10; transform:rotate(135deg);}

.nav{ width: 100%; height: 100%; background:rgba(0,0,0, 0.8);}
.nav ul{ width: 100%;}
.nav ul li{ width: 100%; text-align: center;}
.nav ul li a{display: inline-block; font-size: 36px; color: #fff; text-transform: uppercase;}

.sidebar {position: absolute; top: 0; bottom:0; right:0; left:0; height: 100vh; width: 100vw; background:#000; opacity: 0;

display: flex;
justify-content: center;
align-items: center;

transform: translateX(-100%);

transition: all .40s ease-out;
}

.menu-link {color: white;font-size: 10vmin !important; line-height: 15vmin; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}
.menu-link:hover, .menu-link:focus, .menu-link:active {color: #EE6659;}

.input-toggler:checked ~ .sidebar {transform: translateX(0%); opacity: .98;}

@media (min-width: 1024px) {
    .menu-toggler-line, .menu-toggler,.menu-link, .menu-toggler {
        display:none;
    }

}
@media (max-width: 1024px) {
    .resizable
    {
        display:none;
    }
    .menu-toggler, .menu-toggler-line
    {
        display:flex;
    }
   
}


nav 
{
    display:flex;
    align-items: center;
    color: grey;
    margin-left: 4%;
    margin-top: 3%;
    margin-bottom : 5%;
    backdrop-filter: opacity(20%);
}
i 
{
    color:white;
    transition: transform 600ms;
}
i:hover
{
    transform: rotate(360deg);
}
.nav_i 
{
    width:40px;
    height: 40px;
    background-color:rgb(65, 65, 65);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
#logo_img 
{
    width: 10%;
    margin-right: 10px;
}
#logo 
{
    font-size: 1.2em;
    color: black;
    font-weight: bold;
}
.red
{
    color:  #EE6659
}

button
{
    height: 41px;
    width: 5vw;
    min-width: 50px;
    border: none;
    background-color: black;
    border-radius: 7px;
    align-items: middle;
    color: white;
}
#submit_i, .go i
{
    color: white;
}
header
{
    margin-bottom: 5%;
    text-align: center;
}


#changer_pseudo form
{
    margin: auto;
    margin-top: 5%;
    width: 27vw;
    min-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 3px solid black;
    border-radius: 10px;
    margin-bottom: 2%;
}
input
{
    width: 20vw;
    height: 30px;
    border: none;
    padding-left: 10px;
}




.bagues 
{
    margin-bottom: 6vh !important;
    max-width: 10vw;
    max-height: 10vw;
    margin-left: 3vw !important;
    background-color: grey;
    object-fit: cover;
    min-width: 150px;
    min-height: 150px;
    border-radius: 5px;
}
/*.content_bagues
{
    width: 70%;
    margin:auto !important;
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    flex-wrap: wrap !important;
    border-radius: 5px;
}*/


.drop_bagues_titre 
{
    padding-top: 6vh !important;
    padding-bottom: 6vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2em;
    text-align: center;
    margin:auto;
}






.drop_bagues_titre {
    display: flex;
    align-items: center;
    text-align: center;
  }
  
  .drop_bagues_titre::before,
  .drop_bagues_titre::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
  }
  
  .drop_bagues_titre:not(:empty)::before {
    margin-right: .25em;
  }
  
  .drop_bagues_titre:not(:empty)::after {
    margin-left: .25em;
  }