@font-face {
    font-family: 'Circe-Rounded-Extra-Bold';
    src: url('../fonts/BitterPro-SemiBold.ttf');
    font-weight: 600;
    font-style: bold;
}

@font-face {
    font-family: 'Circe-Light';
    src: url('../fonts/BitterPro-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

div.preloader {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 20px;
}

div.preloader div.dot {
    width: 17px;
    height: 17px;
    margin: 11px;
    display: inline-block;
    border-radius: 50%;
}

div.preloader div.dot:nth-child(1) {
    animation: pulse 2s 0s linear infinite;
}

div.preloader div.dot:nth-child(2) {
    animation: pulse 2s 0.1666666667s linear infinite;
}

div.preloader div.dot:nth-child(3) {
    animation: pulse 2s 0.3333333333s linear infinite;
}

div.preloader div.dot:nth-child(4) {
    animation: pulse 2s 0.5s linear infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), inset 5px 5px 4px rgba(255, 255, 255, 0), inset -3px -3px 4px rgba(0, 0, 0, 0);
    }
    25% {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.2), inset 5px 5px 4px rgba(255, 255, 255, 0.3), inset -3px -3px 4px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.5), inset 5px 5px 4px rgba(255, 255, 255, 0.3), inset -3px -3px 4px rgba(0, 0, 0, 0.1);
    }
    75% {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.2), inset 5px 5px 4px rgba(255, 255, 255, 0.3), inset -3px -3px 4px rgba(0, 0, 0, 0.1);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), inset 5px 5px 4px rgba(255, 255, 255, 0), inset -3px -3px 4px rgba(0, 0, 0, 0);
    }
}