@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

body{

    background-color: var(--background);
    overflow-x: none;
    padding: 8vh 4vh;
    
}

:root{
    --background: #1E212A;  
    --text: #C1BECF;
    --white: #ffffff;
    --lightWhite: rgba(255, 255, 255, 0.5);
    --ultraLightWhite: rgba(255, 255, 255, 0.25);
    --headerText: rgba(193, 190, 207, 0.75);
    --buttonColor: rgba(71, 75, 97, 0.75);
    --heading: rgba(194, 196, 218, 0.8);
    --headerHr: #B1B2D0; 
    --mediumDark: rgba(59, 67, 99, 0.75);

    --cyan: rgba(0, 170, 255, 1);
    --magenta: rgba(255, 0, 229, 1);
    --violet: rgba(122, 0, 229, 1);

    --zeroAbsent: #00FF37;
    --oneAbsent: #9F9F00;
    --twoAbsent: #FF4400;
    --threeAbsent: #A80000;

    --treffen: "#00AAFF";
    --geburtstag: "#FF00E5";
    --sonstiges: "#7A00E5"
}

header{
    width: auto;
    height: 10rem;
    display: flex;
    justify-content: space-between;
}

a{
    font-weight: 700;
    font-size: 1rem;
    color: var(--headerText);
    text-decoration: none;
}

header div{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;

}

header{
    height: min-content;
}

header div hr{
    width: 100%;
    height: 1px;
    background-color: var(--headerHr);
    
    border: none;
    margin-bottom: none;
    padding: 0;
    margin-top: 1rem;
    border-radius: 1px;

}

.basicHr{
    border: none;
    background-color: var(--ultraLightWhite);

    height: 0.5px;
    opacity: 0.5;
    
}

hr{
    margin: 0;
    padding: 0;
}

.longButton{
        border-radius: 0.5rem;
        width: 100%;
        height: 3rem;
        color: var(--heading);
        font-weight: 700;
        /* padding: 2rem 0 0 0; */
        padding-left: 2rem;
        background-color: var(--buttonColor);
        border: none;
        /* margin: 0 1rem 0 0; */
        margin-top: 1rem; 
        font-size: 1rem;
        text-align: left;
        transition-duration: 150ms;
        box-sizing: border-box;
        appearance: none;
    }

.longButton:active{
        
    border-radius: 0.5rem;
        width: 100%;
        height: 3rem;
        color: var(--heading);
        font-weight: 700;
        /* padding: 2rem 0 0 0; */
        padding-left: 2rem;
        background-color: var(--buttonColor);
        border: none;
        /* margin: 0 1rem 0 0; */
        margin-top: 1rem; 
        font-size: 1rem;
        text-align: left;
        transition-duration: 150ms;
        box-sizing: border-box;
        appearance: none;
    
}

    .longButton:first-of-type{
        margin-top: 2rem;
    }

    .longButton:active{
        /* box-shadow: 0px 2px 0px 1px var(--heading); */
    }

    
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--buttonColor) inset !important;
    -webkit-text-fill-color: var(--heading) !important;
    transition: background-color 9999s ease-in-out 0s;
}

    .treffen{
        background-color: #00AAFF !important;
    }

    .treffen::before{
        color: white !important;
    }

    .geburtstag{
        background-color: #FF00E5 !important;
    }

    .geburtstag::before{
        color: white !important;
    }

    .sonstiges{
        background-color: #7A00E5 !important;
    }

    .sonstiges::before{
        color: white !important;
    }