* {
  margin: 0;
  box-sizing: border-box;
}

header {
  font-family: "Space Grotesk", sans-serif;
  font-style: normal;
}

main {
  font-family: "Inter", sans-serif;
  font-style: normal;
}

body {
  display: grid;
  grid-template-rows: 100px auto auto auto 100px;
  min-height: 100vh;
  grid-template-areas: "header" "best-apps" "recent-books" "authors" "footer";
  min-height: 100%;
  background-image: url(gradient.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

header {
  grid-area: header;
  display: flex;
  justify-content: center;
}

#best-apps-section {
  grid-area: best-apps;
}

h1 {
  color: blue;
}

#all_the_cards {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  max-width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 50px;
  width: 100%;
  border-radius: 19px;
  background: #086375;
  box-shadow:
    -19px -19px 38px #878787,
    19px 19px 38px #ffffff;
}

img {
  max-width: 100%;
  object-fit: cover;
  margin-bottom: 3rem;
}

a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}

a:hover{
  color: white;
}

#recent-books-section {
  grid-area: recent-books;
  width: 100vw;
}

#gallery {
  column-count: 4;
  column-gap: 2rem;
  border: solid #d9594c 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.gallerypic {
  margin-bottom: 1rem;
  border-radius: 1rem;
  border: solid #d9594c 0.5rem;
}

.gallerypic:hover {
  transform: scale(1.05);
}

#sunrise {
  margin-top: 3rem;
}

#iger {
  margin-top: 3rem;
}

#last-murder {
  margin-top: 1rem;
}

#thunder {
  margin-top: 1rem;
}

#authors-section {
  grid-area: authors;
  margin-top: 2rem;
}

#all_the_cards2 {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.card2 {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 2rem;
  opacity: 0%;
  width: 100%;
  border-radius: 19px;
  background: #85baa1;
  box-shadow:
    -19px -19px 38px #878787,
    19px 19px 38px #ffffff;
}

.card2:hover {
  opacity: 100%;
}

.authorpics {
  height: 100%;
  border-radius: 1rem;
  margin-bottom: 0.5rem;
}

 h3{
    color: black;
    font-weight: bold;
    font-size: x-large;
  }

footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

p {
  display: flex;
  font-size: smaller;
  gap: 5rem;
}

.footer-links{
  color: white;
}

.footer-links:hover {
  color: #086375;
}

/* Dev tools */
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: white;
}
.ribbon {
  --s: 1.8em; /* the ribbon size */
  --d: 0.8em; /* the depth */
  --c: 0.8em; /* the cutout part */

  padding: 0 calc(var(--s) + 0.5em) var(--d);
  line-height: 1.8;
  background:
    conic-gradient(
        at left var(--s) bottom var(--d),
        #0000 25%,
        #0008 0 37.5%,
        #0004 0
      )
      0 /50% 100% no-repeat,
    conic-gradient(
        at right var(--s) bottom var(--d),
        #0004 62.5%,
        #0008 0 75%,
        #0000 0
      )
      100%/50% 100% no-repeat;
  clip-path: polygon(
    0 var(--d),
    var(--s) var(--d),
    var(--s) 0,
    calc(100% - var(--s)) 0,
    calc(100% - var(--s)) var(--d),
    100% var(--d),
    calc(100% - var(--c)) calc(50% + var(--d) / 2),
    100% 100%,
    calc(100% - var(--s) - var(--d)) 100%,
    calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),
    calc(var(--s) + var(--d)) calc(100% - var(--d)),
    calc(var(--s) + var(--d)) 100%,
    0 100%,
    var(--c) calc(50% + var(--d) / 2)
  );
  background-color: #d9594c; /* the main color */
  width: fit-content;
  height: fit-content;
}

button {
  color: #090909;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #d9594c;
  cursor: pointer;
  border: 1px solid #d9594c;
  transition: all 0.3s;
  box-shadow:
    6px 6px 12px #878787,
    -6px -6px 12px #086375;
}

button:active {
  color: #666;
  box-shadow:
    inset 4px 4px 12px #c5c5c5,
    inset -4px -4px 12px #ffffff;
}

.ribbon2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon2 {
  --f: 0.5em; /* control the folded part*/
  --r: 0.8em; /* control the ribbon shape */
  top: 20px;
  left: calc(-1 * var(--f));
  width: fit-content;
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding-inline: 0.25em;
  line-height: 1.8;
  background: #d9594c;
  border-bottom: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: polygon(
    0 0,
    0 calc(100% - var(--f)),
    var(--f) 100%,
    var(--f) calc(100% - var(--f)),
    100% calc(100% - var(--f)),
    calc(100% - var(--r)) calc(50% - var(--f) / 2),
    100% 0
  );
}

