body {
    /* VARIABLE */

    --placeholderColor: #555555;
    --titleTextColor: #333333d0;
    --textColor: #333333;

    --shadowColor: #00000033;
    --backgroundColor: #fff;

    --itemBackgroundColor: #ffffff55;
    --itemFocusBackgroundColor: #fafafa45;

    --glassInnerOuter: #ffffff;
    --glassInnerInner: #dadada10;

    /* VARIABLE */

    /* GLOBAL */

    --animationEasing: cubic-bezier(0.215, 0.610, 0.355, 1);
    --widthScaleEasing: cubic-bezier(.6,2,.6,1);
    --scaleEasing: cubic-bezier(.6,2,.6,1);
    --globalTransition: 0.25s var(--animationEasing);
    --glass:
        inset -1px -12px 15px var(--glassInnerInner),
        inset 1px 12px 15px var(--glassInnerInner),
        inset -1px -1px 0.5px var(--glassInnerOuter),
        inset 1px 1px 0.5px var(--glassInnerOuter);
    --glassActive:
        inset -1px -12px 15px var(--glassInnerInner),
        inset 1px 12px 15px var(--glassInnerInner),
        inset -0.5px -0.2px 0.1px var(--glassInnerOuter),
        inset 0.5px 0.2px 0.1px var(--glassInnerOuter);

    /* GLOBAL */

    /* PROPERTIES */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -ms-flex-direction: column;
    
    margin: 0;
    overflow: hidden;

    background-color: var(--backgroundColor);
    font-family: "Fira Code", sans-serif;
    -webkit-font-family: "Fira Code", sans-serif;
    
    background-image: url("./images/JPEG/hikari_day.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */

    /* PROPERTIES */

}

body.night {
    /* VARIABLE */

    --placeholderColor: #aaaaaa;
    --titleTextColor: #d0d0d0d0;
    --textColor: #d0d0d0;

    --shadowColor: #ffffff33;
    --backgroundColor: #111;

    --itemBackgroundColor: #22222255;
    --itemFocusBackgroundColor: #55555545;
    
    --glassInnerOuter: #ffffff50;
    --glassInnerInner: #00000010;

    /* VARIABLE */

    /* PROPERTIES */

    background-color: var(--backgroundColor);
    background-image: url("./images/JPEG/hikari_night.jpg");

    /* PROPERTIES */

}

.backgroundImage {
    position: fixed;
    background-color: var(--backgroundColor);

    width: 100%;
    height: 100%;
    min-height: 100vh;

    opacity: 0.6;
}

.backgroundBlur {
    position: fixed;

    width: 100%;
    height: 100%;
    min-height: 100vh;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.content {
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    -webkit-tap-highlight-color: transparent;

    width: 100%;
    height: 100%;

    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
}

#title {
    font-size: 25px;
    font-weight: bold;
    text-shadow: 0 0 25px var(--shadowColor),
        0 0 15px var(--shadowColor);

    color: var(--titleTextColor);
    user-select: none;
    -webkit-user-select: none;
}

input[type="text"], input[type="submit"], button, .questionResultDiv {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-size: 13.5px;

    border: none;
    outline: none;

    box-shadow: 0 0 25px var(--shadowColor),
        inset -1px -12px 15px var(--glassInnerInner),
        inset 1px 12px 15px var(--glassInnerInner),
        inset -1px -1px 0.5px var(--glassInnerOuter),
        inset 1px 1px 0.5px var(--glassInnerOuter);
    padding: 10px;
    margin: 5px;
    border-radius: 30px;

    font-family: "Fira Code", sans-serif;

    transition: background-color var(--globalTransition), 
                box-shadow var(--globalTransition);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

input[type="text"] {
    background-color: var(--itemBackgroundColor);
    color: var(--textColor);
}

input[type="text"]::placeholder {
    user-select: none;
    -webkit-user-select: none;
    
    color: var(--placeholderColor);
}

input[type="text"]:focus {
    box-shadow: 0 0 5px var(--shadowColor), var(--glassActive);
    background-color: var(--itemFocusBackgroundColor);
}

input[type="submit"] {
    background-color: var(--itemBackgroundColor);
    color: var(--textColor);

    cursor: pointer;
}

input[type="submit"]:active, button:active {
    box-shadow: 0 0 5px var(--shadowColor), var(--glassActive);
    background-color: var(--itemFocusBackgroundColor);
}

button {
    background-color: var(--itemBackgroundColor);
    color: var(--textColor);

    user-select: none;
    -webkit-user-select: none;

    padding: 12px;
    margin: 10px;

    width: 200px;

    cursor: pointer;
}

input[id="qqNumberInput"] {
    width: 200px;
}

.qqInputGroup {
    user-select: none;
    -webkit-user-select: none;
}

.questionResultDiv {

    font-size: 13.5px;
    
    min-width: 275px;
    max-width: 350px;
    
    margin: 20px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;

    overflow: hidden;

    color: var(--textColor);
    background-color: var(--itemBackgroundColor);
}

#questionResult {
    padding: 0px;
    opacity: 1;

    min-width: 275px;
    max-width: 350px;

    min-height: 20px;

    /* overflow: hidden; */

    width: 0;
    height: 0;

    transition: opacity var(--globalTransition),
                width 0.3s var(--widthScaleEasing),
                height 0.3s var(--scaleEasing);
}

#questionResult.onChange {
    opacity: 0;
}
.toast {
    position: fixed;
    top: 10px;
    transform: translateY(-50px);
    
    background-color: var(--itemBackgroundColor);
    color: var(--textColor);

    padding: 15px;
    border-radius: 30px;

    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);

    box-shadow: 0 0 0px var(--shadowColor), var(--glass);
    -webkit-box-shadow: 0 0 0px var(--shadowColor), var(--glass);
    -moz-box-shadow: 0 0 0px var(--shadowColor), var(--glass);

    opacity: 0;
    font-size: 15px;
    text-align: center;
    transition: opacity var(--globalTransition),
                transform 0.35s var(--animationEasing),
                backdrop-filter 0.1s var(--animationEasing),
                -webkit-backdrop-filter 0.1s var(--animationEasing),
                box-shadow 0.35s var(--animationEasing),
                -webkit-box-shadow 0.35s var(--animationEasing),
                -moz-box-shadow 0.35s var(--animationEasing);
        
    user-select: none;
    -webkit-user-select: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 0 25px var(--shadowColor), var(--glass);
    -webkit-box-shadow: 0 0 25px var(--shadowColor), var(--glass);
    -moz-box-shadow: 0 0 25px var(--shadowColor), var(--glass);
}

a {
    text-decoration: none;
    color: var(--textColor);
}