:root {
    --c-main: #ffffff;
    --c-subtext: #a5a5a5;
    
    --c-hover: ;
    --c-active: ;
    --c-focus: ;
    
    --c-bg: #121212;
    --c-bg-vary: #1f1f1f;
    --c-bg-vary-two: #2a2a2a;
    --c-bg-accent: ;

    --h-bg: ;
    --h-bg-vary: ;
    --h-bg-vary-two: #3a3939;
    --h-bg-accent: #454545;
        
    --w-main: 500;
    --w-subtext: 400;
    
    --s-main: 1.5cqw;
    --s-subtext: 1cqw;
    --s-subsubtext: .5cqw;

    --s-hover: ;
    --s-active: ;
    --s-focus: ;

    --s-outline: .13cqw solid #4f4f5050;
    --s-thin-outline: .1cqw solid #4f4f5050;

    --o-radius: 1cqw;
    --o-thin-radius: .5cqw;
}

::-webkit-scrollbar {
    display: none;
}

* {
    transition: all .3s ease-in-out;
    scroll-behavior: smooth;
    font-family: "Fira Mono";
    font-weight: var(--w-main);
    color: var(--c-main);
    padding: 0;
    margin: 0;
}

html{
    background-color: var(--c-bg);
    padding: 0;
    margin: 0;
}

::selection {
  background: #80004660; /*Highlight Color*/
  color: rgb(242, 176, 255); /*Text Color*/
}

.material-symbols-outlined {
    user-select: none;
    font-variation-settings:
    'FILL' 0,
    'wght' 250,
    'GRAD' 0,
    'opsz' 24
}

nav {
    display: flex;
    justify-content: space-between;
    padding-top: 3cqw;
    max-width: 1024px;
    margin: auto;


    .nav-con {
        display: flex;

        h1 {
            font-family: "fira mono";
            font-size: var(--s-subtext);
            margin-top: auto;
            margin-right: 1.5cqw;
            font-weight: bolder;
            user-select: none;
            cursor: pointer;

            span {
                color: #56768b;
                font-weight: bolder;
                font-family: "fira mono";
            }
        }

        .buttons-con {
            display: flex;
            gap: 1.5cqw;
            vertical-align: middle;
            width: max-content;
            
            .buttons {
                text-decoration: none;
                font-family: "fira mono";
                color: var(--c-subtext);
                font-size: var(--s-subtext);
                margin-top: auto;
                cursor: pointer;
            }

            .buttons:hover {
                color: var(--c-main);
            }

            .more-con {
                margin-top: auto;
                position: relative;

                .section-list {
                    position: absolute;
                    width: max-content;
                    background-color: var(--c-bg-vary);
                    height: max-content;
                    right: -20cqw;
                    top: 2cqw;
                    border-radius: var(--o-radius);
                    border: var(--s-outline);
                    gap: 1cqw;
                    padding: 1cqw;
                    opacity: 0;
                    display: none;

                    .big-option {
                        position: relative;
                        height: 13.6cqw;
                        width: 13.6cqw;
                        border-radius: var(--o-thin-radius);
                        border: var(--s-thin-outline);

                        img {
                            object-fit: cover;
                            height: 100%;
                            width: 100%;
                            border-radius: var(--o-thin-radius);
                            border: var(--s-thin-outline);
                            object-position: 50% 80%;
                            opacity: .3;
                            cursor: pointer;
                            z-index: 1;
                        }

                         img:hover {
                            opacity: .6;
                         }

                         .text-con {
                            position: absolute;
                            bottom: .5cqw;
                            left: .5cqw;
                            width: 13cqw;
                            user-select: none;
                            z-index: 2;

                            h1 {
                                font-weight: 500;
                                font-size: 1cqw;
                            }

                            p {
                                font-weight: 100;
                                font-size: .6cqw;
                                text-wrap: wrap;
                            }
                         }
                    }

                    .small-options-con {
                        display: flex;
                        cursor: pointer;
                        flex-direction: column;
                        gap: .5cqw;

                        .item {
                            display: flex;
                            flex-direction: row;
                            background-color: var(--c-bg-vary-two);
                            height: 3.3cqw;
                            padding: .5cqw;
                            border-radius: .5cqw;
                            gap: 1cqw;
                            width: 20cqw;


                            .icon {
                                display: flex;
                                height: 3.3cqw;
                                width: 3.3cqw;
                                background-color: var(--h-bg-vary-two);
                                border-radius: .3cqw;

                                span {
                                    animation: none;
                                    cursor: pointer;
                                    color: var(--c-subtext);
                                    font-size: 1.5cqw;
                                    margin: auto;
                                }

                                span:hover {
                                    color: var(--c-main);
                                }
                            }

                            .text-area {
                                display: flex;
                                flex-direction: column;
                                gap: .2cqw;
                                margin: auto 0;

                                h1 {
                                    font-size: 1cqw;
                                    margin: 0;
                                }

                                p {
                                    font-size: .7cqw;
                                    color: var(--c-subtext);
                                }
                            }
                        }

                        .item:hover {
                            background-color: var(--h-bg-vary-two);

                            p {
                                color: var(--c-main);
                            }

                            .icon {
                                background-color: var(--c-subtext);
                            }

                            span {
                                color: var(--h-bg-vary-two);
                            }
                        }
                    }
                    
                }
            }
        }
    }

    i {
        color: var(--c-subtext);
        animation: none;
        cursor: pointer;
        font-size: var(--s-subtext);
    }

    i:hover {
        color: var(--c-main);
        animation: spin 2s infinite ease-in-out;
    }

}

.modal-con {
    background-color: black;
    opacity: .4;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 5;
    display: none;
}

main {
    max-width: 1024px;
    margin: auto;
}