* {
    box-sizing:border-box;
  }
  
header {
  position:fixed;
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items:start;
  padding:.5rem;
  background-color: white;

}
header h3 {
  margin:0 0 0 1rem;
  
}
header a {
  text-decoration:none;
}

nav a {
  text-decoration:none;
  margin-right:1rem;
  font-family:"Montserrat";
}

@media only screen and (min-width:480px){
  header a,
  nav a {
    font-size:1.5rem;
  }
}

.container {
  display:flex;
  width:100%;
  justify-content: center;
  background-color: black;
}

#grid {
  display:grid;
  grid-template-columns: repeat(1,50%);
  grid-template-rows:200px;
  gap:1px;
  background-color:black;
  max-width:1400px;

}
@media only screen and (max-width:920px){
  #grid {
    max-width:100%;
  }
}

@media only screen and (max-width:768px){
  #grid {
    display:flex;
    flex-direction:column;
  }
}

#grid div {
  background-color: white;
  padding:.5rem;
  font-family:"Montserrat";
  font-weight:400;
}
.textbox h2,
.textbox h3,
.textbox h1 {
  font-family:"Montserrat";
  font-weight:500;
}


.title {
  font-family:"Dancing Script","Great Vibes", sans-serif;
}

.box1 {
  grid-column-start:1;
  grid-column-end:3;
  display:flex;
  align-items: center;
  justify-content: center;
  font-family:"Dancing Script","Great Vibes", sans-serif;
  font-size: 2.2rem;
}


.box1-1 {
  color:black;
  display:flex;
  justify-content:center;
  grid-column-start:1;
  grid-column-end:3;
  font-family:"Montserrat";
  font-size:1.8rem;
}

.box2 { /*video*/
  grid-column-start:1;
  grid-column-end:3;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  font-family:"Montserrat";
}
.box2 video {
  width:85%;
  height:auto;
}

.box2-1 {
  grid-column-start:1;
  grid-column-end:3;
}

.buttonbox {
  display:flex;
  justify-content:center;

}
.button {
  text-align: center;
  background-color: black;
  color:white;/*image of gold sheet for text color*/
  margin:0 auto;
  text-decoration:none;
  padding:1rem;
  border-radius:15px;
  font-size: 2rem;
  box-shadow:3px 5px grey;
  flex-grow:0;
}
#topbutton {
  margin:5rem;
}
#topbutton:hover {
  color:goldenrod;
}
#topbutton:active {
  transform: translateY(5px);
  box-shadow:0 0 ;
}
#bottombutton {
  margin-top:5rem ;
  margin-bottom:5rem;
  max-width: 35rem;
  color:black;
  background-color: white;
  box-shadow:3px 5px #111C;
 }
#bottombutton:hover {
  color:goldenrod;
  background-color:black;

}
#bottombutton:active {
  box-shadow:0 0 ;
  transform: translateY(5px);
}

.imagebox {
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:"Montserrat";
}
.box img {
  width:95%;
  height:auto;
  object-fit:cover;
}

.textbox {
  display:flex;
  flex-direction:column;
  align-content:space-around;
  padding:0 10%;
  justify-content: center;
}

.textbox h1,
.imagebox h1 {
  font-size:1.8rem;
  text-align: center;
}

/*below, we use grid to separate out the heading from the h2 elements. Then use flex containter on the h2 elements and spread them vertically*/
#grid .box4 {/*text customization*/
  display:grid;
  grid-template-rows: min-content 1fr;
}
#grid .vert {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  padding:0;
}

/*a better version than above: use grid to set the row size of the heading and have the rest of the rows share the left over space with fr*/
.box5 {
  display:grid;
  grid-template-rows: min-content 1fr 1fr 1fr;
}


.box6 {

}

#grid .box7 {/*Review BOX*/
  grid-column:1 / 3;
  /* border:1px solid black; */
  padding:4rem 5rem;
  align-items: center;
  align-content:flex-start;
}
.box7 img {
  max-width:681px;
  width:100%;
}

#grid .box7-2 {
  grid-column: 1 / 3;
  text-align: center;
  display:flex;
  justify-content: center;
}
#grid .box7-2 .imagebox{
  color:red;
  justify-content: center;
  padding:1rem;
}
#grid .salebox {
  border:3px red solid;
  padding:0;

}
#grid  .invert {
  color:white;
  background-color: red;
  padding:.5rem
}
#grid .box7-2 .textbox {
  padding: 1rem;
}
@media only screen and (max-width:768px){
  .box7-2 {
    flex-direction: column;
}
}

.emphasize {
  text-decoration:none;
  position:relative;
  font-weight:700;
  font-size:1.1em;
}
.emphasize::after{
  position:absolute;
  content:"";
  left:0;
  bottom:5%;
  width:100%;
  height:2px;
  background-color:goldenrod;
}
.underline {
  text-decoration:underline;
}

/* .line-through {
  text-decoration:line-through;
} */
.line-through {
  position:relative;
}
.line-through::after{
  content:"";
  position:absolute;
  left:0;
  bottom:45%;
  width:100%;
  height:2px;
  background-color:red;
}


/*button box*/
#grid .box8 {
  grid-column:1 / 3;
  background-image:url("../media/IMG_0900.JPG");
  background-position:0px 45%;
  background-size:cover;
  opacity:.95;
  min-height:400px;
}
/* .box8 h2 {
  margin:auto;
  background-color:#111C;
  color:white;
  padding:.5rem;

} */
/* #grid .box8::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#FFF9;
} */

.box9 {
  grid-column:1 / 3;
  text-align: center;
}
.center {
  text-align: center;
}

#grid .bold {
  font-weight:600;
}

.box10 {
  height:500px;
  display:flex;
  flex-direction:column;
}
#grid .up {
  background-color: blue;
}
#grid .down{
  background-color: pink;
  flex-grow:1;
  display:flex;
  flex-direction: column;


}
.down h2{
  color:red;
  flex-basis:100%;
}

#grid .box11{
display:grid;
  grid-template-rows: auto 1fr;
}
#grid .up2 {
  background-color: blue;
}
#grid .down2{
  background-color: pink;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}

.center {
  text-align: center;
}