:root {
    --white: #FEFFFE;
    --periwinkle: #CADAFC;
    --jordy-blue: #97B9FA;
    --cornflower-blue: #6296FC;
    --risd-blue: #015AF8;
    --dark-blue: rgb(0, 47, 129);
}

@import url('https://fonts.googleapis.com/css2?family=Beiruti:wght@200..900&family=Nunito:wght@329&display=swap');

html {
    width: 100%;
    height: 100%;
}

body {
    background-image: url(../images/Background.png);
    margin: 0;
    font-family: 'Nunito', sans-serif;
}

#modal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 5px solid var(--dark-blue);
    color: var(--white);
    padding: 20px;
    backdrop-filter: blur(10px);
    width: 55%;
    border-radius: 10px;
    margin: 20px auto;
    font-family: 'Beiruti', serif;
    font-weight: 329;
}

#modal h1,
#modal h2,
#modal h3,
#modal h4,
#modal h5,
#modal h6 {
    text-align: center;
}

#modal p {
    text-align: left;
    font-size: 1.5rem;
}

#modal h2 {
    font-size: 2.5rem;
}

#modal h1 {
    font-size: 3.75rem;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    text-decoration-color: var(--jordy-blue);
}

small {
    color: grey;
    font-size: 1.25rem;
}

a {
    text-decoration-color: grey;
}

img#pfp,
img#hi {
    width: 10vw;
    height: 10vw;
    position: relative;
    left: 15px;
    object-fit: cover; /* Ensures the image covers the area */
}
img#pfp{
    position: absolute;
    border-radius: 50%;
}
img#hi{
    margin: auto;
}