:root {
  --bright: #F2EFE5; 
  --mid: #C0C1B4; 
  --light: #ECE9DF; 
  --dlight:#C1C5BC;
  --lred: #C98184; 
  --dred: #B24D42; 
  --yellow: #F1AC28; 
  --brown: #713C30; 
  --black: #2C2C2C;
  --lgreen: #BFE9DD;
  --dgreen: #1A4D3E;
}


* {
    margin: 0px;
    padding: 0px;
    border: none;

}

  /* CONTAINERS */
  .header {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 15vw;
    margin-left: 2vw;
    color: #ffffff;
    justify-content: flex-start;
  }
  .outer-container{
    margin: 2% 0 5% 0;
    display: flex;
    justify-content: center;
}
  .container-structure{
    display: flex;
    width: 50%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.feature-list{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width:130%;
}

.midfi-container{
  display: flex;
  flex-direction: row;
  width: 130%;
}

.features{
  display: flex;
  flex-direction: column; 
  background-color:var(--bright);
  box-shadow: inset 0.1vw 0.1vw 0.4vw rgba(0, 0, 0, 0.3);
  margin: 3% 1% 0 1%;
  width: 75%;
  padding: 1%;
  justify-content: flex-start;
}


/* POSITIONS */
.sticky{
  position: sticky;
  top:0; 
  width: 100%;
  height: 100vh; 
}

  /* FONT STYLES */
  .title {
    display: flex;
    justify-content: center;

    background-color: #4d0700;
    z-index: 2;
    font-size: 7vw;
    letter-spacing: 1.6px;

    color: transparent;
    text-shadow: 0px 2px 3px rgb(225 218 218 / 86%);
            background-clip: text;

    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
  }


  .pop-text2 {
    position: relative;
    z-index: 2;
    font-size: 3.5vw;
    text-align: center;
    padding: 1%;

    background-color: var(--dgreen);
    color: transparent;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
      -moz-background-clip: text;
            background-clip: text;

    letter-spacing: 1.6px;
    font-family: "DM Serif Display", serif;
    font-weight: 800; 
  }

  .pop-text {
    z-index: 2;
    font-size: 3vw;
    padding: 2% 0 0 0;

    background-color: var(--dgreen);
    color: transparent;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
            background-clip: text;

    letter-spacing: 1.6px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;  
  }

  .title-small-text{
    position: relative;
    letter-spacing: 0.05vw;
    color: var(--brown);

    font-size: 1.7vw;

    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  .small-text{
    position: relative;
    letter-spacing: 0.05vw;
    padding: 1% 0 1% 0;
    color: var(--black);
    font-size: 0.8vw;
    font-family: 'Courier New', Courier, monospace;
  }

  .decorative-small-text{
    position: relative;
    letter-spacing: 0.05vw;
    color: var(--black);

    font-size: 1vw;
    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  ul {
    list-style-position: inside;
    margin: 0 0 0 1%;
  }

/* BACKGROUND COSMETICS */
  .insetcontainer {
    background-color:var(--bright);
    box-shadow: inset 0.1vw 0.1vw 0.4vw rgba(0, 0, 0, 0.3);

    padding: 5% 0% 5% 0%;
    margin: 0 10% 6% 10%;
  }

  .line {
    position: relative;
    width: 100%;
    height: 0.02vw;
    background-color: var(--dred); 
    margin-top: -1%;
  }

  .line-img{
    position: relative;
    width: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .background-shape{
    height: 4vh;
  }

  .vid{
    display: flex;
    justify-content: center;
    margin-bottom: 3%;
}


  /* .background-shape{
    background-color: #000;
    height: 18vh;
    --mask:
    radial-gradient(7.62vw at 50% 10.75vw,#000 99%,#0000 101%) calc(50% - 10vw) 0/20vw 51% repeat-x,
    radial-gradient(7.62vw at 50% -5.75vw,#0000 99%,#000 101%) 50% 5vw/20vw calc(51% - 5vw) repeat-x,
    radial-gradient(7.62vw at 50% calc(100% - 10.75vw),#000 99%,#0000 101%) calc(50% - 10vw) 100%/20vw 51% repeat-x,
    radial-gradient(7.62vw at 50% calc(100% + 5.75vw),#0000 99%,#000 101%) 50% calc(100% - 5vw)/20vw calc(51% - 5vw) repeat-x;
          mask: var(--mask);

} */

.background-img{
    width: 100%;
    z-index: -3;
}

.arrows{
  color: var(--black);
  scale: 200%;

}