* {
  margin : 0;
  padding : 0;
  box-sizing : border-box;
  /* border : red 1px solid; */
  }
  
  body {
  font-family : 'Source Code Pro', monospace;
  /* background-color: #282722; */
  background-color: #201f1b;
  }
  @media (max-width: 3500px) {
    .body {
    font-size: 3em !important;
    }
    }
  hr {
  background-color : rgb(255, 255, 255, 0.033);
  height : 0.25em;
  border : none;
  }
  h1 {
  text-align : center;
  margin : 1em;
  color : #f8f8f8f0;
  }
  a {
  text-decoration : none;
  }
  .logo-codes {
  width : 100px;
  height : 100px;
  margin : 3em;
  margin-top : 5em;
  }
  @media (max-width: 610px) {
  .logo-codes {
  width : 65px;
  height : 65px;
  margin : 0.5em;
  margin-top : 4em;
  margin-bottom : 3em;
  }
  }
/* -------------------------------media queries 4k------------------ */
@media (min-width: 3000px) {
main{
  font-size: 1.5em !important;
}
li a{
  font-size: 3em !important;
}
  body > header > div.header-left > div {
  height : 500px;
  width : 500px;
}
  nav a, .menu-footer a {
  font-size: 3em !important;
  display: inline !important;
  padding: 20px 100px !important;
}
.chat{
  font-size: 2em;
}
.card-content{
  font-size: 2em;
}
.card-title{
  font-size: 3em !important;
}
.card-url{
  font-size: 2em !important;
}
.profil-parent{
  font-size: 2em !important;
  width: 1000px !important;
}
.desinscription{
  font-size: 2em !important;
  width: 600px !important;
}
.form-container{
  font-size: 1.7em !important;
  max-width: 1000px !important;

}
.form-submit{
  font-size: 1.8em !important;
  height: 80px !important;
}
.form-input{
  font-size: 1.1em !important;
  height: 80px !important;
  margin-top: 35px !important;
}
.form-container{
  padding: 50px !important;
}
h1{
  font-size: 3em !important;
}
.icon{
  width: 3em !important;
  margin-left: 50px !important;
  margin-right: 200px !important;

}
.reset-link{
  font-size: 2em !important;
}
.footer-copyright{
  font-size: 2em !important;
}
    }  
    
    
/* -------------------------------header--------------------------- */

header {
  display : flex;
  }
  @media (max-width: 950px) {
  header {
  display : flex;
  flex-wrap : wrap;
  align-items : center;
  justify-content : center;
  text-align : center;
  margin : auto;
  }
  h1 {
  font-size : 2em;
  }
  }
  .header-left {
  margin : auto;
  }
  .logo {
  background-image : url(../image/logocb.png);
  background-size : cover;
  height : 200px;
  width : 200px;
  margin : 2em auto;
  /* margin-left : 2em; */
  /* margin-right : 2em; */
  }
  .logoPhoto {
  height : 250px;
  width : 250px;
  }
  .header-right {
  margin : auto;
  display : block;
  }
  nav a {
  font-size : 1.2em;
  display : block;
  width : 180px;
  padding : 5px 5px;
  box-sizing : border-box;
  filter : drop-shadow(0 0 1px rgba(253, 0, 0, 0.879));
  color : white;
  text-decoration : none;
  /* background :RGB(20, 24, 27); */
  /* background-color: #21211bfc; */
  background-color: #22221d;

  margin : 5px;
  border-radius : 5px;
  text-align : center;
  }
  nav a:hover {
  background-color : rgb(2, 2, 2, 0);
  color : rgb(255, 252, 252);
  }
  .menu {
  display : flex;
  text-decoration : none;
  list-style : none;
  display : inline-block;
  margin : auto;
  }
  @media (max-width: 1250px) {
  .header-right {
  width : 20%;
  
  }
  }
  @media (max-width: 880px) {
  .header-right {
  display : none;
  }
  }
  @media (max-width: 400px) {
  .logoPhoto {
  height : 200px;
  width : 200px;
  }
  .logo {
  height : 200px;
  width : 200px;
  margin-top : 4em;
  }
  }
  @media (max-width: 350px) {
  .logo {
  height : 200px;
  width : 200px;
  }
  }


  .inner-elem2 {
    height : 50%;
    width: 70%;
    padding : 10px;
    color : rgb(248, 248, 248);
    margin : auto;
    margin-top : 20px;
    margin-bottom : 20px;
    }
  @media (max-width: 500px) {
  
  .inner-elem2 {
    
    width: 100%;
   
    }
  }
  

