.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card{
    text-align: center;
    --grad: red, blue;
  padding: 2.5rem;
  background-image: linear-gradient(to bottom left, #e0e4e5, #f2f6f9);
  border-radius: 2rem;
  gap: 1.5rem;
  display: grid;
  grid-template: 'title icon' 'content content' 'bar bar' / 1fr auto;
  font-family: system-ui, sans-serif;
  color: #444447;
  box-shadow: 
    inset -2px 2px hsl(0 0 100% / 1),
    -20px 20px 40px hsl(0 0 0 / .25) ;
  
  .title {
    font-size: 1.5rem;
    grid-area: title;
    align-self: end;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-all;
    
  }
  .icon {
    grid-area: icon;
    font-size: 3rem;
    
    > i {
      color: transparent;
      background: linear-gradient(to right, var(--grad));
      background-clip: text;
    }
  }
  .content {
    grid-area: content;
    & > *:first-child { margin-top: 0rem}
    & > *:last-child { margin-bottom: 0rem}
  }
  &::after {
    content: "";
    grid-area: bar;
    height: 2px;
    background-image: linear-gradient(90deg, var(--grad));
/*     margin-inline: -1.5rem; */
  }

}
.cards img{
  margin-top:-.8rem;
    width: 100px;
    height:100px;

}


a{
    text-decoration: none;
}


.logo{
  
justify-content: space-between;
display: flex;
  text-align: center;
}
.logo img{
  width:30px;
}

.name{
  margin-top:.4rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
.list{
  margin-top:.4rem;
}
.list a{

  font-size: 16px;
  margin-right: .6rem;
color: #f2f6f9;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding:.8rem;
  margin-top:.4rem;
}

.container-fluid{
background-color: teal;
color: #f2f6f9;
  justify-content: space-between;
  display: flex;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding:.8rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}


.footer{
  margin-top: 3rem;

  background-color: rgb(32, 32, 32);
  color: #f2f6f9;
  padding: .7rem;
  font-size: 16px;
  text-align: center;
}


.container {
text-align: center;
height: 34px;
  background-color: bisque;
  padding: 1rem;
  border-radius: 4px;
}

.container input{
  padding: .2rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  width: 80%;
  height:28px;
}

.copy-text{
  
  padding: .4rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  border-radius: 3px;
  text-align: center;
  background-color: rgb(0, 157, 200);
}


button{
 
  background-color: black;
  color: #e0e4e5;
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  height: 25px;
}