:root {
    --backgroundColor: #FFFFFF;
    --textColor: #000000;
    --shadowColor: #000000;
}

.hideCursor {
    cursor: none !important;
}

.theme {
    background: var(--backgroundColor);
    color: var(--textColor);
}

.reverseTheme {
    color: var(--backgroundColor);
    background: var(--textColor);
}

body, html {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
}
#clock {
    font-size: 1000%;
}

#switch {
    position: fixed;
    right: 40px;
    bottom: 40px;

    background: none;
    border: none;
}

#locked {
    position: fixed;
    right: 140px;
    bottom: 40px;
}

.locked {
    pointer-events: none;
    user-select: none;
}

#openSettings {
    position: fixed;
    left: 40px;
    bottom: 40px;

    background: none;
    border: none;
}

#repository {
    position: absolute;
    right: 20px;
    top: 20px;

    background: none;
    border: none;
}

#settings {
    width: 400px;
    height: 300px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 8px 0 var(--shadowColor), 0 6px 20px 0 var(--shadowColor);
}

#closeSettings {
    border-radius: 8px;
    border: none;
    width: 80px;
    height: 40px;
    position: absolute;
    right: 20px;
    bottom: 20px;
}

#submitSettings {
    border: none;
    border-radius: 8px;
    width: 80px;
    height: 40px;
    position: absolute;
    right: 110px;
    bottom: 20px;
}

#backgroundSetting {
    font-size: 20px;
    display: flex;
    flex-wrap: nowrap;
}

#backgroundSetting input {
    color:#000000;
    outline: none;
    border-radius: 10px;
    border: none;
    height:20px;
    width:100px;
    position: relative;
    transform: translateX(20px);
    background-color: #FFFFFF;
    box-shadow: 0px 0px 10px var(--shadowColor) inset;
}

#textSetting {
    font-size: 20px;
    display: flex;
    flex-wrap: nowrap;
}

#textSetting input {
    color:#000000;
    outline: none;
    border-radius: 10px;
    border: none;
    height:20px;
    width:100px;
    position: relative;
    transform: translateX(20px);
    background-color: #FFFFFF;
    box-shadow: 0px 0px 10px var(--shadowColor) inset;
}

#languageSetting {
    display: flex;
    flex-wrap: nowrap;
    font-size: 20px;
}

#languageSetting select {
    color:#000000;
    outline: none;
    border-radius: 10px;
    border: none;
    height:20px;
    width:100px;
    position: relative;
    transform: translateX(60px);
    background-color: #FFFFFF;
    box-shadow: 0px 0px 10px var(--shadowColor) inset;
}

#loading {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--backgroundColor);
    color: var(--textColor);
    
    font-size: 800%;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}