/* -------------------------------menu burger--------------------------- */

  #menuToggle {
  display : block;
  position : fixed;
  top : 30px;
  left : 30px;
  z-index : 1;
  user-select : none;
  }
  #menuToggle a {
  text-decoration : none;
  filter : drop-shadow(0 0 2px rgb(253, 0, 0));
  color : white;
  transition : color 0.3s ease;
  width: 150px;
  font-size: 1em;
  margin-bottom: -5px;
  margin-left: 30px;
  
  }
  #menuToggle a:hover {
  color : rgb(255, 255, 255);
  }
  #menuToggle input {
  display : block;
  width : 40px;
  height : 32px;
  position : absolute;
  top : -7px;
  left : -5px;
  cursor : pointer;
  opacity : 0;
  z-index : 2;
  }
  #menuToggle span {
  display : block;
  width : 33px;
  height : 4px;
  margin-bottom : 5px;
  position : relative;
  background : #ff0000;
  border-radius : 3px;
  z-index : 1;
  transform-origin : 4px 0;
  transition : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
  transform-origin : 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
  transform-origin : 0% 100%;
  }
  #menuToggle input:checked ~ span {
  opacity : 1;
  transform : rotate(45deg) translate(-2px,-1px);
  background : #ff0000;
  }
  #menuToggle input:checked ~ span:nth-last-child(3) {
  opacity : 0;
  transform : rotate(0deg) scale(0.2,0.2);
  }
  #menuToggle input:checked ~ span:nth-last-child(2) {
  transform : rotate(-45deg) translate(0,-1px);
  }
  #menu {
  position : absolute;
  width : 300px;
  margin : -100px 0 0 -50px;
  padding : 50px;
  padding-top : 125px;
  list-style-type : none;
  background-color : #ff000055;
  border-radius : 15px;
  transform-origin : 0% 0%;
  transform : translate(-100%,0);
  transition : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  #menu li {
  padding : 10px 0;
  font-size : 22px;
  }
  #menuToggle input:checked ~ ul {
  transform : none;
  }
  @media (min-width: 880px) {
  #menuToggle {
  display : none;
  }
  }

/* --------------------------------------general--------------------- */
  input, textarea {
  font-size : 20px;
  font-family : 'Montserrat', sans-serif;
  font-weight : 100;
  }
  .error {
  color : yellow;
  text-align : center;
  margin : 20px;
  }
  .reset-link {
  color : yellow;
  text-decoration : none;
  font-size : 1em;
  font-family : 'Source Code Pro', monospace;
  font-weight : 100;
  text-align : center;
  }
  .container {
    display : flex;
    flex-direction : column;
    align-items : center;
    text-align : center;
    }
