.background {
    margin: 0;
/*    filter: blur(8px);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("background.png");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.loading-bar {
    top: 70%;
    height: 5%;
    font-weight: bold;
    position: absolute;
    width: 60%;
    left: 20%;
}

.unloaded {
    width: 60%;
    position: absolute;
    background-color: white;
    z-index: 2;
    /*box-shadow: 5px 5px 3px rgba(10, 10, 10, .4);*/
}

.loaded {
    position: absolute;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #4082e5;
}

.rule-1 {
    top: 45%;
    height: 5%;
    width: 20%;
    left: 41%;
}

.rule-2 {
    top: 51%;
    height: 5%;
    width: 20%;
    left: 41%;
}

.rule-3 {
    top: 57%;
    height: 5%;
    width: 20%;
    left: 41%;
}

.player-info {
    top: 38%;
    height: 27%;
    width: 18%;
    left: 62%;
}

.server-info-header {
    top: 38%;
    height: 5%;
    width: 20%;
    left: 20%;
}

.rules-header {
     top: 38%;
     height: 5%;
     width: 20%;
     left: 41%;
 }

.server-info {
    top: 45%;
    left: 20%;
    height: 20%;
    width: 20%;
}

.bold-text {
    font-weight: bolder;
}

.server-text {
    /*box-shadow: none;*/
    background-color: transparent;
    top: 24%;
    left: 20%;
    height: 7%;
}

.welcome-text {
    /*box-shadow: none;*/
    background-color: transparent;
    top: 20%;
    left: 20%;
    height: 5%;
}

.progress-status {
    /*box-shadow: none;*/
    background-color: transparent;
    top: 75%;
    left: 20%;
    height: 5%;
}
.progress-status-text {
    text-overflow: clip;
    overflow: hidden;
    /*font-size: 2vh;*/
    text-shadow: 3px 3px 2px rgba(10, 10, 10, .5);
}

.big-text {
    height: 100%;
    text-overflow: clip;
    font-family: Impact, serif;
    /*font-size: 4vh;*/
    text-shadow: 5px 5px 4px rgba(10, 10, 10, .6);
}

p {
    margin: 0;
    /*font-size: 5vh;*/
    z-index: 10;
    font-family: Franklin Gothic Medium, serif;
    white-space: nowrap;
}

.progress-number {
    margin-left: 5px;
    top: -5px;
}

.progress-status {
    /*
    transform: translateX(500px);
  */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-6px);}
    60% {transform: translateY(-3px);}
}