@font-face {
    font-family: 'JetBrainsMono';
    src: url('./assets/JetBrainsMono.ttf') format('truetype');

}


@font-face {
    font-family: 'PressStart2P';
    src: url('./assets/PressStart2P.ttf') format('truetype');

}




body {

    background: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.3) 0%, #0B0C10 75%);

    /* Prevents the image from repeating/tiling */
    background-repeat: no-repeat;

    /* Scales the image to cover the entire screen */
    background-size: cover;

    /* Centers the image perfectly */
    background-position: center;

    /* Keeps the background fixed while scrolling */
    background-attachment: fixed;

    /* Fallback color if the image fails to load */
    background-color: #0B0C10;
}


.name {
    color: #F8FAFC;
    text-decoration: underline;
    font-family: 'JetBrainsMono', sans-serif;
    margin: 0;
    padding: 0;





}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px) saturate(130%);

    display: flex;
    justify-content: center;
    border-radius: 18px;
    box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 2px rgba(255, 255, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.2);
}

ul li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

ul li a:hover {
    background-color: #111111;
    border-radius: 50px;
}



.navbar {

    position: static;
    top: 5%;
    left: 45%;
    margin: 0;
    padding: 0;

}


.pcard {

    position: static;
    min-height: 80vh;
    width: 45%;
    background-color: rgba(20, 23, 31, 0.65);
    margin: 5;
    padding: 5;
    border: rgba(255, 255, 255, 0.20);
    border-radius: 30px;
    color: #94A3B8;

    box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 32px rgba(255, 255, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.2);


}


.lcard {

    position: absolute;
    top: 14%;
    left: 1%;
    min-height: 80vh;
    width: 20%;
    max-width: 20%;
    background-color: rgba(20, 23, 31, 0.65);
    margin: 5;
    padding: 5;
    border: rgba(255, 255, 255, 0.20);
    border-radius: 30px;
    color: #94A3B8;

    box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 32px rgba(255, 255, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.2);


}

.rcard {

    position: absolute;
    top: 14%;
    left: 79%;
    min-height: 80vh;
    width: 20%;
    background-color: rgba(20, 23, 31, 0.65);
    margin: 5;
    padding: 5;
    border: rgba(255, 255, 255, 0.20);
    border-radius: 30px;
    color: #94A3B8;

    box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 32px rgba(255, 255, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.2);


}