/* -------------------------------form------------------------------ */

  .form-container {
  max-width : 500px;
  margin : 50px auto;
  border-radius : 45px;
  padding : 30px;
  /* border : #ffffff solid 0.5px; */
  filter : drop-shadow(0 0 3px rgb(255, 255, 255));
  background-color : #000000;
  }
  .form-label {
  text-shadow : 0 0 2px #ff0000;
  color : white;
  margin-bottom : 20px;
  }
  .form-input {
  height : 50px;
  width : 100%;
  border-radius : 5px;
  display : flex;
  align-items : center;
  justify-content : space-around;
  position : relative;
  margin-top : 5px;
  margin-bottom : 0.5em;
  filter : drop-shadow(0 0 3px rgb(255, 255, 255));
  }
  .form-message {
  height : 100px;
  width : 100%;
  border-radius : 5px;
  margin-top : 5px;
  filter : drop-shadow(0 0 4px rgb(255, 255, 255));
  }
  textarea {
  padding : 0.2em;
  }
  .photo-label {
  cursor : pointer;
  font-size : 1.3rem;
  padding : 10px;
  border : none;
  border-radius : 5px;
  margin-top : 50px;
  background-color : #000000;
  color : rgb(255, 255, 255);
  font-family : 'Source Code Pro', monospace;
  border : red solid 1px;
  }
  .photo-label:hover {
  background-color : #000000;
  color : red;
  border : none;
  }
  .photo-input {
  display : none;
  }
  .form-submit {
  width : 100%;
  height : 50px;
  font-size : 1.3rem;
  padding : 5px;
  border-radius : 10px;
  margin-top : 20px;
  margin-bottom : -20px;
  background-color : #000000;
  color : red;
  font-family : 'Source Code Pro', monospace;
  }
  .form-submit:hover {
  background-color : #000000;
  color : rgb(255, 252, 252);
  cursor : pointer;
  border : red solid 1px;
  }
  @media (max-width: 550px) {
  .form-container {
  margin-left : 2.5em;
  margin-right : 2.5em;
  padding : 30px;
  }
  }
  @media (max-width: 350px) {
  .form-container {
  margin-left : 1.5em;
  margin-right : 1.5em;
  padding : 30px;
  }
  }


/* ---------------------------------profil--------------------------- */
  .profil-parent {
  filter : drop-shadow(0 0 4px rgb(255, 255, 255));
  width : 300px;
  background-color : #000000;
  margin : auto;
  margin-bottom : 5em;
  padding : 15px;
  border-radius : 58px;
  }
  .profil {
  display : flex;
  justify-content : center;
  margin : 2em;
  color : rgb(255, 255, 255);
  padding-left : 3em;
  padding-right : 3em;
  }
  .desinscription {
  background : none;
  color : yellow;
  display : flex;
  justify-content : center;
  margin : auto;
  width : 200px;
  border: none;
  }
  .desinscription:hover {
  color : red;
  border : red solid 1px;
  }
  .photo-profil {
  width : 50px;
  border-radius : 20%;
  filter : drop-shadow(0 0 1px rgb(255, 255, 255));
  }
  #photo-profil {
  width : 200px;
  border-radius : 20%;
  }

/* -------------------------------home intro--------------------------- */

.intro {
  color : #f8f8f8e8;
  width : 80%;
  margin : 1em;
  font-size : 1.5em;
  font-family : 'montserrat', sans-serif;
  word-spacing : 0.3em;
  line-height : 1.3em;
  text-align: center;
  margin: auto;
  
  }
  @media (max-width: 950px) {
  .intro {
  width : 75%;
  }
  }
  @media (max-width: 500px) {
    .intro p {
    width : 100%;
    }
    }

