:root {
    --blue1: #0F5A80;
    --blue2: #107DAC;
    --blue3: #1EBBD7;
    --yellow1: #F5D56E;
    --green1: #B5CA8D;
}

@font-face {
  font-family: "Averia";
  src: url("AveriaLibre-Regular.ttf") format("truetype")
}

body.loading { opacity: 0 }

body {
    font-family: Averia, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-weight: normal;
    transition: opacity 0.3s ease;

    &:has(dialog[open]) {
        filter: blur(2px);
    }

    dialog {
        position: fixed;
        z-index: 10;
        border-radius: 0.5em;
        border: none;
        overflow: hidden;
    }

    dialog[open] {
        animation: fadein 0.3s ease forwards;
    }

    @keyframes fadein {
        0%{ opacity: 0 }
        100%{ opacity: 1 }
    }

    dialog.about {
        font-size: 1.5em;
        max-width: 35em;
    }

    dialog .inner {
        overflow-y: scroll;
    }

    dialog::backdrop {
        background-color: var(--blue2);
        opacity: 0.5;
    }

    main {
        position: fixed;
        width: 100vw;
        height: 100dvh;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }

    #logo {
        width: min(35em, 90vw);
    }

    .buttons {
        margin-top: 2rem;
        display: flex;
        flex-direction: row;
        gap: 4rem;
        padding: 0;
        list-style-type: none;

        a {
            cursor: pointer;
            img {
                height: 4rem;
            }
        }

        a:hover {
            filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1102%) hue-rotate(29deg) brightness(86%) contrast(88%);

        }
    }

}

.settings {
    position: fixed;
    top: 1em;
    right: 1em;
}

.cal_title {
    display: flex;
    text-align: center;
    justify-content: center;
    color: var(--blue1);

    img {
        height: 1.1em;
        margin-right: 1rem;
    }
}

.cal {
    margin: auto;
    width: min(1200px, 90vw);
    display: flex;
    max-height: 80vh;

    .calendar {
        display: block;
        margin-right: 0.5em;
        td {
            position: relative;
            width: 10em;
            height: 8em;
            max-width: 10em;
            max-height: 8em;
            border: 1px solid lightgrey;
        }
    
        td.blank {
            background: #eeeeee;
        }
    
        td ul {
            position: absolute;
            font-size: 0.8em;
            top: 2em;
            left: 5px;
    
            padding: 0;
        }
    
        td span.day {
            position: absolute;
            top: 5px;
            left: 5px;
        }
    
        td.today {
            background: var(--blue3);
        }
    }

    .upcoming {
        display: block;
        width: 40%;
        border-left: 3px solid lightgrey; 
        padding: 0.5em;
        h2 { text-align: center; }
        .scrollbox {
            height: 35rem;
            overflow-y: scroll;
            border: 3px solid var(--blue2); 
            padding: 0.5em;

            .event {
                border: 1px solid lightgrey;
                padding: 5px;
                margin-bottom: 1em;
            }
        }

        .delete {
            display: block;
            width: min-content;
            float:right;
        }
    }
}

@media screen and (max-width: 600px) {
    
    .cal {
        flex-direction: column; !important
    }
}

.filter-black {
    filter: brightness(0) saturate(100%);
}

.filter-white {
    filter: brightness(0) saturate(100%) invert(1);
}
.filter-blue {
    filter: brightness(0) saturate(100%) invert(30%) sepia(75%) saturate(526%) hue-rotate(156deg) brightness(87%) contrast(100%);
}

.filter-yellow {
    filter: brightness(0) saturate(100%) invert(100%) sepia(44%) saturate(3325%) hue-rotate(316deg) brightness(106%) contrast(92%);
}

.filter-green {
    filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1102%) hue-rotate(29deg) brightness(86%) contrast(88%);
}