/* Basics Resetting */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
}

/*img {
  width: 100%;
  display: block;
  line-height: 0;
}*/

/* Body is grid to place items at center*/
body {
  /*display: grid;
  place-content: center;*/
  min-height: 100vh;
  background-color: hsl(210, 46%, 95%);
  text-rendering: optimizeSpeed;
}

/* Utility classes */
.container {
  padding: 0px 10px;
  max-width: 100%;
}

.general-container {
border: 2px solid #0AAAF8;
border-radius: 20px;
padding: 20px;
background: #fff;
margin: 20px 0px;
}

/* Typography */
/*body {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 13px;
  font-weight: 500;
}*/

.profile-name {
  font-weight: 500;
}

.profile-title {
  display:;
  font-weight: 600;
  font-size: 12px;
  opacity: 0.5;
}

.testimonials blockquote {
  opacity: 0.8;
  font-size: 16px;
  margin-bottom: 15px;
  color: #000;
}

.show-original {
    background: #e7e6e6;
    width: fit-content;
    padding: 3px 10px;
    margin-top: 10px;
    border-radius: 20px;
    font-size: 14px;
    color: #0a6acd;
}
a.show-original {
    background: #e7e6e6;
    width: fit-content;
    padding: 3px 10px;
    margin-top: 0px;
    border-radius: 20px;
    font-size: 14px;
    color: #0a6acd;
}

/* Colors */
:root {
  --violet: hsl(263, 55%, 52%);
  --light-violet: #996ed9;
  --grey: hsl(217, 19%, 35%);
  --dark-grey: hsl(219, 29%, 14%);
}

.violet {
  background-color: var(--violet);
  color: white;
}

.grey {
  background-color: var(--grey);
  color: white;
}

.light {
  background-color: white;
  border: 2px solid #0AAAf8;
}

.dark {
  background-color: var(--dark-grey);
  color: white;
}

/* Cards Grid */

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card {
  padding: 20px;
  margin: 20px 0px;
  border-radius: 10px;
  box-shadow: 40px 50px 50px -50px rgba(79, 88, 103, 0.247);
}

/* Positioning cards */
.cardb:nth-of-type(1) {
  grid-column: 1;
}
.card:nth-of-type(2) {
  grid-column: 2;
}
.card:nth-of-type(3) {
  grid-column: 1;
}

/* copy of original */
/*
.card:nth-of-type(1) {
  grid-column: 1;
  background-image: url("images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: 90% 0;
}
*/

/*.card:nth-of-type(4) {
  grid-column: span 2;
}

.card:nth-of-type(5) {
  grid-column: 4;
  grid-row: 1/3;
}*/

/*  Profile */
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.avatar {
  border-radius: 50%;
  width: 60px;
  aspect-ratio: 1;
  border: none;
}

.light .avatar {
  border: none;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heading {
  margin-bottom: 15px;
}

/* Attribution*/
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

/* Hover Effects only for devices that supports hovering */
@media (hover: hover) {
  .cardbox:hover {
    transform: scale(1.01);
    filter: saturate(1.2);
  }

  .card:nth-of-type(1):hover,
  .card:nth-last-of-type(3):hover {
    transform: translateX(-10px);
  }

  .card:nth-of-type(2):hover {
    transform: translateY(-10px);
  }

  .card:nth-of-type(4):hover {
    transform: translateY(10px);
  }

  .card:nth-of-type(5):hover {
    transform: translateX(10px);
  }

  /* this will blur the cards even if cursor is between the gaps 
  .card-grid:hover > .card:not(:hover) {
    filter: blur(1px);
  }
  */

  .card-blur {
    filter: blur(0.8px);
    opacity: 0.8;
  }
}

/* Adding Animation */

.card:nth-of-type(1),
.card:nth-of-type(3) {
  -webkit-animation: slideLeftToRight 1s ease-in;
  animation: slideLeftToRight 1s ease-out;
}

.card:nth-of-type(2) {
  -webkit-animation: slideTopToBottom 1s ease-in;
  animation: slideTopToBottom 1s ease-out;
}

.card:nth-of-type(4) {
  -webkit-animation: slideBottomToTop 1s ease-in;
  animation: slideBottomToTop 1s ease-out;
}

.card:nth-of-type(5) {
  -webkit-animation: slideRightToLeft 1s ease-in;
  animation: slideRightToLeft 1s ease-out;
}

@keyframes slideLeftToRight {
  0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideRightToLeft {
  0% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideTopToBottom {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideBottomToTop {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

/* Responsiveness */
@media (max-width: 700px) {
  .card-grid {
    display: flex;
    flex-direction: column;
  }
}