/* define constants */
:root {
    --window-header-height: 2rem;

    /* define light mode constants */
    --window-header-background-color: rgb(229,229,234);
    --window-background-color: rgb(242,242,247);
    --window-text-color: black;
    --window-header-border-color: rgb(209, 209, 214);
    --button-text-color: black;
}

/* define dark mode constants */
@media (prefers-color-scheme: dark) {
    :root {
        --window-header-background-color: rgb(58, 58, 60);
        --window-background-color: rgb(28, 28, 30); /* 44, 44, 46 */
        --window-text-color: white;
        --window-header-border-color: rgb(72, 72, 74);
        --button-text-color: black;
    }
 }

body {
    display: block;
    margin: 0px;
}

.blur {
    animation: slow-blur .22s linear forwards;
}

.unblur {
    animation: slow-blur-reverse .22s linear forwards;
}

@keyframes slow-blur {
    0% {
        -webkit-filter: blur(0px) grayscale(0%);
        filter: blur(0px) grayscale(0%);
    }
    100% {
      -webkit-filter: blur(2px) grayscale(18%);
      filter: blur(2px) grayscale(18%);
    }
}

@keyframes slow-blur-reverse {
    0% {
      -webkit-filter: blur(2px) grayscale(18%);
      filter: blur(2px) grayscale(18%);
    }
    100% {
        -webkit-filter: blur(0px) grayscale(0%);
        filter: blur(0px) grayscale(0%);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0%
    }
    100% {
        opacity: 84%;
    }
}

.display-none {
    display: none;
}

#header-menu-bar {
    height: 56px;
    background-color: rgb(229, 229, 239);

    display: flex;

    #name-menu {
        margin-left: 48px;
        padding: 0 8px;
        height: 100%;

        display: flex;
        align-items: center;

        font-size: 32px;
        font-family: "Inter", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }

    .name-menu-mouse-down {
        color: white;
        background-color: rgb(10, 132, 255);

        border-radius: 0 0 4px 4px;
    }

    .popup {
        position: absolute;
        width: 360px;
        height: 116px;
        z-index: 12;

        background-color: var(--window-background-color);

        border-radius: 8px;

        display: flex;

        animation: fade-in .15s linear forwards;

        .popup-left-column {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 8px;
            min-width: 116px;

            .profile-image {
                display: flex;
                justify-content: flex-end;
                padding-top: 8px;
                padding-right: 8px;
            }
            
            .circular-crop {
                width: 72px;
                height: 72px;
                position: relative;
                overflow: hidden;
                border-radius: 50%;
                border: 1px;
                border-style: solid;
                border-color: rgb(174,174, 178);
            
                img {
                    display: inline;
                    margin: 0 auto;
                    height: 100%;
                    width: auto;
                }
            }
        }

        .popup-right-column {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;

            .name-menu-header {
                height: 56px;
                align-content: center;
                text-align: center;
                color: var(--window-text-color);
            }

            .left-row-container {
                display: flex;
                padding: 0 12px 4px 0;
                color: rgb(142, 142, 147);

                div {
                    padding-bottom: 8px;
                }

                .icon {
                    height: 24px;
                    color: var(--window-text-color)
                }
            }
        }
    }

    #name-menu-popup {
        top: 56px;
        left: 48px;
    }
}

.column-header {
    font-size: 24px;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.column-content {
    font-size: 16px;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: var(--window-text-color);
    padding-right: 16px;
}

#wallpaper-container {
    height: calc(100% - 56px);
    width: 100%;
    background-image: url("wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    .window-header {
        height: var(--window-header-height);
        cursor: move;
        z-index: 10;
        background-color: var(--window-header-background-color);
        color: var(--window-text-color);
        border-radius: 8px 8px 0 0;

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

        font-size: 14px;
        font-family: "Inter", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    .window {
        position: absolute;
        z-index: 9;
        background-color: var(--window-background-color);
        color: var(--window-text-color);
        border: 1px solid var(--window-header-border-color);
        border-radius: 8px;

        .window-content {
            height: calc(100% - var(--window-header-height));

            display: flex;

            .small-column {
                height: 100%;
                padding-left: 16px;
            
                display: flex;
                align-items: center;
    
                .thumbnail {
                    height: 200px;
                    min-height: 140px;
                }

                .rounded {
                    object-fit: cover;
                    border-radius: 8px;
                }
            }
    
            .long-column {
                height: 100%;
                padding-left: 16px;
            
                flex-grow: 0;
            
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                
                .column-button {
                    width: 100%;
                    padding-top: 32px;
                    margin-left: -16px; /* looks better with this counterbalancing the text left padding */
                
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                
                    a > button {
                        font-size: 14px;
                        font-family: "Inter", serif;
                        font-optical-sizing: auto;
                        font-weight: 400;
                        font-style: normal;
                        color: var(--button-text-color);
                        height: 2rem;
                    }
                }
            }
        }
    }

    #aws-window {
        width: 32%;
        height: 32%;

        min-width: 450px;
        min-height: 250px;
        
        max-width: 600px;
        max-height: 300px;

        top: 140px;
        left: 88px;
    }

    #education-window {
        width: 32%;
        height: 32%;

        min-width: 450px;
        min-height: 250px;

        max-width: 600px;
        max-height: 300px;

        top: 172px;
        left: 840px;
    }

    #video-window {
        width: 40%;
        height: 40%;

        min-width: 600px;
        min-height: 340px;

        max-width: 900px;
        max-height: 600px;

        top: 520px;
        left: 420px;

        iframe {
            flex-basis: 100%;
        }
    }

    #projects-slideshow-window {
        width: 40%;
        height: 40%;

        min-width: 600px;
        min-height: 320px;

        max-width: 900px;
        max-height: 600px;

        top: 520px;
        left: 720px;

        /* .slider {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
          
        .slides {
            height: 100%;
            display: flex;
        
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        
        .slides::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        
        .slides::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 10px;
        }
        
        .slides::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .slides > div {
            scroll-snap-align: start;
            flex-shrink: 0;
            width: 100%;
            max-width: 900px;
            height: 100%;
            margin-right: 50px;
            border-radius: 10px;
            transform-origin: center center;
            transform: scale(1);
            transition: transform 0.5s;
            position: relative;
            
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        } */
    }
}