body {
    background: rgb(209, 88, 31);
}

/* .container {
      display: grid;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 100vh;
      grid-template-columns: repeat(12,1fr);
      grid-template-rows: repeat(6,1fr);
      height: 100vw;
    } */

#container {
    /* rotate:-90deg; */
    /* transform-origin: top left; */
    height: 100vh;
    width: 150vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

.candle {
    padding: 30px 0;
    border-left: 1px solid black;
    width: 4vw;
    overflow: hidden;
    transition: width 500ms;
    padding-left: 25px;
    line-height: 5vh;
    overflow-y: scroll;
}

.candle:hover {
    width: 50vw;
    padding: 25px;
    text-align: right;
}


.hidden {
    display: none;
}

.candle:hover .hidden {
    display: block;
}


h1 {
    color: black;
    font-size: 6vw;
    position: relative;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 700;
    height: 5vw;
    margin: 1vw;
}

/* .line-1 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 5;
    grid-row-start: 1;
    transform: translate(-800px, -50px)
  }
  
  .line-2 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 6;
    grid-row-start: 1;
  
  }
  
  .line-3 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 7;
    grid-row-start: 1;
  
  }
  
  .line-4 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 8;
    grid-row-start: 1;
  
  }
  
  .line-5 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 9;
    grid-row-start: 1;
  }
  
  .line-6 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 10;
    grid-row-start: 1;
  }
  
  .line-7 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 11;
    grid-row-start: 1;
  }
  
  .line-8 {
    height: .25vw;
    width: 62vw;
    background: black;
    grid-column-start: 12;
    grid-row-start: 1;
  } */

/* .intro {
    grid-column-start: 9;
    grid-column-end: 7;
    grid-row-start: 2;
    transform: translate(-7vw, -4vw);
    text-align: justify;
    font-family: 'Gothic A1', sans-serif;
    font-size: 1.25vw;
  } */

/* .buttons {
    grid-column-start: 4;
    grid-row-start: 2;
    color: black;
    text-align: left;
    top: 6vw;
    font-family: 'Gothic A1', sans-serif;
    font-size: 1.5vw;
    transform: translate(3vw, -9vw);
    font-weight: bold;
  
  } */

.brand {
    font-family: 'Gothic A1', sans-serif;
    font-size: 7vw;
    font-weight: bold;
    line-height: 11vh;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    color: transparent;
    margin-top: -5vh;

}

.name {
    font-family: 'Gothic A1', sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
    margin-top: 5vh;
}

.price {
    font-family: 'Gothic A1', sans-serif;
    color: rgb(84, 78, 78);
}

.scent {
    font-family: 'Gothic A1', sans-serif;
    color: rgb(84, 78, 78);
}

.size {
    font-family: 'Gothic A1', sans-serif;
    color: rgb(84, 78, 78);
}

.setting {
    font-family: 'Gothic A1', sans-serif;
    color: rgb(84, 78, 78);
}
.description1 {
    font-family: 'Gothic A1', sans-serif;
    line-height: 20px;
    text-align: justify;
    margin-left: 20px;
    color: rgb(0, 0, 0);
    font-size: 1vw;
  }

.description {
    font-family: 'Gothic A1', sans-serif;
    width: 400vh;
    rotate: -90deg;
    /* transform: rotate(-90deg); */
    transform-origin: 1px;
    transform: translate(-100vh, 0vh);
    position: relative;
    /* display: inline-block; */
    white-space: nowrap;
    font-weight: 100;
    /* overflow: hidden; */
}

/* .description:hover {
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
} */

#img {
    width: 35%;
    position: relative;
    margin-top: 10vh;
    transform: translate(1.5vw, 0);
}


@media only screen and (max-width: 600px) {


    #container {
        flex-direction: column;
        width: 100vw;
        height: auto;
    }


    .candle {
        padding: 30px 0;
        border-bottom: 1px solid white;
        border-left: 0;
        height: 10px;
        overflow: hidden;
        transition: height 600ms;
        overflow-x: scroll;
        overflow-y: scroll;
        width: 100vw;
    }

    .candle:hover {
        width: 80vw;
        height: 40vh;
    }

    .hidden {
        display: none;
    }

    .candle:hover .hidden {
        display: block;
    }

    .name {
        font-size: 4vw;
    }
    .description1 {
        margin: 10px;
        line-height: 3vh;
    }

    .brand {
        margin: 0;
    }

    .description {
        rotate: none;
        text-align: start;
    }
}