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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --font: "Urbanist", "Segoe UI", Helvetica, sans-serif;

    --black: #000;
    --white: #fff;

    --dark-1: #0c0c0c;
    --dark-2: #181818;
    --gray: #ccc;
    --light-1: #fcfcfc;
    --light-2: #f5f5f5;

    --crimson: #e10031;
}

body{
    color-scheme: light;
    min-height: 100vh;
    font-family: var(--font);
    color: light-dark(var(--black), var(--white));
    background: light-dark(var(--white), var(--dark-1));
}

::-webkit-scrollbar{
    width: 4px;
}

::-webkit-scrollbar-thumb{
    background: rgb(255, 0, 49, .2);
}

/* Text */
h1, h2, h3, h4, h5, h6{
    line-height: 1.15;
    letter-spacing: -0.008em;
    font-weight: 700;
}

h1{
    font-size: 2.986rem;
}

h2{
    font-size: 2.488rem;
}

h3{
    font-size: 2.074rem;
}

h4{
    font-size: 1.728rem;
}

h5{
    font-size: 1.44rem;
}

h6{
    font-size: 1.2rem;
}

p{
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
}

main{
    width: 100vw;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: min-content auto;
    gap: 2rem;
    transition: .2s ease-in-out;

    picture{
        width: 240px;
        height: 240px;
        overflow: hidden;
        border-radius: 25px;

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    #replay{
        display: flex;
        align-items: start;
        justify-content: center;
        flex-direction: column;
        gap: .4rem;
    }
}

.menu{
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 99;
}

#image{
    position: fixed;
    width: 140px;
    bottom: 0;
    right: 1.5rem;
    transition: .3s ease-in-out;
    z-index: 9;
}

.btn-icon{
    border: none;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: .3rem .4rem;
    color: var(--gray);
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: .25s ease-in-out;
    z-index: 100;

    &:hover{
        color: light-dark(var(--black), var(--white));
        background: light-dark(var(--light-2), var(--dark-2));
    }

    &:active{
        transform: scale(.9);
    }
}

.color{
    color: var(--crimson) !important;
}

.modal{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0, 0, 0, .4);
    transform: translate(-50%, -50%);
    transition: .01s ease-in-out;
    z-index: 9999;

    figure{
        width: fit-content;
        height: 80%;
        border-radius: 15px;
        overflow-y: scroll;
        padding: 1rem 2rem;
        background: light-dark(var(--light-1), var(--dark-1));
        transition-delay: .1s;

        figcaption{
            margin-bottom: 1rem;

            h4{
                font-style: italic;
            }
        }
    }

    &.out{
        width: 0;
        height: 0;
        visibility: hidden;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    main{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 5rem;
        align-items: center;
    }
    
    .menu {
        top: 1rem;
        right: 1rem;
        gap: 0.5rem;
    }
    
    #image {
        transform: scale(.7);
        bottom: 0;
        right: .5rem;
    }
    
    .modal figure {
        height: 80%;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    main{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 5rem;
        align-items: center;
    }
    
    .menu {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.25rem;
    }
    
    #image {
        transform: scale(.7);
        bottom: 0;
        right: .5rem;
    }
    
    .modal figure {
        height: 90%;
    }
}