* {
box-sizing: border-box;
}

body {
 background-color: black;
 margin:0;
}

.container {
 width: 100%;
 min-height: 100vh;
 padding: 2em;
 display: flex;
 align-items: center;
 justify-content: space-around;
 flex-direction: column;
}

.logo-wrapper {
 width: 100%;
 max-width: 8em;
}

.logo {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.loader {
 width: 2.2em;
 height: 2.2em;
}

.loader .circle {
 position: absolute;
 width: 2.2em;
 height: 2.2em;
 opacity: 0;
 transform: rotate(225deg);
 animation-iteration-count: infinite;
 animation-name: rotate;
 animation-duration: 4.8s;
}

.loader .circle:after {
 content: '';
 position: absolute;
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: white;
 border: 1px white solid;
 box-shadow: 0 0 1px #0078d7;
}

.loader .circle:nth-child(2) {
 animation-delay: 240ms;
}

.loader .circle:nth-child(3) {
 animation-delay: 480ms;
}

.loader .circle:nth-child(4) {
 animation-delay: 720ms;
}

.loader .circle:nth-child(5) {
 animation-delay: 960ms;
}

@keyframes rotate {
 0% {
 transform: rotate(225deg);
 opacity: 1;
 animation-timing-function: ease-out;
 }
 7% {
 transform: rotate(345deg);
 animation-timing-function: linear;
 }
 30% {
 transform: rotate(455deg);
 animation-timing-function: ease-in-out;
 }
 39% {
 transform: rotate(690deg);
 animation-timing-function: linear;
 }
 70% {
 transform: rotate(815deg);
 opacity: 1;
 animation-timing-function: ease-out;
 }
 75% {
 transform: rotate(945deg);
 animation-timing-function: ease-out;
 }
 76% {
 transform: rotate(945deg);
 opacity: 0;
 }
 100% {
 transform: rotate(945deg);
 opacity: 0;
 }
}