/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 @import url('https://fonts.cdnfonts.com/css/open-sans-condensed-2');

:root {
    --bg-default: #EFD324 !important;
    --primary: #EFD324;
    --primary-dark: #E4C610;
    --primary-darker: #CAB21E;
    --primary-light: #F6DF4D;
    --primary-vibrant: #E4C610;
    --accent: #ABA0B4;
    --accent-dark: #807888;
    --shadow: rgba(205, 153, 0, 0.59);
    --text-shadow: 2px 2px 4px var(--shadow);
    --box-shadow: 2px 2px 4px var(--shadow);
}

body { 
    background: var(--bg-default);
    color: white;
    font-family: 'Open Sans Condensed', sans-serif;
}


body::after {
    content: "";
    position: absolute;    
    background: white;
    width: 4rem;
    height: 4rem;
    top: 5vh;
    right: 5vw;
    z-index: 1000;
    border-radius: 50%;
    box-shadow: 0px 0px 4rem 2rem rgba(255, 255, 255, 0.5);
}


.management-panel {
    background: var(--bg-default);
    color: black;
}


.stroke-primary * {
    stroke: var(--primary);
}

.stroke-primary-dark * {
    stroke: var(--primary-dark);
}

.stroke-primary-darker * {
    stroke: var(--primary-darker);
}

.stroke-primary-light * {
    stroke: var(--primary-light);
}

.fill-primary * {
    fill: var(--primary);
}

.fill-primary-white * {
    fill: white !important;
}

.fill-primary-dark * {
    fill: var(--primary-dark) !important;
}

.fill-primary-darker * {
    fill: var(--primary-darker) !important;
}

.fill-primary-light * {
    fill: var(--primary-light);
}

.profile {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2rem;
}

.profile svg {
    height: 2rem;
}

a {
    color: unset;
    text-decoration: unset;
}

a:hover {
    text-decoration: none;
    color: unset;
}