@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

body {
    font-family: "Jersey 10", serif;
    font-size: 1.5em;
    background-color: #2e2d2d;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2em;
}

h1, h2, h3,h4 {
  font-family: "Jacquard 12", cursive;
  font-weight: 400;
  font-style: normal;
}

a {
    display: inline-block;
    text-decoration: none;
    color: #F681B7;
    padding: 0.2rem;
    height: fit-content;
    z-index: 1;
    transition: all 0.2s ease-in-out;
}

a::after {
    content: '';
    display:block;
    position:relative;
    text-align: center;
    height: 0.2rem;
    padding: 0, -0.2rem;
    width: 0%;
    border-radius: .3rem;
    z-index: 0;
    background: #F681B7;
    transition: all 0.2s ease-in-out;
}

a:hover:after {
    width: 100%;
    transition: all 0.2s ease-in-out;
}

a:hover {
    scale: 105%;
}

ul {
    list-style-type: none;
    text-align: center;
    align-content: space-evenly;
    margin: auto;
}

li {
    padding-bottom: 1rem;
    text-align: center;
    margin: auto;
    padding-right: 2.2rem;
    transition: all 0.25s ease-in-out;
}

li::before
{
    content: '';
    display: inline-block;
    position:relative;
    text-align: left;
    width: .5rem;
    height: .5rem;
    background: #F681B7;
    margin-right: .5rem;
    margin-bottom: .15rem;
    transition: all 0.25s ease-in-out;
}

li:hover {
    scale: 105%;
}

li:hover::before {
    width: .65rem;
    height: .65rem;
}

.secret_hints {
    width: 50%;
    margin: auto;
}

#profileCard {
    justify-self: center;
    margin: auto;
    width: 50%;
    background: linear-gradient(180deg, #7D7A78, #6C6975,#6a545e);
    color: #EAE9EC;
    text-align: center;
    border: #F681B7 solid 0.2em;
    border-radius: 1rem;
    padding: 1rem;
    scale: 98%;
    transition: all 0.25s ease-in-out;
}
#profileCard:hover
{
    scale: 100%;
}

#imgDiv
{
    text-align: center;
    width: 25rem;
    margin: auto;
}

.wildCardDiv
{
    text-align: center;
    width: 10rem;
    margin: auto;
    transition: all 0.25s ease-in-out;
}

.wildCardDiv:hover
{
    scale: 110%;
}

img {
    width: 100%;
    height:100%;
    object-fit: contain;
    border-radius: 2rem;
}