@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=Roboto&display=swap');

body {
    background-color: #FFF9DE;
    font-family: 'Roboto', sans-serif;
    align-items: center; 
    min-height: 100vh; 
    margin: 0; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

header {
    background-color: #591515; 
    font-family: 'Staatliches', sans-serif;
    color: white; 
    min-height: 8vh;
    width: 100vw;
    padding: 0.5vh 0;
    top: 0; 
    left: 0;
    position: sticky;
    z-index: 1000;
    font-variant: small-caps;
}

header H1 {
    font-size: 60px;
    font-weight: 1000;
    letter-spacing: 15px;
    margin: 0 1vw;
}

.naver {
    background-color: #591515; 
    height: 5vh; 
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    box-shadow: 0px 5px 0px rgba(255, 249, 222, 1);
}

.naver a {
    font-size: 20px;
    text-decoration: none;
    color: white;
    letter-spacing: 2px;
    flex: 1;           
    text-align: center;
    line-height: 5vh;  
    margin: 5px;
    box-shadow: 5px 5px 0px rgba(255, 249, 222, 1);
}

.naver a:hover {
    color: white;
    box-shadow: -10px -10px 0px rgba(242, 174, 48, 1);
}

.naverslice {
    background-color: #BF1B1B; 
    width: 100vw;
    height: 5vh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 1%);
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 1));
}

.naverslice:hover {
    background-color: #3FBFA8; 
}

/*.wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 2em auto;
    padding: 2em;
    background: #FFF9DE;
    border: 4px solid #591515;
    box-shadow: 10px 10px 0px #BF1B1B;
    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
  }*/


/*  .wrapper::before { */
  
.wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 2em auto;
    padding: 2em;
    background-color: #FFF9DE;
    /* Square Of Triangles
    background-image: repeating-conic-gradient(
      from 45deg,
      #f7efd0 0deg 45deg,
      transparent 45deg 90deg
    );
    background-size: 40px 40px;*/
    background: 
        repeating-conic-gradient(from 0deg at 15% 40%, white 0deg 1deg, #FFF9DE 1deg 9deg);
    background-color: white;
  

  
    border: 4px solid #BF1B1B;
    box-shadow: 10px 10px 0px #BF1B1B;
}  

.wrapper H1 { 
    display: inline-block;
    padding: 0.5em 1em;
    background: #591515;
    color: white;
    font-family: 'Staatliches', sans-serif;
    font-size: 60px;
    font-weight: 1000;
    letter-spacing: 15px;
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    box-shadow: 5px 5px 0 #BF1B1B;
    margin: 0; 
}

.wrapper::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    border-left: 30px solid transparent;
    border-bottom: 30px solid #BF1B1B;
}

.wrapper::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 20px;
    background: #BF1B1B;
    transform: skewX(20deg);
}