@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Space+Grotesk:wght@300..700&display=swap');


/* body, config padrão */
/* Cormorant e Space Grotesk */


:root {
    --cinza: #fcf8f8;
    --amarelo: #d4af37;
    --verde: #6CC959;
    --azul: #26daf1; /* 5733F5  40ce8c  EEEDF2 */
    --verm: #f54f57;
    --preto: #22252A; /* 1C1C1C */
    --roxo1: rgb(73, 70, 92);
    --roxo2:  #24233b;
}
body {

}
#verm {
    color: #f54f57;
    font-style: italic;
}
#ama {
    color: var(--amarelo);
    font-style: italic;
}
#azu {
    color: var(--azul);

}
#verd {
    color: var(--verde);
    font-style: italic;
}

a {
    color: var(--cinza);
    font-size: 20px;
    text-decoration: none;
    font-family: "Space Grotesk";
    display:inline; 
    width: 150px;
    box-shadow: inset 0 0 0 0 var(--azul); 
    overflow: visible; 
    -webkit-transition: all ease 0.5s; 
    -moz-transition: all ease 0.5s; transition: all ease 0.5s;
}    
a:hover {
    background: var(--azul);
    color: var(--preto);
    font-weight: 400;
    box-shadow: inset 0 50px 0 0 var(--azul); 
    color:black;
}


.card {
    width: 350px;
    height: 510px;
    margin: 200px auto;
    background-color: #24233b;
    border-radius: 8px;
    z-index: 1;
    box-shadow: 0px 10px 10px rgb(73, 70, 92);
    transition: 0.5s;
   }

   .card:hover {
    transform: translateY(-7px);
    box-shadow: 0px 10px 10px black;
  }
   
   .tools {
    display: flex;
    align-items: center;
    padding: 9px;
   }
   
   .circle {
    padding: 0 4px;
   }
   
   .box {
    display: inline-block;
    align-items: center;
    width: 13px;
    height: 13px;
    padding: 1px;
    border-radius: 50%;
   }
   
   .red {
    background-color: #ff605c;
   }
   
   .yellow {
    background-color: #ffbd44;
   }
   
   .green {
    background-color: #00ca4e;
   }

.links {
    background-color: rgb(73, 70, 92);
    width: 350px;
    height: 432px;
    resize: none;
    border-radius: 5px;
    border: none;
    color: white;
    padding: 10px;
}
h1 {
    font-size: 25px;
    font-family: 'Space Grotesk';
    font-weight: 400;
    color: var(--verm);
    padding-left: 10px;
}
ul {
    line-height: 60px;
    list-style-type: none;
    padding-left: 15px;
    padding-top: 0px;
}
.card__content {
    display: flex;
    align-items: center;
    padding: 10px;
}

@media screen and (max-width: 1020px) {
    .card {
        margin-top: 20%;
    }
}