/* Light mode */
@media (prefers-color-scheme: light) {
    :root{
        --mainBackground: hsl(0, 0%, 100%);
        --secondaryBackground: hsl(210, 33%, 83%);
        --mainText: hsl(210, 33%, 9%);
        --secondaryText: hsl(210, 33%, 18%);
        
        --mainBackground_50: hsl(0, 0%, 100% ,50%);
        --secondaryBackground_50: hsl(210, 33%, 83% ,50%);
        --mainText_50: hsl(210, 33%, 9% ,50%);
        --secondaryText_50: hsl(210, 33%, 18% ,50%);
    }
    
    .btwInvert{
      filter: invert(0%);
    }
    .wtbInvert{
      filter: invert(100%);
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root{
        --mainBackground: hsl(210, 33%, 9%);
        --secondaryBackground: hsl(210, 33%, 18%);
        --mainText: hsl(0, 0%, 100%);
        --secondaryText: hsl(210, 33%, 83%);

        --mainBackground_50: hsl(210, 33%, 9% ,50%);
        --secondaryBackground_50: hsl(210, 33%, 18% ,50%);
        --mainText_50: hsl(0, 0%, 100% ,50%);
        --secondaryText_50: hsl(210, 33%, 83% ,50%);
    }
    
    .btwInvert{
      filter: invert(100%);
    }
    .wtbInvert{
      filter: invert(0%);
    }
}

* {
    font-family: "Geist Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

.emoji{
    font-family: "Noto Emoji", sans-serif !important;
}
.emoji_c{
    font-family: "Noto Color Emoji", sans-serif;
}

.mainColor_100{
    color: var(--mainColor_100)
}
.mainColor_90{
    color: var(--mainColor_90)
}
.mainColor_80{
    color: var(--mainColor_80)
}
.mainColor_70{
    color: var(--mainColor_70)
}
.mainColor_60{
    color: var(--mainColor_60)
}
.mainColor_50{
    color: var(--mainColor_50)
}
.mainColor_40{
    color: var(--mainColor_40)
}
.mainColor_30{
    color: var(--mainColor_30)
}
.mainColor_20{
    color: var(--mainColor_20)
}
.mainColor_10{
    color: var(--mainColor_10)
}

.padding_1{
    padding: .1em;
}

.border_100{
    border: 1px solid var(--mainColor_100)
}
.border_90{
    border: 1px solid var(--mainColor_90)
}
.border_80{
    border: 1px solid var(--mainColor_80)
}
.border_70{
    border: 1px solid var(--mainColor_70)
}
.border_60{
    border: 1px solid var(--mainColor_60)
}
.border_50{
    border: 1px solid var(--mainColor_50)
}
.border_40{
    border: 1px solid var(--mainColor_40)
}
.border_30{
    border: 1px solid var(--mainColor_30)
}
.border_20{
    border: 1px solid var(--mainColor_20)
}
.border_10{
    border: 1px solid var(--mainColor_10)
}


#pfp{
    width: 10em;
    height: 10em;
}

#pfp > img {
    width: 100%;
    height: 100%;
}