/* --------------------------------------article---------------------------------------- */

  .code-parent {
  display : flex;
  flex-direction : column;
  }
  .categorie-container {
  margin : auto;
  width : 100%;
  display : flex;
  flex-wrap : wrap;
  justify-content : center;
  }

  .categorie {
  font-size : 1.2em;
  display : block;
  width : 180px;
  padding : 5px 5px;
  box-sizing : border-box;
  filter : drop-shadow(0 0 1px rgb(253, 0, 0));
  color : white;
  text-decoration : none;
  background : rgba(19, 16, 0, 0.371);
  margin : 1em;
  border-radius : 5px;
  margin : 2em 0.3em 2em 0.3em;
  text-align : center;
  font-family : 'Source Code Pro', monospace;
  }
  
  @media (max-width: 950px) {
  .categorie {
   flex-direction: column;
   width: 100%;
   margin-left: 40%;
    margin-right: 40%;
    margin : 0.2em 40% 0.2em 40%;
  }
  .code-parent {
  display : flex;
  flex-wrap : wrap;
  flex-direction : column;
  }
  }
  .card-align {
  display : flex;
  flex-wrap : wrap;
  justify-content : center;
  }
  .card-parent {
  filter : drop-shadow(0 0 4px rgb(255, 255, 255));
  width : 25%;
  background-color : #000000;
  margin: 2%;
  margin-bottom : 3em;
  margin-top : 3em;
  padding : 15px;
  border-radius : 58px;
  }
  .card-img {
  width : 100%;
  border-radius : 10px;
  padding : 2em 1em 0 1em;
  }
  .card-content {
  padding : 20px 16px;
  }
  .card-content-code {
  padding : 20px 16px;
  display : flex;
  justify-content : center;
  align-items : center;
  }
  .card-title {
  font-size : 1.3em;
  margin : 0.25em;
  margin-top : 70px;
  text-align : center;
  margin : auto;
  color : white;
  text-shadow : 0 0 4px rgb(255, 0, 0);
  }
  .card-article {
  margin-bottom : 1em;
  text-align : left;
  font-family : 'Montserrat', sans-serif;
  word-spacing : 0.2em;
  overflow-wrap : break-word;
  color : #f8f8f8e8;
  margin-bottom : 30px;
  }
  .url-parent {
  display : flex;
  justify-content : center;
  }
  .card-url {
  cursor : pointer;
  font-size : 1.3rem;
  padding : 5px 35px 5px 35px;
  border : none;
  border-radius : 5px;
  /* margin-top : 1em; */
  background-color : #000000;
  color : rgb(255, 255, 255);
  font-family : 'Source Code Pro', monospace;
  border : red solid 1px;
  }
  .card-url:hover {
  background-color : #000000;
  color : red;
  border : black solid 1px;
  }
  @media (max-width: 950px) {
  .card-parent {
  width : 55%;
  height: 50%;
  margin-bottom : 5em;
  padding : 3px;
  margin : auto;
  margin-top : 3em;
  }
  .card-title {
  font-size : 1em;
  margin : 1em;
  }
  .card-article {
  margin-top : -1em;
  }
  }
  @media (max-width: 500px) {
  .card-parent {
  width : 80%;
  height: 70%;
  margin : auto;
  margin-bottom : 1em;
  margin-top: 1em;
  padding : 3px;
  }
  .card-url {
    font-size : 1.1rem;
    padding : 5px 25px 5px 25px;
    border : none;
    border-radius : 5px;
    margin-top : 0em;
    background-color : #000000;
    color : rgb(255, 255, 255);
    font-family : 'Source Code Pro', monospace;
    border : red solid 1px;
    }
  }
  .article-parent {
  margin : auto;
  justify-content : center;
  align-items : center;
  filter : drop-shadow(0 0 4px rgb(255, 255, 255));
  width : 30%;
  background-color : #000000;
  margin-bottom : 3em;
  margin-top : 3em;
  padding : 15px;
  border-radius : 58px;
  }
  @media (max-width: 950px) {
  .article-parent {
  width : 50%;
  margin-bottom : 5em;
  padding : 3px;
  margin : auto;
  margin-top : 3em;
  }
  }
  @media (max-width: 500px) {
  .article-parent {
  width : 90%;
  margin : auto;
  padding : 3px;
  margin-top: 2em;
  }
}

