:root{
    --background-color: #1a1a1a;
    --foreground-color: #034861;
    --selected-background-color: #034861;
    --color: #fff;
    --border-color: #08aa59;
}

body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--background-color);
}

.main {
    display: flex;
    flex-direction: column;
    border-radius: 5%; /* Rounded corners */
    padding: 1.5vh 1.5%;
    width: 92%;
    height: 92vh;
    margin: 2.5vh 2.5%;
    background-color: var(--foreground-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds shadow effect */
    overflow: hidden;
}

.title {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    border-bottom: 2px solid #08aa59;
    height: 25%;
}

.pfp {
    width: 12%;   /* Set a fixed container size */
    height: 12%;  /* Adjust size as needed */
    border-radius: 50%;  /* Rounded container */
    overflow: hidden;    /* Ensure the image doesn't overflow outside rounded corners */
}

.pfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Scales to fill the container while maintaining aspect ratio */
}


/* Styles when the height is greater than the width (portrait mode) */
@media (orientation: portrait) {
    .pfp {
        width: 12vw;
        height: 12vw;
    }

    .title {
        height: 13vw;
    }
}

/* Styles when the width is greater than the height (landscape mode) */
@media (orientation: landscape) {
    .pfp {
        width: 12vh;
        height: 12vh;
    }

    .title {
        height: 13vh;
    }
}

.name {
    color: var(--color);
    font-size: 1.75em;
    font-weight: bold;
    pointer-events: none;
    padding: 5% 10%;
}

.content {
    color: var(--color);
    padding: 2.5% 
}

p {
    word-wrap:normal;
}