body {
    font-size: 16px;
    line-height: 1.62;
    font-family: Menlo, Monaco, Consolas, "Courier New", sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    max-width: 600px;
    font-size: 18px;
    flex: 1;
    margin: 3rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main h1 {
    margin-top: 0;
}

main p:first-of-type {
    margin-top: 0;
}

main p:last-of-type {
    margin-bottom: 0;
}

main a {
    color: inherit;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

/* main a::before {
    content: "";
    position: absolute;
    height: 12px;
    bottom: 2px;
    left: -2px;
    width: 105%;
    z-index: -1;
    background-color: #42b983;
    opacity: .3;
    transform: skew(-35deg);
    transition: opacity .2s ease;
    border-radius: 3px 8px 10px 6px;
    transition: 0.1s ease background-color;
} */

main a:hover::before {
    background: #9571e3;
}

p {
  margin: 30px;
}

footer {
    margin: 0.5rem 0;
    padding: 0 1rem;
    opacity: 0.35;
    display: flex;
    justify-content: space-between;
}

.info {
    color: gray;
    font-size: small;
    text-align: center;
}

@media screen and (max-width: 374.5px) {
    footer {
        justify-content: flex-end;
    }
    footer div:first-of-type {
        display: none;
    }
}

footer a {
    color: inherit;
    text-decoration: none;
}

.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  border-radius: 0.8em;
  border: none;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: ghostwhite;
  overflow: hidden;
 }
 
 .cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
 }
 
 .cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 0.8em 1.2em 0.8em 1.05em;
 }
 
 .cssbuttons-io::before,
 .cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
 }
 
 .cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
 }
 
 .cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
 }
 
 .cssbuttons-io:active {
  transform: scale(0.95);
 }
 




 .spinner {
  width: 44px;
  height: 44px;
  animation: spinner-y0fdc1 2s infinite ease;
  transform-style: preserve-3d;
 }
 
 .spinner > div {
  background-color: rgba(11, 11, 11, 0.2);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 2px solid #070707;
 }
 
 .spinner div:nth-of-type(1) {
  transform: translateZ(-22px) rotateY(180deg);
 }
 
 .spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
 }
 
 .spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
 }
 
 .spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
 }
 
 .spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
 }
 
 .spinner div:nth-of-type(6) {
  transform: translateZ(22px);
 }
 
 @keyframes spinner-y0fdc1 {
  0% {
   transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }
 
  50% {
   transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }
 
  100% {
   transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
 }



 .card {
    --primary-clr: #1C204B;
    --dot-clr: #BBC0FF;
    --play: hsl(195, 74%, 62%);
    width: 200px;
    height: 170px;
    border-radius: 10px;
   }
   
   .card {
    font-family: "Arial";
    color: #fff;
    display: grid;
    cursor: pointer;
    grid-template-rows: 50px 1fr;
   }
   
   .card:hover .img-section {
    transform: translateY(1em);
   }
   
   .card-desc {
    border-radius: 10px;
    padding: 15px;
    position: relative;
    top: -10px;
    display: grid;
    gap: 10px;
    background: var(--primary-clr);
   }
   
   .card-time {
    font-size: 1.7em;
    font-weight: 500;
   }
   
   .img-section {
    transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: hsl(195, 74%, 62%);
   }
   
   .card-header {
    display: flex;
    align-items: center;
    width: 100%;
   }
   
   .card-title {
    flex: 1;
    font-size: 0.9em;
    font-weight: 500;
   }
   
   .card-menu {
    display: flex;
    gap: 4px;
    margin-inline: auto;
   }
   
   .card svg {
    float: right;
    max-width: 100%;
    max-height: 100%;
   }
   
   .card .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dot-clr);
   }
   
   .card .recent {
    line-height: 0;
    font-size: 0.8em;
   }