* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body, html, #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Arial', sans-serif !important;
    line-height: normal !important;
}

body.dark, .dark .loading-screen-container {
    background-color: #1d1f27;
    color: white;
}

body.light, .light .loading-screen-container {
    background-color: white;
    color: black;
}


.loading-screen-container {
    width: 100%;
    height: 100%;

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

.loader {
    position: relative;
    width: 60px;
    height: 65px;
}

.side-polygon {
    width: 50px;
    height: 50px;
    clip-path: polygon(0px 0px, 0px 30px, 27px 42px, 27px 31px, 10px 23px, 10px 5px);
    background-color: #ff0000;
}

.top-polygon {
    position: absolute;
    width: 60px;
    height: 50px;
    clip-path: polygon(2px 18px, 12px 23px, 30px 12px, 48px 23px, 58px 18px, 30px 0px);
    top: 0;
    background-color: #a3cb6a;
}

.top-polygon-animation {
    animation: top-polygon-animation 1s infinite linear;
    -webkit-animation: top-polygon-animation 1s infinite linear;
}

.left-polygon {
    position: absolute;
    top: 23px;
    background-color: #64c5c3;
}

.left-polygon-animation {
    animation: left-polygon-animation 1s infinite linear;
    -webkit-animation: left-polygon-animation 1s infinite linear;
}

.right-polygon {
    position: absolute;
    top: 23px;
    left: 10px;

    background-color: #222245;

    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.right-polygon-animation {
    animation: right-polygon-animation 1s infinite linear;
    -webkit-animation: right-polygon-animation 1s infinite linear;
}

@keyframes top-polygon-animation {
    0% {
        top: 0;
    }
    25% {
        top: -2px;
    }
    50% {
        top: -5px;
    }
    75% {
        top: -2px;
    }
    100% {
        top: 0;
    }
}

@-webkit-keyframes top-polygon-animation {
    0% {
        top: 0;
    }
    25% {
        top: -2px;
    }
    50% {
        top: -5px;
    }
    75% {
        top: -2px;
    }
    100% {
        top: 0;
    }
}

@keyframes left-polygon-animation {
    0% {
        top: 23px;
        left: 0;
    }
    25% {
        top: 25px;
        left: -2px;
    }
    50% {
        top: 27px;
        left: -5px;
    }
    75% {
        top: 25px;
        left: -2px;
    }
    100% {
        top: 23px;
        left: 0;
    }
}

@-webkit-keyframes left-polygon-animation {
    0% {
        top: 23px;
        left: 0;
    }
    25% {
        top: 25px;
        left: -2px;
    }
    50% {
        top: 27px;
        left: -5px;
    }
    75% {
        top: 25px;
        left: -2px;
    }
    100% {
        top: 23px;
        left: 0;
    }
}

@keyframes right-polygon-animation {
    0% {
        top: 23px;
        left: 10px;
    }
    25% {
        top: 25px;
        left: 12px;
    }
    50% {
        top: 27px;
        left: 15px;
    }
    75% {
        top: 25px;
        left: 12px;
    }
    100% {
        top: 23px;
        left: 10px;
    }
}

@-webkit-keyframes right-polygon-animation {
    0% {
        top: 23px;
        left: 10px;
    }
    25% {
        top: 25px;
        left: 12px;
    }
    50% {
        top: 27px;
        left: 15px;
    }
    75% {
        top: 25px;
        left: 12px;
    }
    100% {
        top: 23px;
        left: 10px;
    }
}