@font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-Bold.woff') format('woff');
                  font-weight: bold;
                  font-style: normal;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-BoldItalic.woff') format('woff');
                  font-weight: bold;
                  font-style: italic;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-Italic.woff') format('woff');
                  font-weight: normal;
                  font-style: italic;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-Light.woff') format('woff');
                  font-weight: 300;
                  font-style: normal;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-Medium.woff') format('woff');
                  font-weight: 500;
                  font-style: normal;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-LightItalic.woff') format('woff');
                  font-weight: 300;
                  font-style: italic;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-MediumItalic.woff') format('woff');
                  font-weight: 500;
                  font-style: italic;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-Regular.woff') format('woff');
                  font-weight: normal;
                  font-style: normal;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-SemiBold.woff') format('woff');
                  font-weight: 600;
                  font-style: normal;
                  font-display: swap;
              }
              
              @font-face {
                  font-family: 'Spline Sans Mono';
                  src: url('fonts/SplineSansMono-SemiBoldItalic.woff') format('woff');
                  font-weight: 600;
                  font-style: italic;
                  font-display: swap;
              }
              
              
              
              @media (max-width: 1000px) {
                            .flex-container {
                              flex-direction: column;
                            }
                            #webheader { display: none; }
                            #mobheader { display: block; }

                              
                            .moblogo {
                             display: block,
                            }
                              
                                                      }
                          
                    
                          @media (min-width: 1000px) {
                            #webheader { display: block; }
                            #mobheader { display: none; }
                          }
                        
                        @media (min-width: 1568px) {
                          
                          
                          body {
                            background-color: #e8d3b8;
                            }
                            #webheader { display: block; }
                            #mobheader { display: none; }
                          }
                        
                        
  /* "Hide" checkbox -- moves it off screen*/
#menu-btn {
  position: absolute;
  top: -100%;
  left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
  visibility: hidden;
}

.menu {
  display: flex;
    position: relative;
  justify-content: space-between;
  align-items: center;
  max-width: 250px;
  margin-right: 2rem;
}


/* Set width for mobile/smaller screen size. */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 1000px) {
  
  header {
    padding-top: 3vh;
    padding-bottom: 0vh;
    display: grid;
    grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
       z-index: 10;
  }
  
  .moblogo {
    grid-area: title;
    padding: 0px 0px 0px 10px;
    }
    
  .moblogo img {
    width: 230px;
    }
  
  
  
  .menu a {
    text-decoration: none;
    color: black;
  }

  .menu-btn {
    display: none;
  }

  .menu-icon {
    grid-area: hamburger;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 0vh 20px 20px 33vw;
    position: relative;
    user-select: none;
    visibility: visible;
    top: -5vh;
  }

  .navicon {
    background: #333;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
  }

  .navicon:before {
    top: 5px;
  }

  .navicon:after {
    top: -5px;
  }

  .navicon:before, .navicon:after {
    background: #333;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    transition: all .2s ease-out;
  }

  .menu {
    grid-area: nav;
    max-width: unset;
    max-height: 0;
    transition: max-height .2s ease-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .menu a {
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    width: 100%;
    text-align: center;
    color: #452816;
  }

.menu a:hover {
  background-color: #eadfd3;
  }


  .menu-btn:checked ~ .menu {
    max-height: 240px;
  }

  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }

  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:before,
  .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
  }
}
                          
                          body {
                            background-color: #e8d3b8;
                            }
                            
                            
                          .logo {
                            padding:20px;
                          }
                          }

/*

.header {

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.header-flex{
    display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: fixed;
  align-content: space-between;

  
}

.header-nav-wrap {
  display: flex;
    flex-wrap: nowrap;
    flex: 1 0 67%;
    align-items: center;
    }
    
    */
    
    body {
      margin: auto;}

header {
  font-family: 'Spline Sans Mono';
  font-weight:400;
  font-size: 14px;
  padding: 5px;
  }

.container {
  display: flex;
padding: 16px;
  justify-content: space-evenly;
}

.container div {
  line-height:60px;
  text-align:center;
  width:190px;
  height:60px;
}

.container a {
  text-decoration: none;
  color : #452816;
  transition: color 0.2s;
  }
  
.container a:hover {
  color : #ea957a;
  }

.container img {
  max-width:190px;
  margin-top:5px;
}





.rs  {  display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right:15px;
  }
  
