:root{ 
--bgc: #DBD9D0;
--bgf: #353535;
--ac1:#613e3f;
--ac2:#d28184;
--ac3:#630407;
}


body {
  margin: 0;
  padding: 0;
  }

.background{
width: 100vw;
height: 100vh;
opacity: 1;
background: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 4px, var(--bgf) 4px, var(--bgf) 5px, transparent 5px, transparent 10px);
background-color: var(--bgc);
z-index: -1;
position: fixed

}


.wrapper {
  width: 900px;
  margin: 0 auto;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
.title, .links, .footer {
  text-align: center;
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
  content: "「";
  }
  
.links li:after {
  content: "」 ∷";
  }
  
.links .last:after {
  content: "」";
  }
  
.links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
/*Basic box code that is used for all content boxes on the page.*/
.box {
  border: 3px solid var(--ac1);
  background-color: var(--bgc);
  box-shadow: 6px 6px 0 var(--ac1)
  }

      /* these two are my header system */
      .box-header {
        
        background-image: linear-gradient(to right, var(--ac3), var(--bgf));
        border-bottom: 3px solid var(--ac1)
    
      }

      .side-header {
      
      background-image: linear-gradient(to right, var(--bgf), var(--ac3));
      border-bottom: 3px solid var(--ac1)
    
      }


      .h-text{
        padding: 2px; 
        margin-left: 1em ;
        font-family: "Libertinus Mono", monospace;
        font-weight: 400;
        font-style: normal;
        color: rgb(255, 255, 255); 
        text-shadow: 1px 1px 1px black; 
        text-align: left;
        font-size: 1.1em;
        }



/*       these are my dividers */    
      .divider {
      width: auto; 
      height: 15px; 
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 15px;
      margin-bottom: 15px;
      background-image: linear-gradient(to left, var(--ac3), var(--ac2));
    }

    .divider-text {
      font-size: 1.7em; 
      font-style: italic; 
      font-weight: bolder; 
      font-family: MS PGothic; 
      color: var(--bgf);
      position: relative; 
      bottom: 10px;
    }

.box-basic {
 border: 3px solid var(--ac1);
  background-color: var(--bgc);
  padding: 0.5em 1em;
 
  }


/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {
  margin: 0.5em 1em;
  padding-bottom: 1em;
  }
  
/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  }
  
/*Container for the sidebar image.*/
.sidebar-image {
  border: 3px solid var(--ac1);
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 2;
  column-gap: 25px;
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
  }
  
.single-column {
  columns: 1;
  }
  
.footer {
  margin-bottom: 25px;
  }
  
@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }



 /* par défaut */
 a:link{
 color: var(--ac3);
}

/* quand tu passe la souris dessus */
a:hover{
 color: var(--ac2);
 filter: brightness(110%) drop-shadow(0 0 1rem var(--ac2));
}

/* quand lien déjà visité */
a:visited{
 color: var(--ac1);
filter: brightness(50%);
}

/* quand lien actif */
a:active{
color: var(--bgf);
filter: brightness(200%) drop-shadow(0 0 2rem var(--bgf));
} 


.box-basic, .box, .box-header, .inner h1{
  font-family: "Libertinus Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.inner p{
  font-family: "Libertinus Math", system-ui;
  font-weight: 400;
  font-style: normal;
  margin-bottom: -10pt;
}

.inner li{
  font-family: "Libertinus Math", system-ui;
  font-weight: 400;
  font-style: normal;
  margin-left: 0.5em;
}

.box-basic li{
  font-family: "lato";
}

.inner h4{ font-family: "Libertinus Math", system-ui;
  font-weight: 600;
  font-style: normal;
  color: var(--ac3);
}