@import "modern-normalize.css";

:root {
  --yellow: #ffe4e1;
  --white: #ffffff; 
  --black: #004;
  --clr-bg: #222;
  --clr-primary: #f5f5f5;
  --clr-secondary: #075985; 
  --quote-bg-color: #f7f7f7;
  --direction:left;
}

body {
  font-size: 15px;
  margin: 5px 8px 0 8px;
}
/* .wrapper */
.wrapper {
  /* border: 10px solid navy; */
  display: grid;
  grid-template-columns: minmax(10px, 1fr) minmax(auto, 150ch) minmax(10px, 1fr);
  grid-gap: 1rem;

}

.sitemain{
  /* border: 5px dashed hotpink; */
  grid-column: 2 / 3;
  display: grid;
}

button {
  background: var(--yellow);
  border: 0;
  padding: 10px 20px;
  
}

img {
  max-width: 100%;

}

.top {
  /* border: 5px dashed #ffc600; */
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    "hero hero cta1"
    "hero hero cta2"
}

.hero {
  grid-area: hero;
  min-height: 400px;
  background: white url(images/redpen1.jpg);
  background-size: cover;
  background-position: bottom right;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  box-shadow: 
  0px 6px 12px -2px rgba(50, 50, 93, 0.25), 
  0px 3px 7px -3px rgba(0, 0, 0, 0.3);
}

.hero > * {
  background: var(--yellow);
  padding: 5px;
}

.cta {
  background: var(--yellow);
  display: grid;
  align-items: center;
  justify-items: center;
  align-content: center;
  box-shadow: 
  0px 6px 12px -2px rgba(50, 50, 93, 0.25), 
  0px 3px 7px -3px rgba(0, 0, 0, 0.3);
}

.cta p {
  margin: 0;
}

.cta1 {
  grid-area: cta1;
}

.cta2 {
  grid-area: cta2;
}

.price {
  font-size: 60px;
  font-weight: 300;
}

/* Navigation */


.menu ul {
  /* border: 5px dashed red; */
  display: grid;
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  
}

.menu a {
  background: var(--yellow);
  display: block;
  text-decoration: none;
  padding: 10px;
  text-align: center;
  color: var(--black);
  text-transform: uppercase;
  font-size: 16px;
}

[aria-controls="menu-list"] {
  display: none;
}

/* Features! */

