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

/* - Red: hsl(0, 78%, 62%)
- Cyan: hsl(180, 62%, 55%)
- Orange: hsl(34, 97%, 64%)
- Blue: hsl(212, 86%, 64%)

### Neutral

- Very Dark Blue: hsl(234, 12%, 34%)
- Grayish Blue: hsl(229, 6%, 66%)
- Very Light Gray: hsl(0, 0%, 98%) */

:root {
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  --darkblue: hsl(234, 12%, 34%);
  --grey: hsl(229, 6%, 66%);
  --lightgrey: hsl(0, 0%, 98%);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, sans-serif;
  max-width: 85vw;
  margin: 12px auto;
  background-color: var(--lightgrey);
  color: var(--darkblue);
}

/*header {
  text-align: center;
}*/

/*header p {
  max-width: 55ch;
  margin: 1rem auto;
}*/

h1 span {
  display: block;
  font-weight: 200;
}

p {
  color:red;
}
        .card {
            height:440px;
        }
          @media screen and (min-width:1400px) {
 .card{
    height:100%;
  }
}
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 
  /*max-width: 1250px;
  margin: 50px auto;*/
}

.box {
  border-radius: 8px;
  background-color: #fff;
  max-width: 445px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding: 2rem;
  margin: 2rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06), 0 6px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.box:before {
  content: "";
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}

.box.box-vert-center {
  transform: translateY(7%);
}
        @media screen and (max-width:1000px) {
            .box.box-vert-center {
  transform: translateY(1%);
}
           
          
        }

/*.box p {*/
  /*padding-top: 0.75rem;
  font-size: 0.85rem;
}*/

.box .svg {
  margin-left: auto;
  margin-top: auto;
}

.box:nth-of-type(1):before {
  background-color: var(--cyan);
}

.box:nth-of-type(2):before {
  background-color: var(--red);
}

.box:nth-of-type(3):before {
  background-color: var(--blue);
}

.box:nth-of-type(4):before {
  background-color: var(--orange);
}

@media screen and (max-width: 850px) {
  .box.box-vert-center {
    transform: translateY(0);
    margin:2rem;
  }

}
  .card-body {
           width:84%;height:100%;background:white;
        }
 
        @media screen and (max-width: 992px) {
 .card{
    height:100%;
  }
}

/* On screens that are 600px or less, set the background color to olive */
        @media screen and (max-width: 1300px) {
              .card-body {
                width: 100%;
            }
             .card {
               height:100%;
            }
        }
      
        
        @media screen and (max-width: 1000px) {
            .card-body {
                width: 100%;
            }
             .card {
               height:100%;
            }
            header {
                width: 100%;
            }
            .boxes {
                /*display: inline;
                flex-wrap: wrap;
                justify-content: center;*/
            }

            .box {
                margin:2rem;
                max-width: 655px;
                height: 100%;
                /*align-items: center;*/
            }
        }
 
        body {
  -webkit-animation: theme 21s linear infinite;
          animation: theme 21s linear infinite;
}
body:after, body:before {
  content: '';
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
  width: 100vw;
  height: 100vh;
  width: 100vmax;
  height: 100vmax;
  background: rgba(0, 0, 0, 0.05);
  -webkit-animation: background 90s linear infinite;
          animation: background 90s linear infinite;
}
body:after {
  left: 15vw;
}
body:before {
  right: 15vw;
  -webkit-animation-delay: -30s;
          animation-delay: -30s;
  animation-direction: reverse;
}

@-webkit-keyframes theme {
  0% {
    background: #74C390;
  }
  16% {
    background: #5DBDB6;
  }
  33% {
    background: #59D4E1;
  }
  50% {
    background: #51BCE8;
  }
  66% {
    background: #FA5374;
  }
  83% {
    background: #E46653;
  }
  100% {
    background: #74C390;
  }
}

@keyframes theme {
  0% {
    background: #74C390;
  }
  16% {
    background: #5DBDB6;
  }
  33% {
    background: #59D4E1;
  }
  50% {
    background: #51BCE8;
  }
  66% {
    background: #FA5374;
  }
  83% {
    background: #E46653;
  }
  100% {
    background: #74C390;
  }
}
@-webkit-keyframes background {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes background {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}