@import "reset.css";
@import "props.css";
@import "prism.min.css";

body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    overflow: hidden;
    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}

::-webkit-scrollbar {
    width: .5rem;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: 1px solid transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-slate-800);
    outline: 1px solid var(--color-slate-800);
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

main {
    background-color: var(--color-slate-700);
    color: var(--color-neutral-200);
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

.slide {
    scroll-snap-align: start;
    position: relative;
    height: 100%;
    flex: 1 0 100%;
    font-size: var(--text-size-m);

    

    h1 {
        font-size: var(--text-size-2xl);
    }

    h2 {
        font-size: var(--text-size-xl);
        border-bottom: 2px solid var(--color-neutral-200);
        padding-inline: var(--space-size-xs);
    }

    &.title {
        display: flex;
        flex-direction: column;
        gap: var(--space-size-sm);
        align-items: center;
        justify-content: center;

        h2 {
            border-bottom: 0px solid;
        }
    }

    &.statement {
        ul {
            width: 100%;
            margin: var(--space-size-3xl) auto;
        }
    }
    
    h1, h2, h3, h4 {
        a {
            text-decoration: none;
        }
    }

    a {
        color: white;
    }

    ul {
        max-width: 60ch;
        display: flex;
        flex-direction: column;
        gap: var(--space-size-m);
    }

    pre[class*=language-] {
        max-width: 60ch;
        max-height: 80vh;
        max-height: 80dvh;
        font-size: var(--text-size-s);        
    }

    pre, code {
        word-wrap: 
    }

    input[type="checkbox"][data-role="toggle"] {
        appearance: none;
        background: lightgray;
        border: 1px solid gray;
        width: 55px;
        height: 25px;
        border-radius: 20px;
        position: relative;
        cursor: pointer;

        
        &::before {
            content: "";
            width: 20px;
            aspect-ratio: 1;
            background: gray;
            position: absolute;
            left: 2px;
            top: 1px;
            border-radius: 20px;
            border: 1px solid transparent;
            transition: left .2s ease-in-out, right .2s ease-in-out;
        }
        
        &:checked {
            background: var(--color-green-500);
            
            &::before {
                border-color: gray;
                background-color: white;
                left: calc(100% - 22px);
            }
        }
    }

    .grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: space-around;
        padding: var(--space-size-s);

        > :not(:first-child) {
            flex-shrink: 1;

            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--space-size-s);
            flex-basis: 40%;
        }

        > :first-child {
            min-width: 40ch;
            flex-basis: 60%;
            flex-grow: 1;
        }

    } 

    dialog {
        z-index: 10;
    
        &::backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
    
    button {
        margin-block-start: var(--space-size-s);
    }

    details {
        position: relative;
        width: max-content;
        min-width: 20ch;
        background: white;
        border-radius: 10px;
        border: 1px solid darkgray;
        color: black;
      
        summary {
            display: flex;
            cursor: pointer;
            position: relative;
            border-bottom: 1px solid transparent;
            padding: 10px;
            align-items: center;
            justify-content: space-between;
            
            svg {
                width: var(--text-size-s);
                height: auto;
                transform: rotate(180deg) translate(-1px);
                transition: transform .3s linear;
            }

            &::-webkit-details-marker {
                display: none;
            }
        }
        
        &[open] summary {
            border-color: darkgray;

            svg {
                transform: rotate(0deg);
            }

        }
    }
}