designs.css

@font-face
{ 
    font-family : customfont_arial;
    src: url(etc/ARIAL.ttf)
}

@font-face
{ 
    font-family : customfont_bm;
    src : url(etc/BM_hanna_air.otf);
}

@font-face
{ 
    font-family : customfont_monospace;
    src : url(etc/MonaspaceArgon-Light.otf);
}



body
{
    margin : 0;
    padding : 0;
    overflow-x : hidden;
    overflow-y : hidden;
    scroll-behavior : smooth;
    font-family : customfont_arial;
}

.themeSelectorButton
{
    position : absolute; 
    top : 5%; 
    width : 32px; 
    height : 32px;
    border-radius : 50%;
    z-index : 10;
    
    /* outline */
    filter : drop-shadow(1px 0 0px white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0px white) drop-shadow(0 -1px 0 white);
}

.menuIcon
{
    cursor : pointer;
    position : absolute;
    z-index : 10;
    border-radius : 6px;
    
    /* outline */
    filter : drop-shadow(1px 0 0px #30363d) drop-shadow(0 1px 0 #30363d) drop-shadow(-1px 0 0px #30363d) drop-shadow(0 -1px 0 #30363d);
    
    /* animation */
    transition : background ease-in-out 0.3s, color ease-in-out 0.3s;
}

.textBoxBG
{
    font-family : customfont_monospace;
    position : absolute;
    left : 192px;
    top : 128px;
    border-radius : 8px;
    
    /* outline */
    filter : drop-shadow(1px 0 0px #30363d) drop-shadow(0 1px 0 #30363d) drop-shadow(-1px 0 0px #30363d) drop-shadow(0 -1px 0 #30363d);
    
    /* animation */
    transition : background ease-in-out 0.3s, color ease-in-out 0.3s;
}

.mainBackground
{
    /* animation */
    transition : background ease-in-out 0.3s;
}

.outerBox
{
    background : #0d1117; 
    filter : drop-shadow(1px 0 0px #30363d) drop-shadow(0 1px 0 #30363d) drop-shadow(-1px 0 0px #30363d) drop-shadow(0 -1px 0 #30363d); 
    font-size : 6px;
    
    /* animation */
    transition : background ease-in-out 0.3s;
}

.subBackground
{
    /* animation */
    transition : background ease-in-out 0.3s;
}


.SelectedColorText
{
    font-family : customfont_bm;
    
    /* animation */
    transition : color ease-in-out 0.3s;
}


/* imgSizeSelector */
.imgSizeSelector
{
    mix-blend-mode : difference;
    z-index : 10;
    -webkit-appearance : none;
    position : absolute;
    background : #838383;
    font-weight : bold;
    white-space: nowrap;
    transition : color 2s, opacity 0.5s;
    top : 96%;
    left : 88%;
    z-index : 9999;
    padding : 2px;
    height : 3px;
    width : 150px;
    border-radius : 12px;
}

.imgSizeSelector::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    cursor: pointer;
    border-radius : 12px;
    transition : opacity 0.5s;
}



/* marginSelector */
.marginSelector
{
    mix-blend-mode : difference;
    z-index : 10;
    -webkit-appearance : none;
    position : absolute;
    background : #838383;
    font-weight : bold;
    white-space: nowrap;
    transition : color 2s, opacity 0.5s;
    top : 96%;
    left : 78%;
    z-index : 9999;
    padding : 2px;
    height : 3px;
    width : 150px;
    border-radius : 12px;
}

.marginSelector::-webkit-slider-thumb 
{
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    cursor: pointer;
    border-radius : 12px;
    transition : opacity 0.5s;
}


/* marginSelector */
.alignSelector
{
    mix-blend-mode : difference;
    z-index : 10;
    -webkit-appearance : none;
    position : absolute;
    background : #838383;
    font-weight : bold;
    white-space: nowrap;
    transition : color 2s, opacity 0.5s;
    top : 90%;
    left : 88%;
    z-index : 9999;
    padding : 2px;
    height : 3px;
    width : 150px;
    border-radius : 12px;
}

.alignSelector::-webkit-slider-thumb 
{
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    cursor: pointer;
    border-radius : 12px;
    transition : opacity 0.5s;
}





/* hyperlinkWindow */
.hyperlinkWindow 
{
    opacity : 0;
    transition: opacity ease 0.15s;
    z-index : 32;
    position : absolute;
    left : 360px;
    top : 420px;
    text-align: center;
    background-color: #0d1117;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 
        0 0 0 9999px #ffffff01,
        0 0 0 9999px #ffffff01,
        0 0 0 9999px #ffffff01,
        0 0 0 9999px #ffffff01,
        0 0 0 9999px #ffffff01;
        
    /* outline */
    filter : drop-shadow(1px 0 0px #30363d) drop-shadow(0 1px 0 #30363d) drop-shadow(-1px 0 0px #30363d) drop-shadow(0 -1px 0 #30363d);
}

#linkInput 
{
    width: 300px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #30363d;
    border-radius: 4px;
}

#addHyperlinkButton 
{
    padding: 10px 20px;
    background-color: #238636;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#addHyperlinkButton:hover 
{
    background-color: #29903b;
}

/* closeButton */
#closeButton 
{
    background-color: #21262d;
    color: white;
}

#closeButton:hover 
{
    background-color: #292e36;
}


/* addTextButton */
#addTextButton
{
    mix-blend-mode : difference;
    font-family : customfont_bm;
    opacity : 1;
    position : absolute;
    left : 60%;
    top : 14%;
    background-color: rgb(46, 51, 59);
    color: white;
}

#addTextButton:hover 
{
    background-color: #3b4049;
}


/* resetButton */
#resetButton
{
    mix-blend-mode : difference;
    font-family : customfont_bm;
    opacity : 1;
    position : absolute;
    left : 92%;
    top : 14%;
    background-color: rgb(46, 51, 59);
    color: white;
}

#resetButton:hover 
{
    background-color: #3b4049;
}



/* buttons */
.buttons 
{
    display: flex;
    justify-content: center;
    gap: 10px;
}

button 
{
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


a
{
    font-family : Arial; 
    font-size : 16px;
}

.bold
{
    font-family : Arial; 
    font-size : 15px;
    font-weight : bold;
}