.rs a{
 color: #452816; 
}
  
              /* GENERAL BUTTON STYLING */
            header button,
            header button::after {
              -webkit-transition: all 0.3s;
            	-moz-transition: all 0.3s;
              -o-transition: all 0.3s;
            	transition: all 0.3s;
            }
            
           header button {
              font-family: 'Spline Sans Mono';
              font-weight:500;
              background-color: #452816;
              border: 3px solid #452816;
              border-radius: 29px;
              color: #e8d3b8;
              display: block;
              font-size: 11px;
              margin: 1em auto;
              padding: 10px 20px;
              position: relative;
              text-transform: uppercase;
              letter-spacing: 0.2rem ;
              cursor: pointer;
            }
            
            header button::before,
            header button::after {
              background-color: #e8d3b8;
              content: '';
              color: #452816;
              position: absolute;
              z-index:-1;
              
            }
            
            header button:hover {
              color: #452816;
              position:relative;
              z-index: 1;
            }
            
                          
            .btn {
        overflow: hidden;
        
      }
      
      .btn::after {
        /*background-color: #f00;*/
        height: 100%;
        left: -35%;
        top: 0;
        transform: skew(50deg);
        transition-duration: 0.6s;
        transform-origin: top left;
        width: 0;
      }
      
      .btn:hover:after {
        height: 100%;
        width: 135%;
      }
*, html {
    margin:0;
    padding:0;  
}

.accueil {
  height:80vh;
      background: #452816;
      margin: 0;
   padding: 0;
  }

.bgaccueil {      
  display: block;
}

            @media (min-width: 1000px) {
            .blog {
               padding-right:35vw;
               
              }}

.blogpost {
font-family: 'Spline Sans Mono';
padding-left: 2vw;
padding-right: 4vw;
padding-top: 2vw;
padding-bottom: 2vw;
background-color: #e8d3b8;
color: #452816;

}
.titlepost {
  font-size: 120%;
  font-weight: 600;
  padding: 10px;
  }
.contentpost {
  font-size: 100%;
  padding: 10px;
  margin-top: 10px;
  line-height: 1.5;
  }

.archiveblog {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
  }
  
.archivetitle {
  font-size: 120%;
  font-weight: 600;
  padding: 10px;
  }
.archive {
  font-size: 100%;
  padding: 10px; 
   line-height: 1.5;
  }
   
.archive a {
    display : flex;
  text-decoration: none;
  color : #452816;
  transition: color 0.2s;
    }
    
.archive a:hover {
  color: #ea957a;}
  
  
  /* Pour ressources */
.gridressources {
  font-family: 'Spline Sans Mono';
  flex: 1;
  display: grid;
  padding:2em;
  gap: .5em 2em;
  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
  font-size: 1em;
  }
  
  .gridressources a {
    text-decoration:none;
    color : #452816;
  transition: color 0.2s;
    }
    .gridressources a:hover {
  color: #452816;}
  
  .res {
    
    }
    .hidden {
  display: none;
}

.tri button {
 margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: var(--col);
  text-decoration: none;
  border-radius: 10px ;
  transition: 0.5s;}

  .tri button:hover {	
		transform: rotate(6deg);
		background-color: var(--c);
  }
  
.tri button:hover,
.active {
  color: var(--c)
}
.active::before {
  content: "✔ "
}


  /* PORTFOLIO */


.headerimg::before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(232, 211, 184, 1) 84%);
}
  .headerimg {
    width: 100%;
    margin: 0;
    max-height: 62vh;
    }
 
.headerimg img{
    width: 100%;
    margin: 0;
    max-height: 85vh;
    object-fit: cover;
    }
    
.gallery {
  font-family : 'Spline Sans Mono';
  }
.titreprojet {
  position: absolute;
  margin-top: 55vh;
  font-weight: 800;
  font-size: 10vh;
      z-index: 10;
  color: #452816;
  margin-left: 0vw;
  padding : 10px;

  }
.dateprojet {
    margin-left: 2vw;
  padding : 10px;
  color: #452816;
  position:absolute;
  margin-top: 79vh;
  z-index: 10;
  font-size: 4vh;
  
  }
.txtprojet {
  margin-left: 2vw;
  padding : 10px;
  width:45vw;
  position:absolute;
margin-top: 88vh;
line-height: 1.5;
font-size:100%;
z-index: 10;
  }

.slideshow {
    position: absolute;
  top: 100vh;
  display : flex;
  float: right;
  right: 2vw;
  padding-bottom: 10vh;
  z-index: 10;
  }
  
.slideshow img {
 height: 80vh;
 width: 45vw;
 object-fit: cover;
 display : flex;
 
  }