:root {
    --color-primary: #14ff24;
    --color-bg: rgb(29, 28, 28);
    --color-bg-opacity: rgba(90, 88, 88, 0.8);
}

@font-face {
    font-family: oldLondon;
    src: url('../assets/OldLondon.ttf');
}

body {
    margin: 0px;
    text-align: center;
    font-size: 1.5rem;
    background-color: var(--color-bg);
    color: var(--color-primary);
}

main {
    margin: auto;
    padding-top: 4rem;
    border-top: 0.15rem solid var(--color-primary);
    margin-top: 4rem;
    width: 80vw;
    padding-bottom: 4rem;
    border-bottom: 0.15rem solid var(--color-primary);
    margin-bottom: 4rem;
}

#photo {
    width: 15rem;
    border-radius: 1000rem;
    border: 0.25em solid var(--color-primary);
}

.group-links {
    display: inline-flex;
    gap: 1rem;
}

a {
    text-decoration: none;
    border-bottom: 0.15rem solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 1rem;
    color: var(--color-primary);
}

.icon-link {
    vertical-align: middle;
    height: 2rem;
    padding: 0.1rem;
}

.icon-circle {
    border-radius: 100rem;
    background-color: white;
    height: calc(2rem - 0.1rem * 2);
}

a:hover {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

ul {
    border-radius: 1rem;
    width: min-content;
    margin: auto;
    white-space: nowrap;
    list-style: none;
    background-color: var(--color-bg-opacity);
    padding: 1.5rem 3rem;
}


ul li {
    width: min-content;
    text-align: left;
}

ul li ul {
    padding: 0.75rem 1.5rem;
}

ul li::before {
    content: "- ";
}