*{
    box-sizing:border-box;
}

p:not(:first-child){
    margin-top:0;
}

#particles-js canvas{
    position:fixed;
    z-index:-1;
}

body{
    background-color:#1d1d1d;
    color:#fff;
    margin:0;
    font-family: "Inter", sans-serif;
    display:flex;
    flex-direction:column;
    height:100%;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    overflow-y:scroll;
    &:has(.cursor){  
        cursor:none!important;
    }
}

a{
    cursor:none!important;
}

.cursor {
	pointer-events:none;
	.cursor__ball {
		position:fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		svg{
			height:32px;
			transform-origin: top left;
		}
		path{
			fill: #fff;
            transition:0.25s ease-out all;
		}
	}
}

table{
    border-spacing:0;
    width:100%;
    tr{
        &:nth-child(odd){
            background-color:rgba(255,255,255,0.05);
        }
        td{
            padding:0.25rem;
        }
    }
}

.status{
    position:fixed;
    bottom:0;
    left:1rem;
    z-index:999;
    padding:0.25rem;
    transform:translate(0,100%);
    transition: transform 0.3s cubic-bezier(0.175, 2, 0.32, 2);
    &.active{
        transform: translate(0,-1rem);
    }
}
.page{
    display:none;
    .char-page-body{
        line-height:1.25;
        padding:calc(2rem + 54px) 1rem 1rem 1rem;
    }
    .char-card{
        padding:1rem;
        box-shadow:0 10px 10px rgba(0,0,0,0.5);
        width:50%;
        margin:0 auto 1rem auto;
        .char-card-title{
            font-size:1.25rem;
            font-style:italic;
            padding-bottom:0.5rem;
        }
        &[name="chartitle"]{
            font-size:1rem;
            font-style:italic;
            flex-wrap:wrap;
            display:flex;
            align-items:center;
            gap:1rem;
        }
        .char-stripe:not(:last-child){
            margin-bottom:0.25rem;
        }
    }
    &.active{
        display:block;
    }
    &[name="manage"]{
        #save{
            width:100%;
            padding:0.25rem;
            font-size:1.25rem;
            background-color:#375d34;
            transition:0.25s ease-out all;
            text-align:center;
            &:hover{
                background-color:#416c3e;
            }
        }
        form{
            width:50%;
            margin:0 auto;
        }
        .manage-card{
            background-color:#2d2d2d;
            margin-bottom:1rem;
            textarea{
                width:100%;
                margin-bottom:0.5rem;
                &:last-child{
                    margin-bottom:0;
                }
            }
            .mc-header{
                font-size:1.5rem;
                display:flex;
                justify-content:space-between;
                padding:1rem;
            }
            .mc-body{
                display:none;
                padding:0 1rem 1rem 1rem;
                &.active{
                    display:block;
                }
                .mc-sub{
                    margin-bottom:0.25rem;
                    &:not(:first-child){
                        margin-top:0.5rem;
                    }
                }
                .btn{
                    background-color:rgba(255,255,255,0.2);
                    border:1px solid rgba(255,255,255,0.1);
                    padding:0.25rem;
                    font-size:1rem;
                    text-align:center;
                    transition:0.25s ease-out all;
                    &:hover{
                        background-color:rgba(255,255,255,0.4);
                    }
                }
                input{
                    width:100%;
                    padding:0.25rem;
                    font-size:1rem;
                    background-color:rgba(255,255,255,0.1);
                    border:1px solid rgba(0,0,0,0);
                    color:#fff;
                }
                textarea{
                    padding:0.25rem;
                    font-size:1rem;
                    background-color:rgba(255,255,255,0.1);
                    border:1px solid rgba(0,0,0,0);
                    color:#fff;
                }
            }
        }
    }
    &[name="gallery"]{
        .gallery{
            display:flex;
            flex-wrap:wrap;
            gap:0.25rem;
            >*{
                height:100px;
                width:100px;
                background-size:cover;
                background-position:center;
                background-color:#3d3d3d;
            }
            .img{
                display:flex;
                align-items:end;
                justify-content:end;
                font-size:0.8rem;
                padding:0.25rem;
            }
            .upload-btn{
                display:flex;
                align-items:center;
                justify-content:center;
            }
        }
        .image-edit{
            display:none;
            position:fixed;
            top:0;
            left:0;
            z-index:99;
            height:100%;
            width:100%;
            justify-content:center;
            padding-top:2rem;
            backdrop-filter:blur(10px);
            background-color:rgba(0,0,0,0.2);
            form{
                padding:1rem;
                background-color:#2d2d2d;
            }
            .btn-group{
                margin-top:0.5rem;
                display:flex;
                flex-direction:column;
                gap:0.25rem;
                margin-top:0.5rem;
                #saveimage{
                    width:100%;
                    padding:0.25rem;
                    font-size:1.25rem;
                    background-color:#375d34;
                    transition:0.25s ease-out all;
                    text-align:center;
                    &:hover{
                        background-color:#416c3e;
                    }
                }
                #closemenu{
                    width:100%;
                    padding:0.25rem;
                    font-size:1.25rem;
                    background-color:#FF6961;
                    transition:0.25s ease-out all;
                    text-align:center;
                    &:hover{
                        background-color:#dd5952;
                    }
                }
            }
            &.active{
                display:flex;
            }
        }
        .img-viewer{
            display:none;
            position:fixed;
            top:0;
            left:0;
            z-index:99;
            height:100vh;
            width:100vw;
            justify-content:center;
            padding:1rem;
            backdrop-filter:blur(10px);
            background-color:rgba(0,0,0,0.2);
            .img-viewing{
                height:100%;
                width:100%;
                display:flex;
                align-items:center;
                justify-content:center;
            }
            .img-viewer-details{
                position:fixed;
                bottom:2rem;
                text-align:center;
                background-color:rgba(0,0,0,0.5);
                padding:0.25rem 1rem;
                border-radius:0.5rem;
                backdrop-filter:blur(5px);
                span{
                    font-size:0.8rem;
                }
                a{
                    color:#fff;
                }
            }
            .img-close{
                position:fixed;
                top:1rem;
                right:2rem;
                z-index:100;
                mix-blend-mode: difference;
            }
            &.active{
                display:flex;
            }
        }
    }
}
.progress{
    border-radius: .25rem;
    display: flex;
    font-size: .675rem;
    line-height: 1rem;
    overflow: hidden;
    text-align: center;
}
.progress-bar{
    height: 1rem;
}

.header{
    display:flex;
    justify-content:start;
    flex-wrap:wrap;
    padding:1rem;
    gap:0.5rem;
    position:fixed;
    z-index:9;
    width:100%;
    box-shadow:0 5px 10px rgba(0,0,0,0.3);
    backdrop-filter:blur(10px);
    *{
        text-decoration:none;
        opacity:0.25;
        transition:0.25s ease-out all;
        border-bottom:2px solid rgba(255,255,255,0);
        user-select:none;
        &.active, &:hover{
            opacity:1;
        }
    }
}

@media (max-width:768px){
    .header{
        position:sticky;
        top:0;
    }
    body{
        &:has(.cursor){
            cursor:auto!important;
        }
    }
    .page{
        .char-page-body{
            padding:1rem;
        }
        &[name="manage"]{
            form{
                width:100%;
            }
        }
        .char-card{
            width:100%;
            &[name="chartitle"]{
                text-align:center;
                justify-content:center;
            }
        }
    }
    .cursor{
        display:none;
    }
    .char-flex{
        .char-left{
            flex:0 0 100%;
        }
        .char-right{
            display:none;
        }
    }
}