.features {
  /* border: 5px dashed darkgreen; */
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.feature {
  background: white;
  padding: 10px;
  border: 1px solid white;
  text-align: center;
  box-shadow: 0 0 4px  rgba(0,0,0,0.1);
}

.feature .icon {
  font-size: 50px;
}
.feature p {
  color: rgba(0,0,0,0.5);
}

/* About Section */

.about {
  background: rgb(236, 236, 236);
  padding:50px;
  display: grid;
  grid-template-columns: 400px 1fr;
  align-items: center;
}

/* Testimonials*/
.testimonials{
  margin: 0 auto;
  /* border: 10px dashed #075985; */
}

.testi-header {
  align-items: center;
  text-align: center;
  font-size: calc(14px + 1.25vw);
  margin-top: 20px;
}

.testi-main {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 10px;
  justify-content: center;
  
}
.testi-items{
  max-width: 350px;
  align-items: stretch;
  display: flex;
 

}

.testi-quote {
  position: relative;
  margin: 40px 0;
  padding: 40px;
  background-color: var(--quote-bg-color);
  border-radius: 16px;
  /* box-shadow: */
  /* 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12) */
  box-shadow: 
  0px 6px 12px -2px rgba(50, 50, 93, 0.25), 
  0px 3px 7px -3px rgba(0, 0, 0, 0.3);
 }

.testi-quote::before {
  content: url("data:image/svg+xml,%3Csvg class='quote-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.56863 4H4.43137C2.56863 4 1 5.6 1 7.5V10.8C1 12.7 2.56863 14.3 4.43137 14.3H6.78431C7.56863 14.3 8.35294 14 9.03922 13.6V15.7C9.03922 17 8.05882 18 6.78431 18H5.21569C4.62745 18 4.23529 18.4 4.23529 19C4.23529 19.6 4.62745 20 5.21569 20H6.78431C9.13725 20 11 18.1 11 15.7V10V7.5C11 5.6 9.43137 4 7.56863 4Z'%3E%3C/path%3E%3Cpath d='M19.6638 4H16.4299C14.5679 4 13 5.6 13 7.5V10.8C13 12.7 14.5679 14.3 16.4299 14.3H18.7818C19.5658 14.3 20.3497 14 21.0357 13.6V15.7C21.0357 17 20.0557 18 18.7818 18H17.2138C16.6259 18 16.2339 18.4 16.2339 19C16.2339 19.6 16.6259 20 17.2138 20H18.7818C21.1337 20 22.9956 18.1 22.9956 15.7V10V7.5C23.0936 5.6 21.5257 4 19.6638 4Z'%3E%3C/path%3E%3C/svg%3E");
  position: absolute;
  top: -10px;
  left: -10px;
  transform: scale(2);
  opacity: 0.1;
}

.testi-quote::after {
  content: url("data:image/svg+xml,%3Csvg class='quote-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.56863 4H4.43137C2.56863 4 1 5.6 1 7.5V10.8C1 12.7 2.56863 14.3 4.43137 14.3H6.78431C7.56863 14.3 8.35294 14 9.03922 13.6V15.7C9.03922 17 8.05882 18 6.78431 18H5.21569C4.62745 18 4.23529 18.4 4.23529 19C4.23529 19.6 4.62745 20 5.21569 20H6.78431C9.13725 20 11 18.1 11 15.7V10V7.5C11 5.6 9.43137 4 7.56863 4Z'%3E%3C/path%3E%3Cpath d='M19.6638 4H16.4299C14.5679 4 13 5.6 13 7.5V10.8C13 12.7 14.5679 14.3 16.4299 14.3H18.7818C19.5658 14.3 20.3497 14 21.0357 13.6V15.7C21.0357 17 20.0557 18 18.7818 18H17.2138C16.6259 18 16.2339 18.4 16.2339 19C16.2339 19.6 16.6259 20 17.2138 20H18.7818C21.1337 20 22.9956 18.1 22.9956 15.7V10V7.5C23.0936 5.6 21.5257 4 19.6638 4Z'%3E%3C/path%3E%3C/svg%3E");
  position: absolute;
  bottom: -10px;
  right: -10px;
  transform: scale(2) rotate(180deg);
  opacity: 0.1;
}
.testi-quote p {
  font-size: calc(14px + 0.25vw);
  margin-bottom: 1em;
}

.author{
  font-size: calc(10px + 0.5vw);
  font-style: italic;
}


/* Gallery! */

.gallery-holder{
  display: grid;
  background-color: beige;
  padding:0 20px 50px 20px;
  margin-top: 10px;
  
}

.publishers-holder{
  display: grid;
  background-color: lightgray;
  padding:0 20px 50px 20px;
  margin-top: 10px;

}
.gallery {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  grid-template-rows: repeat(auto-fit, 120px);
  justify-content: center;
  align-items: center;
  max-height: 600px;
}

.gallery img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  
}

.gallery h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  align-items: center;
}

.gallery h2:before, .gallery h2:after {
  display: block;
  content: '';
  height: 10px;
  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
}

.gallery h2:after {
  --direction: right;
}

@media (max-width: 1000px) {
  .menu {
    order: -1;
    perspective: 800px;
  }
  [aria-controls="menu-list"] {
    display: block;
    margin-bottom: 10px;
  }

  .menu ul {
    max-height: 0;
    overflow: hidden;
    transform: rotateX(90deg);
    transition: all 0.5s;
  }

  [aria-expanded="true"] ~ ul {
    display: grid;
    max-height: 500px;
    transform: rotateX(0);
  }

  [aria-expanded="false"] .close {
    display: none;
  }

  [aria-expanded="true"] .close {
    display: inline-block;
  }

  [aria-expanded="true"] .open {
    display: none;
  }

}

@media (max-width: 700px) {
  .top {
    grid-template-areas:
      "hero hero"
      "cta1 cta2"
  }
  /* About */
  .about {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .top {
    grid-template-areas:
      "hero"
      "cta1"
      "cta2"
  }
}
@media (max-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    grid-template-rows: repeat(auto-fit, 120px);
  }

}

@media (max-width: 880px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-template-rows: repeat(auto-fit, 100px);
  }
}
@media (max-width: 540px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    grid-template-rows: repeat(auto-fit, 100px);
  }
}