@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(-0.4turn, rgb(255, 252, 253), rgb(153, 185, 240));
  font-family: "Poppins", sans-serif;
  color: rgb(22, 22, 70);
  max-width: 1200px;
  min-width: 270px;
  margin: 0 auto;
  padding: 2rem 0;
}

h1,
h2,
h3 {
  text-align: center;
}

h1,
h2 {
  color: rgb(79, 71, 164);
  text-shadow: 1px 1px 1px rgb(222, 204, 4);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
  font-style: italic;
  padding: 2rem;
  overflow: hidden;
  animation: runText 7s linear infinite;
}

@keyframes runText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

h3 {
  background: linear-gradient(rgb(116, 164, 247), rgb(255, 255, 255));
  padding: 1rem 0;
  border-radius: 0.25rem 0.25rem 0 0;
}

.grid-item {
  background: rgb(255, 255, 255);
  border-radius: 0.25rem;
  box-shadow: 2px 2px 2px rgb(130, 130, 130);
  margin-bottom: 0.63rem;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}

.grid-item:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.grid-item:first-child {
  box-shadow: 3px 3px 3px rgb(95, 94, 0);
}

.grid-item:first-child h3 {
  background: linear-gradient(rgb(247, 245, 116), rgb(255, 255, 255));
}

#grid-floats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 0.5rem;
}

#grid-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid-item img {
  width: 90%;
  display: block;
  margin: 0 auto;
}

ul {
  list-style: none;
}

p {
  text-align: justify;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* Mobile screen */
#grid-floats {
  padding: 0 1rem;
}

#grid-flex {
  padding: 0 0.37rem 0 1rem;
}

#grid-floats .grid-item {
  grid-column: span 6;
}

#grid-floats .grid-item:first-child {
  grid-column: span 12;
}

#grid-flex .grid-item {
  width: 48%;
  margin-right: 2%;
}

#grid-flex .grid-item:first-child {
  width: 98%;
}

@media screen and (min-width: 501px) {
  #grid-floats {
    padding: 0 1.5rem;
  }
  #grid-flex {
    padding: 0 0.84rem 0 1.5rem;
  }

  .grid-item:nth-child(2) {
    box-shadow: 3px 3px 3px rgb(95, 94, 0);
  }

  .grid-item:nth-child(2) h3 {
    background: linear-gradient(rgb(247, 245, 116), rgb(255, 255, 255));
  }

  #grid-floats .grid-item {
    grid-column: span 4;
  }

  #grid-floats .grid-item:nth-child(-n + 2) {
    grid-column: span 6;
  }

  #grid-flex .grid-item {
    width: 31.8%;
    margin-right: 1.4%;
  }

  #grid-flex .grid-item:nth-child(-n + 2) {
    width: 48.5%;
  }
}

@media screen and (min-width: 1025px) {
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 3rem;
    padding: 4rem;
  }

  #grid-floats {
    padding: 0 2 rem;
  }

  #grid-flex {
    padding: 0 1.4rem 0 2rem;
  }

  .grid-item:nth-child(2) {
    box-shadow: 2px 2px 2px rgb(130, 130, 130);
  }
  .grid-item:nth-child(2) h3 {
    background: linear-gradient(rgb(116, 164, 247), rgb(255, 255, 255));
  }

  #grid-floats .grid-item,
  #grid-floats .grid-item:nth-child(2) {
    grid-column: span 3;
  }

  #grid-floats .grid-item:first-child {
    grid-column: span 6;
  }

  #grid-flex .grid-item,
  #grid-flex .grid-item:nth-child(2) {
    width: 24%;
    margin-right: 1%;
  }

  #grid-flex .grid-item:first-child {
    width: 49%;
  }
}