/* -------------------------------------tchat----------------------------- */

  .chat {
  margin : auto;
  width : 65%;
  background-color: #000000;
  padding: 2em;
  border-radius: 10px;
  }
  .chat-title {
  font-size : 1.5em;
  text-align : center;
  margin : auto;
  margin-bottom : 1em;
  margin-top : 3em;
  color : #fffefe;
  text-shadow : 0 0 4px rgb(255, 0, 0);
  }
  .chat-parent {
  filter : drop-shadow(0 0 2px rgba(255, 255, 255, 0.637));
  width : 100%;
  height : 10em;
  background-color: #21201b;
  padding : 10px;
  border-radius : 5px;
  margin : auto;
  margin-bottom : 2em;
  }
  .chat-photo {
  position : absolute;
  top : 7%;
  left : 2%;
  }
  chat-photo-profil {
  border-radius : 50%;
  margin-left : 10px;
  margin-top : 10px;
  }
  .chat-pseudo-form {
  font-size : 1em;
  color : rgb(255, 255, 255);
  }
  .chat-pseudo {
  width : 50%;
  text-align : left;
  font-size : 0.75em;
  color : rgb(255, 0, 0);
  margin-left: 10px;
  }
  .chat-date {
  position : absolute;
  margin-right : -100px;
  width : 50%;
  text-align : right;
  font-size : 0.50em;
  color : rgb(255, 255, 255);
  margin-top : 5px;
  }
  .chat-message {
  position : relative;
  top : 10%;
  font-family : 'Montserrat', sans-serif;
  overflow-wrap : break-word;
  color : #ffffffe8;
  margin-bottom : 10px;
  margin-top: 10px;
  padding : 10px;
  width : 100%;
  height : 100%;
  text-align: left;
  }
  .pagination {
  color : red;
  text-decoration : none;
  padding : 5px;
  margin : 5px;
  border-radius : 10px;
  }
  @media (max-width: 1050px) {
  .chat {
  width : 50%;
  }
  .chat-message {
    font-size : 0.75em;
    }
  }
  @media (max-width: 500px) {
  .chat {
  width : 80%;
  }
  .chat-pseudo {
  font-size : 0.75em;
  margin-top : 5px;
  }
  .chat-message {
    font-size : 0.65em;
    }
  photo-profil {
  border-radius : 100%;
  width : 30px;
  height : 30px;
  }
  }
  /* -------------------------------------tuto------------------------------------- */


  .intro h2 {
  margin-bottom : 1em;
  color : rgb(248, 248, 248);
  font-family : 'Source Code Pro', monospace;
  }
  
  
  .inner-elem {
  height : 50%;
  width : 45%;
  padding : 10px;
  color : rgb(248, 248, 248);
  margin : auto;
  margin-top : 20px;
  margin-bottom : 20px;
  }
  
  .flex-wrap {
  flex-wrap : wrap;
  align-items : center;
  display : flex;
  }
  .articleTitle {
  text-align : center;
  margin : 1em;
  font-family : 'Source Code Pro', monospace;
  }
  .articleContent {
    color : #f8f8f8e8;
    margin : 1em;
    font-size : 1.5em;
    font-family : 'montserrat', sans-serif;
    word-spacing : 0.3em;
    text-align: left;
    padding: 2em;
    border-radius: 5px;
    border: solid rgba(255, 0, 0, 0.577) 1px;
  }
  .articleImg {
  height : 100%;
  width : 100%;
  filter : drop-shadow(0 0 4px rgba(255, 255, 255, 0.271));
  border-radius: 5px;
  }
  
  .tuto-links{
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 1em;
    color: rgb(209, 209, 209);
    width: 205px;
  }
  p a{
    color: rgba(217, 9, 9, 0.922);
    text-decoration: none;
    font-size: 1.1em;
  }
  @media (max-width: 950px) {
  .inner-elem {
  height : 45%;
  width : 90%;
  padding : 10px;
  margin : auto;
  margin-top : 20px;
  margin-bottom : 20px;
  }
  }
  @media (max-width: 450px) {
    .inner-elem {
    height : 45%;
    width : 90%;
    padding : 0px;
    margin : auto;
    margin-top : 10px;
    margin-bottom : 10px;
    font-size: 0.75em;
    }
    }
  /* -------------------------------------scroll top btn------------------------------------- */

  #topBtn {
  float : right;
  height : 35px;
  width : 35px;
  margin-right : 2em;
  margin-top : -1.5em;
  background : rgb(255, 255, 255, 0.068);
  border : none;
  outline : none;
  color : white;
  cursor : pointer;
  border-radius : 3px;
  }
  @media (max-width: 950px) {
  #topBtn {
  height : 30px;
  width : 30px;
  margin-right : 2em;
  position : fixed;
  bottom : 20px;
  right : -15px;
  font-size : 18px;
  border : none;
  outline : none;
  background : rgb(255, 255, 255, 0.068);
  color : white;
  cursor : pointer;
  border-radius : 4px;
  }
  }

  /* -------------------------------------footer------------------------------------- */

  footer a {
  text-decoration : none;
  }
  footer {
  text-align : center;
  text-transform : uppercase;
  padding-top : 30px;
  }
  footer li {
  list-style : none;
  margin : 10px;
  display : inline-block;
  }
  
