@font-face {
    font-family: "Verdana Bold";
    src: url(./fonts/Verdana-Bold.ttf) format("truetype")
}

@font-face {
    font-family: "Verdana";
    src: url(./fonts/Verdana.ttf) format("truetype")
}

:root {
    --theme-accent: #ae008c;
}

body {
    background-image: url("/assets/home/ChosenBackgrounds/LoveCity.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: white;
    font-family: 'Verdana';
}

.bumper {
    height: 7.75rem;
    margin-bottom: -1rem;
}

.socialMediaIcons img {
    height: 1.875rem;
}

.socialMediaIcons {
    display: flex;
    height: 1.875rem;
    width: 7.5rem;
    padding-top: 6.063rem;
    margin: 0;
}

.themeDropdown {
    position: absolute;
    display: flex;
    align-items: end;
    flex-direction: column;
    top: 9.97rem;
    left: -5.625rem;
    min-width: 7.698rem;
}

.themeDropdown img {
    display: flex;
    height: 1.875rem;
}

.themeDropdown button {
    all: unset;
    cursor: pointer;
}

.themeMenu {
    position: relative;

    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0.5rem;

    background: black;
    border: 0.125rem solid var(--theme-accent);
    z-index: 20;

    opacity: 0;
    transform: translateY(-0.5rem) scale(0.95);
    pointer-events: none;

    transition:
        opacity 120ms ease-out,
        transform 120ms ease-out;
}

.themeMenu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.themeOption {
    all: unset;
    cursor: pointer;
    padding: 0.25rem 0.5rem
}

.themeOption:hover {
    color: var(--theme-accent)
}

.titleText {
    font-family: 'Verdana Bold';
    color: white;
    text-shadow: black 0px 1px 0px;
}

.content {
    position: relative;
    max-width: 57.313rem;
    padding: 2rem;
    margin: 0 auto;
}

.hero {
    display: flex;
    justify-content: space-between;
    padding: 0px 0px 0px 2rem;
    margin: 0px;
    align-items: center;
}

.navbar {
    display: flex;
    justify-content: left;
    z-index: 10;
}

.randomtext {
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    width: 57.313rem;
}

.randomtext a {
    color: white;
}

.secretButtons {
    display: block;
    width: 100%;
}

#wipCursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;

    width: 6.25rem;
    transform: translate(12px, 12px);

    opacity: 0;
    transition: opacity 120ms ease-out;
}

.copyright {
    display: flex;
    justify-items: center;
    width: 50%;
    margin-left: 25%;
    background-color: black;
}