html{
    height: 100%;
    background: radial-gradient(#ffffff, #9198e5) no-repeat;
    background-size: cover;
    
}

@font-face {
    src: url('../assets/fonts/pokemon-dp-pro.ttf');
    font-family: pokemon;
}

body {
    font-family: pokemon;
    margin: 0;
    padding: 0;

}

.project-links-container {
    display: flex;
    justify-content: center; /* Centers the items horizontally */
    align-items: flex-start; /* Aligns the items at the top */
    gap: 2vw; /* Adds spacing between the items */
}
.KSA-div, .pokemon-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw; /* Ensure consistent sizing */
    margin: 0; /* Remove any extra margin */
}

.KSA-div{
    display: flex;
    width: 25vw;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.pokemon-div{
    display: flex;
    width: 25vw;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.link-container{
    text-decoration: none;
    color: black;
}

.thumbnail {
    display: flex;
    aspect-ratio: 2 / 1;
    width: 25vw;
    position: relative;
    border: 0.2vw solid white;
    border-radius: 1vh 1vw 0 0;
    border-bottom: none;
    padding: 0;
    margin: 0;
    background-color: white;
    box-shadow: 0 .2vw 0 0 black,
                inset 0 .2vw 0 0 black,
                0 0 0 .2vw black,
                inset 0 0 0 .2vw black;
    z-index: 2;
}
.textbox{
    display: flex;
    width: 25vw;
    position: relative;
    border-radius: 0px 0px 1vh 1vw;
    line-height: 2vw;
    background: white;
    border: .2vw solid white;
    border-top: none;
    box-shadow: 0 .2vw 0 .2vw black,
                inset 0 .2vw 0 .2vw black,
                0 0 0 .2vw black,
                inset 0 0 0 .2vw black;
    z-index: 1;
    font-size: 1.5vw;
    padding: 0;
    margin: 0;
    margin: 0;
    top: -3vh;
    text-align: center;
}

.centerText{
    text-align: center;
    transform: translateY(10%);
}

.back{
    background: none;
    border: none;
    font-size: 40px;
    font-family: pokemon;
    position: absolute;
    bottom: 20%;
    right: 10%;
    cursor: pointer;
}

.back:hover{
    color: rgb(204, 204, 204);
}

footer {
    text-align: center;
    padding: 0rem;
    background-color: #333;
    color: white;
    position: absolute;
    width: 100%;
    bottom: 0;
}