:root { 
    --colorRed: #F08DA7;
    --colorYellow: #D9F08D;
    --colorGreen: #8DF0D6;
    --colorText: #ffffff;
    --colorBg: #1d1d1d;
    --fontLexend: 'Lexend', sans-serif;
}

body {
    background-color: var(--colorBg);
    color: var(--colorText);
    font-family: var(--fontLexend);
    margin-left: 8vw;
    margin-right: 8vw;
}
/* // <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name */

.lexend {
  font-family: var(--fontLexend);
}
.row {
    display: flex;
    gap: 2vw;
    padding-top: 20px;
    /* perspective: 100px; */
}

h1 { /* Title */ 
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 3vw;
    text-align: center;
    border: 3px var(--colorText) solid;
    border-radius: 10px;
}

h2 { /* Catergory Name s*/
    font-size: 1.6vw;
    text-align: center;
}

h3 { /* Line */
    font-size: 3vw;
    font-weight: 1px;
    text-align: center;
}

h4 { /* "Player: [Name]" */
    font-size: 3vw; 
    font-weight: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
}

p {
    font-size: 1em;
    padding-inline-end: 10vw;
    min-width: 500px;
}

a {
    color: var(--colorYellow);
    text-decoration-color: var(--colorYellow);
}


.skin img{

    height: 20vw;
    border: 3px var(--colorText) solid;
    border-radius: 13px;
}

 

.card {
    width: 33.33%; /* This percent is due to having 3 cards so 1/3 = 33.33 */
    min-width: 120px;
    border: 2.5px var(--colorRed) solid;
    border-radius: 13px;
    transition: all 150ms;
} .card:hover { /* On Hover */
    transform: scale(0.98) translate(0px, -10px);
} .card p {
    font-size: default;
    padding-inline-end: 0;
    min-width: 0;

}


.card-content {
    padding: 5px;
    min-width: 120px;
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
} .card-content h2 {
    margin-top: -10px;
} 



.card img {
    width: 100%;
    min-width: 120px;
    transition: all 500ms;
    transform: scale(0.7) translate(0px, 10px);
    overflow: hidden; /* hides image overlapping border*/
} 

.card:hover {
    border-color:var(--colorGreen);
}

.card:hover img {
    margin-top: -10px;
}
.score-img {
    transform: scale(1) translate(0px, -1px);
} 







/* https://fonts.google.com/specimen/Lexend?categoryFilters=Feeling:%2FExpressive%2FCalm */