/* @font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(./fonts/Open_Sans/OpenSans-Light.ttf) format("truetype");
} */

#app {
    font-family: "Open Sans", sans-serif;
}

.divspinner {
    display: flex;
    justify-content: center;
    height: 100vh;
}

.spinner {
    align-self: center;
    position: absolute;
}

.container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 6px solid rgba(104, 1, 1, 0.8);
    border-bottom-color: transparent;
    border-top-color: transparent;
    margin: auto;
    animation: rotate-container 1.4s linear infinite;
}

.one {
    border: 6px solid rgba(134, 0, 0, 0.8);
}

.two {
    border: 6px solid rgba(190, 1, 1, 0.8);
}

.three {
    border: 6px solid rgba(220, 18, 18, 0.8);
}

.one,
.two,
.three {
    border-radius: 50%;
    border-bottom-color: transparent;
    border-top-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.one {
    width: 75px;
    height: 75px;
    top: 10px;
    z-index: 2;
    animation: rotate-one 1.2s linear infinite;
}

.two {
    width: 50px;
    height: 50px;
    top: 20px;
    z-index: 3;
    animation: rotate-one 1s linear infinite;
}

.three {
    width: 25px;
    height: 25px;
    top: 30px;
    z-index: 4;
    animation: rotate-one 0.8s linear infinite;
}

@keyframes rotate-container {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate-one {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%) rotate(360deg);
    }
}