/* Setting base properties of the body */
body
{
    background-color: rgb(38, 38, 38);
    color: rgb(138, 138, 138);

    font-family: Ubuntu;
    font-weight: 400;
    font-size: 14px;
}



/* Home Screen props */
#home
{
    width: 100%;
    height: 100%;
}


/* Home Page go button */
#home-go-button
{
    width: 400px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.25s;
    cursor: pointer;
}
#home-go-button[enabled="true"]:hover
{
    background-color: rgb(45, 45, 45);
    width: 420px;
}
#home-go-button[enabled="true"]:active
{
    background-color: rgb(32, 32, 32);
    width: 410px;
}
#home-go-button[clicked=true]
{
    width: 0px;
    transition: width 0.5s;
}


/* Loading */
#home-loading-container
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#home-loading
{    
    width: 0px;
    animation: loading 2s infinite linear;
    transition: width 0.5s;
}
#home-loading[loading="true"]
{
    width: 100px;
    transition: width 0.5s;
}
@keyframes loading
{
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg);}
}


/* Main Page Status */
#home-status-container
{
    position: absolute;
    width: 100%;
    top: calc(50% + 30px);
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 10px;

    text-align: center;
}
#home-status-container[good="true"]
{
    display: none;
}
#status-effect
{
    display: none;
}
#status-effect > b
{
    color: rgb(205,45,45);
}