/*fonts: https://github.com/googlefonts/rubik */

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(210deg, #55004f 45%, #22003a 90%);
        background-size: 100%;
        background-attachment: fixed;
        font-family: 'Rubik Variable', sans-serif;
    } 
    h1 {
        color: #b8fbff;
        font-family: 'Rubik Variable', sans-serif;
        padding: 10px 10px 10px 10px;
    }
    p {
        color: #a8b9be; 
        font-family: 'Rubik Variable', sans-serif;
        padding: 10px 10px 10px 10px;
    }
    h5 {
        color: #6f0342AA;
        font-family: 'Rubik Variable', sans-serif;
        padding: 10px 10px 10px 10px;
    }
    h6 {
        color: #1d003565;
        font-family: 'Rubik Variable', sans-serif;
        font-weight: 300;
        padding: 10px 10px 10px 10px;
    }
    .da-bar {
        box-shadow: 0 0 18px 3px #0000004d;
        width: 170px;
        height: 95%;
        padding: 10px;
        display: flex; text-align: center;
        flex-direction: column;
        box-sizing: border-box;
        position: fixed;
        top: 10px;
        bottom: 10px;
        right: 10px;
        border-radius: 20px;
        backdrop-filter: blur(8px);
        min-width: 200px;
        max-width: 200px;
        column-gap: 170px;
    }
    .da-bar::after {
        background-color: #ffffff99;
        bottom: 49.65%;
        content: '';
        filter: blur(8px);
        left: 0;
        position: absolute;
        right: .865%;
        top: 49.65%;
        transform: rotate(-60deg) skewX(40deg);
        z-index: -1;
    }
    .da-bar h3 {
        box-shadow: 1px 1px 2px 1px #000000ba;
        padding: 10px;
        border-radius: 20px;
        display: flex; align-items: center;
        font-family: 'Rubik Variable', sans-serif;;
    }
    .main {
        flex: 70%;
        padding: 20px 30px 20px 30px;
        border: 2px solid black;
        max-width: 85%;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: linear-gradient(50deg, #b986ff 30%, #b5f6ff 70%);
        background-size: 100%;
        background-attachment: fixed;
        font-family: 'Rubik Variable', sans-serif;
    } 
    h1 {
        color: #b8fbff;
        font-family: 'Rubik Variable', sans-serif;
        padding: 10px 10px 10px 10px;
    }
    p {
        color: #a8b9be; 
        font-family: 'Rubik Variable', sans-serif;
        padding: 10px 10px 10px 10px;
    }
    h5 {
        color: #6f0342AA;
        font-family: 'Rubik Variable', sans-serif;
        padding: 10px 10px 10px 10px;
    }
    h6 {
        color: #1d003565;
        font-family: 'Rubik Variable', sans-serif;
        font-weight: 300;
        padding: 10px 10px 10px 10px;
    }
    .da-bar {
        box-shadow: 0 0 18px 3px #0000004d;
        width: 170px;
        height: 95%;
        padding: 10px;
        display: flex; text-align: center;
        flex-direction: column;
        box-sizing: border-box;
        position: fixed;
        top: 10px;
        bottom: 10px;
        right: 10px;
        border-radius: 20px;
        backdrop-filter: blur(8px);
        min-width: 200px;
        max-width: 200px;
        column-gap: 170px;
    }
    .da-bar::after {
        background-color: #ffffff99;
        bottom: 49.65%;
        content: '';
        filter: blur(8px);
        left: 0;
        position: absolute;
        right: .865%;
        top: 49.65%;
        transform: rotate(-60deg) skewX(40deg);
        z-index: -1;
    }
    .da-bar h3 {
        box-shadow: 1px 1px 2px 1px #000000ba;
        padding: 10px;
        border-radius: 20px;
        display: flex; align-items: center;
        font-family: 'Rubik Variable', sans-serif;;
    }
    .main {
        flex: 70%;
        padding: 20px 30px 20px 30px;
        border: 2px solid black;
        max-width: 85%;
    }
}