/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Domine&family=Merriweather:wght@300&family=Roboto+Mono&family=Roboto+Slab&display=swap');

:root {
    --yellow: #FFD54F;
    --warning: #FFC107;
    --lightyellow: #fcf398;
    --lightestpurple: #ebc0fd;
    --lightmagenta: #e75eff;
}

/* Magenta color */
.text-magenta { color: var(--lightmagenta); }

.bg-magenta { background-color: var(--lightmagenta); }

.btn-magenta-primary,
.btn-magenta-primary:hover {
    background-color: var(--lightmagenta);
    color: black;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-magenta-primary:hover {
    border-radius: 0px;
    box-shadow:  2px 2px 0px #bd4dd1, -2px -2px 0px #ff6fff;
}

.btn-magenta-outline,
.btn-magenta-outline:hover {
    background-color: black;
    color: var(--lightmagenta);
    border: 2px solid var(--lightmagenta);
    border-radius: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn-magenta-outline:hover {
    border-radius: 0px;
    box-shadow:  4px 4px 0px #bd4dd1, -4px -4px 0px #ff6fff;
}

.btn-magenta-outline > a {
    text-decoration: none;
    color: var(--lightmagenta);
    font-family: 'Roboto Mono', monospace;
}

.btn-magenta-primary > a {
    text-decoration: none;
    color: black;
    font-family: 'Roboto Mono', monospace;
}

body {
    background-color: black;
    color: white;
    font-family: 'Merriweather', serif;
}

.main-section { height: 100%; }
@media all and (min-width: 1250px) { .main-section { height: 100vh; } }
.main-section h1 {
    font-weight: bold;
    font-family: 'Roboto Mono', monospace;
    color:  #e75eff;
}

.h2 { font-size: 1.5em; font-weight: bolder; }
.h4 { font-size: 1em; font-weight: bolder; }
.h5 { font-size: 0.83em; }
.h6 { font-size: 0.75em; }