.icons {
  display : inline-block;
  position : relative;
  }
  /* incon in center */
  .icon {
 width: 50px;
  }

  .icons :hover {
  animation : myAnim 1.5s 0s ease 1 normal forwards;
  }
  @keyframes myAnim {
  0% {
  animation : myAnim 1.5s 0s ease 1 normal forwards;
  }
  30% {
  transform : scale3d(1.25,0.75,1);
  }
  40% {
  transform : scale3d(0.75,1.25,1);
  }
  50% {
  transform : scale3d(1.15,0.85,1);
  }
  65% {
  transform : scale3d(0.95,1.05,1);
  }
  75% {
  transform : scale3d(1.05,0.95,1);
  }
  100% {
  transform : scale3d(1,1,1);
  }
  }
  .menu-footer a {
  font-size : 1em;
  display : block;
  width : 150px;
  padding : 5px 5px;
  box-sizing : border-box;
  color : #f8f8f8e8;
  text-decoration : none;
  margin : 1em;
  margin : 5px;
  text-align : center;
  }
  .menu-footer a:hover {
  filter : drop-shadow(0 0 1px rgb(253, 0, 0));
  border-radius : 5px;
  }
  .footer-copyright {
  color : #f8f8f8e8;
  padding : 15px;
  margin-top : 30px;
  text-transform : capitalize;
  }
  
  /* -------------------------------dark-mode-button------------------------------ */
  .show-hide-el {
    position : relative;
    height : 20px;
    color : rgb(255, 255, 255);
    }
    .show-hide-el {
    position : absolute;
    top : 24%;
    right : 5%;
    }
    .show-hide-icon {
    position : relative;
    }
    .show-hide-icon::after {
    content : "";
    width : 28px;
    height : 2px;
    position : absolute;
    top : -7px;
    left : 4px;
    background-color : #132b50;
    transform : rotate(45deg);
    transform-origin : top left;
    border-top : 2px solid #fff;
    border-radius : 1px;
    transition : width 0.2s ease-in-out;
    }
    .toggle {
    position : absolute;
    width : 24px;
    height : 24px;
    left : 0;
    opacity : 0;
    cursor : pointer;
    z-index : 1;
    }
    .toggle:checked + .show-hide-icon::after {
    width : 0;
    }

  /* -------------------------------------------------dark-mode---------------------------------------------- */

  .dark-mode {
    background : rgb(73, 73, 196);
    background : radial-gradient(circle, rgb(73, 73, 196, 0.9) 50%, rgb(25, 25, 112, 0.9) 100%, rgb(83, 82, 186, 0.9) 100%);
    }
    .dark-mode main {
      background: rgb(106,147,203);
  background: linear-gradient(90deg, rgba(106,147,203,1) 67%, rgba(164,191,239,1) 100%);
    }
    
  .dark-mode h1 {
    filter : drop-shadow(0 0 2px rgb(73, 73, 196));
    }
    .dark-mode .logo {
    background-image : url(../image/code_box_logo\ 2.png);
    }
    .dark-mode a {
    color : rgb(73, 73, 196);
    background-color : rgb(255, 255, 255);
    }
    .dark-mode .icons a {
    background-color : #383881;
    }
    .dark-mode .menu-footer a {
    color : rgb(73, 73, 196);
    background-color : rgb(255, 255, 255);
    filter : drop-shadow(0 0 2px rgb(255, 215, 0));
    border-radius : 10px;
    }
    .dark-mode .menu-footer a:hover {
    filter : drop-shadow(0 0 4px rgb(255, 215, 0));
    }
    .dark-mode .form-container {
    background : rgb(73, 73, 196);
    }
    .dark-mode .photo-label {
    cursor : pointer;
    font-size : 1.3rem;
    padding : 10px;
    border : none;
    border-radius : 5px;
    margin-top : 50px;
    background-color : rgb(73, 73, 196);
    color : rgb(255, 255, 255);
    font-family : 'Source Code Pro', monospace;
    border : yellow solid 1px;
    }
    .dark-mode .photo-label:hover {
    background-color : rgb(114, 153, 221);
    color : rgb(73, 73, 196);
    border : rgb(73, 73, 196) solid 2px;
    }
    .dark-mode .form-submit {
    color : rgb(255, 255, 255);
    background : rgb(73, 73, 196);
    border : yellow solid 1px;
    }
    .dark-mode .form-submit:hover {
    background-color : rgb(114, 153, 221);
    color : #383881;
    border : rgb(114, 153, 221) solid 1px;
    }
    .dark-mode .categorie {
    background-color : rgb(73, 73, 196);
    filter : drop-shadow(0 0 1px rgb(253, 215, 0));
    color : white;
    font-size : 1.2em;
    display : block;
    width : 180px;
    padding : 5px 5px;
    box-sizing : border-box;
    text-decoration : none;
    margin : 1em;
    border-radius : 5px;
    margin : 2em 0.2em 2em 0.2em;
    text-align : center;
    border : #F7E018;
    }
    @media (max-width: 950px) {
    .dark-mode .categorie {
      flex-direction: column;
      margin-left: 40%;
      margin-right: 40%;
      margin : 0.2em 40% 0.2em 40%;
    }
    }
    .dark-mode .article-parent {
    background-color : rgb(73, 73, 196);
    margin-top : 3em;
    }
    .dark-mode .chat {
    background-color : rgb(73, 73, 196);
      }
    .dark-mode .chat-parent {
    background-color : rgb(114, 153, 221);
    margin-top : 3em;
    border : yellow solid 1px;
    }
    .dark-mode .chat-pseudo {
    color : yellow;
    }
    .dark-mode .chat-message {
    color : white;
    }
    .dark-mode .chat-date {
    color : white;
    }
    .dark-mode .card-parent {
    background-color : rgb(73, 73, 196);
    margin-top : 3em;
    }
    .dark-mode .card-url {
    cursor : pointer;
    font-size : 1.3rem;
    padding : 10px;
    border : none;
    border-radius : 5px;
    margin-top : 1em;
    background-color : rgb(73, 73, 196);
    color : rgb(255, 255, 255);
    font-family : 'Source Code Pro', monospace;
    border : yellow solid 1px;
    }
    .dark-mode .card-url:hover {
    background-color : rgb(114, 153, 221);
    color : rgb(73, 73, 196);
    border : rgb(73, 73, 196) solid 1px;
    }
    .dark-mode .card-title {
    filter : drop-shadow(0 0 1px rgb(255, 215, 0));
    text-shadow : 0 0 1px rgb(255, 0, 0);
    }
    .dark-mode .profil-parent {
    background-color : rgb(73, 73, 196);
    }
    .dark-mode #menu {
    background-color : rgb(255, 217, 0, 0.403);
    border-radius : 15px;
    }
    .dark-mode #menuToggle a {
    background-color : rgb(73, 73, 196);
    color : white;
    filter : drop-shadow(0 0 2px rgb(255, 215, 0));
    }
    .dark-mode #menuToggle input:checked ~ span {
    color : rgb(73, 73, 196);
    background-color : rgb(255, 255, 255);
    filter : drop-shadow(0 0 2px rgb(255, 215, 0));
    }
    .dark-mode #menuToggle span {
    color : rgb(73, 73, 196);
    background-color : rgb(255, 255, 255);
    filter : drop-shadow(0 0 2px rgb(255, 215, 0));
    }
  
  /* ---------------switch-darkmode------------------ */
  
    .switch {
    display : block;
    position : absolute;
    top : 5%;
    right : 3%;
    width : 35px;
    height : 20px;
    cursor : pointer;
    overflow : hidden;
    }
    .switch input {
    position : absolute;
    width : 0;
    height : 0;
    }
    .switch input + span {
    position : absolute;
    top : 0;
    bottom : 0;
    left : 0;
    right : 0;
    background : rgb(73, 73, 196);
    border-radius : 20px;
    }
    .switch input:checked + span {
    background : #000000;
    }
    .switch input + span:before {
    content : "";
    display : inline-block;
    position : absolute;
    top : 50%;
    left : 4px;
    width : 16px;
    height : 16px;
    background : white;
    border-radius : 50%;
    transform : translateY(-50%);
    transition : all 0.3s;
    }
    .switch input:checked + span:before {
    left : 17px;
    }
    @media (max-width: 330px) {
    .switch {
    display : block;
    position : absolute;
    top : 5%;
    right : 1%;
    width : 35px;
    height : 20px;
    cursor : pointer;
    overflow : hidden;
    }
    }