.ribbon3 {
  font-weight: bold;
  color: #fff;
}
.ribbon3 {
  --f: 0.5em; /* control the folded part*/
  --r: 0.8em; /* control the ribbon shape */
  top: 20px;
  left: calc(-1 * var(--f));
  width: fit-content;
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding-inline: 0.25em;
  line-height: 1.8;
  background: #d9594c;
  border-bottom: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: polygon(
    0 0,
    0 calc(100% - var(--f)),
    var(--f) 100%,
    var(--f) calc(100% - var(--f)),
    100% calc(100% - var(--f)),
    calc(100% - var(--r)) calc(50% - var(--f) / 2),
    100% 0
  );
}

.ribbon {
  animation: bounce-in-bottom 1.5s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-3-11 15:30:11
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bottom
 * ----------------------------------------
 */
@keyframes bounce-in-bottom {
  0% {
    transform: translateY(500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(65px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

@media (prefers-reduced-motion: reduce){
  .ribbon{ animation: none;}
}

body {
  animation: bg-pan-left 8s infinite alternate-reverse;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-3-11 16:2:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bg-pan-left
 * ----------------------------------------
 */
@keyframes bg-pan-left {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

#gallery {
  --s: 300px; /* control the size*/
  --c1: #086375;
  --c2: #85baa1;
  --c3: #9cceb5;

  --_c: 75%, var(--c3) 52.72deg, #0000 0;
  --_g1: conic-gradient(from -116.36deg at 25% var(--_c));
  --_g2: conic-gradient(from 63.43deg at 75% var(--_c));
  background:
    var(--_g1),
    var(--_g1) calc(3 * var(--s)) calc(var(--s) / 2),
    var(--_g2),
    var(--_g2) calc(3 * var(--s)) calc(var(--s) / 2),
    conic-gradient(
      var(--c2) 63.43deg,
      var(--c1) 0 116.36deg,
      var(--c2) 0 180deg,
      var(--c1) 0 243.43deg,
      var(--c2) 0 296.15deg,
      var(--c1) 0
    );
  background-size: calc(2 * var(--s)) var(--s);
}

.ribbon4 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon4 {
  --s: 1.8em; /* the ribbon size */
  --d: 0.8em; /* the depth */
  --c: 0.8em; /* the cutout part */

  padding: var(--d) calc(var(--s) + 0.5em) 0;
  line-height: 1.8;
  background:
    conic-gradient(
        from 45deg at left var(--s) top var(--d),
        #0008 12.5%,
        #0000 0 37.5%,
        #0004 0
      )
      0 /50% 100% no-repeat,
    conic-gradient(
        from -45deg at right var(--s) top var(--d),
        #0004 62.5%,
        #0000 0 87.5%,
        #0008 0
      )
      100%/50% 100% no-repeat;
  clip-path: polygon(
    0 0,
    calc(var(--s) + var(--d)) 0,
    calc(var(--s) + var(--d)) var(--d),
    calc(100% - var(--s) - var(--d)) var(--d),
    calc(100% - var(--s) - var(--d)) 0,
    100% 0,
    calc(100% - var(--c)) calc(50% - var(--d) / 2),
    100% calc(100% - var(--d)),
    calc(100% - var(--s)) calc(100% - var(--d)),
    calc(100% - var(--s)) 100%,
    var(--s) 100%,
    var(--s) calc(100% - var(--d)),
    0 calc(100% - var(--d)),
    var(--c) calc(50% - var(--d) / 2)
  );
  background-color: #d95b43; /* the main color */
  width: fit-content;
  height: fit-content;
}

/* Making Apps section responsive  */
@media screen and (max-width: 1200px) {
  #all_the_cards {
    max-width: 100vw;
  }

}

@media screen and (max-width: 800px) {
   #all_the_cards {
    flex-wrap: wrap;
  }

  
}

/* Making recent books responsive */
@media screen and (max-width: 1200px) {
  #gallery {
    column-count: 3;
  }
}

@media screen and (max-width: 800px) {
  #gallery {
    column-count: 2;
  }
}

@media screen and (max-width: 700px) {
  #gallery {
    column-count: 1;
  }

  .gallerypic {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 1rem;
  }
  .gallerypic:hover {
    transform: none;
  }
}


/* Making authors responsive */
@media screen and (max-width: 1000px) {


    #authors-section{
    max-width: 100vw;
  }

    #all_the_cards2{
    max-width: 100vw;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .card2{
    max-width: 40%;
  }

}

@media screen and (max-width: 850px) {
  .footer-links{
    font-size:large;
  }


}

@media screen and (max-width: 700px) {
  .footer-links{
    font-size: medium;
  }

  p{
    gap: 2rem;
  }

}

/* Making Header Responsive for mobile */
@media screen and (max-width: 450px) {
  .ribbon{
    font-size: larger;
  }
  
}