@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Comfortaa&family=Fredericka+the+Great&family=Herr+Von+Muellerhoff&display=swap');

@keyframes loading1{
    0% {transform: rotate(0deg);}
    25% {transform: rotate(90deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}
@keyframes color{
    0% {border-color: rgba(255, 0, 255, 0.6);}
    25% {border-color: rgba(153, 0, 255, 0.6);}
    50% {border-color: rgba(0, 0, 255, 0.6);}
    75% {border-color: rgba(0, 153, 255, 0.6);}
    100% {border-color: rgba(0, 255, 255, 0.6);}
}
@keyframes shadow{
    0% {box-shadow: 0px 0px 100px rgba(255, 0, 255, 0.6);}
    25% {box-shadow: 0px 0px 100px rgba(153, 0, 255, 0.6);}
    50% {box-shadow: 0px 0px 100px rgba(0, 0, 255, 0.6);}
    75% {box-shadow: 0px 0px 100px rgba(0, 153, 255, 0.6);}
    100% {box-shadow: 0px 0px 100px rgba(0, 255, 255, 0.6);}
}
@keyframes loading2{
    0% {transform: rotate(360deg); }
    25% {transform: rotate(270deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}
@keyframes opacity{
    0% {opacity: 1; visibility: visible;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}
div.load{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 100;
}
#shadow{
    width: 200px;
    height: 200px;
    border-radius: 210px;
    box-shadow: 0px 0px 100px rgb(0, 255, 255);
    top: calc((100vh / 2) - 100px);
    animation: 3s linear infinite alternate shadow;
}
#firstdiv {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: transparent;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
    transform-origin: center 100%;
    transform: rotate(150deg);
    animation: 8s linear infinite loading1, 8s linear infinite alternate color;
    box-sizing: border-box;
    top: calc((100vh / 2) - 100px);
}
#secdiv {
    width: 180px;
    height: 90px; /* as the half of the width */
    background-color: transparent;
    border-top-left-radius: 100px;  /* 100px of height + 10px of border */
    border-top-right-radius: 100px; /* 100px of height + 10px of border */
    border: 15px solid black;
    border-bottom: 0;
    transform-origin: center 100%;
    transform: rotate(150deg);
    animation: 4s linear infinite loading2, 4s linear infinite alternate color;
    box-sizing: border-box;
    top: calc((100vh / 2) - 90px);
}
#thirddiv {
    width: 150px;
    height: 75px; /* as the half of the width */
    background-color: transparent;
    border-top-left-radius: 85px;  /* 100px of height + 10px of border */
    border-top-right-radius: 85px; /* 100px of height + 10px of border */
    border: 20px solid blue;
    border-bottom: 0;
    transform-origin: center 100%;
    transform: rotate(150deg);
    animation: 2s linear infinite loading1, 2s linear infinite alternate color;
    box-sizing: border-box;
    top: calc((100vh / 2) - 75px);
}
#fourthdiv {
    width: 110px;
    height: 55px; /* as the half of the width */
    background-color: transparent;
    border-top-left-radius: 65px;  /* 100px of height + 10px of border */
    border-top-right-radius: 65px; /* 100px of height + 10px of border */
    border: 25px solid red;
    border-bottom: 0;
    transform-origin: center 100%;
    transform: rotate(150deg);
    animation: 1s linear infinite loading2, 1s linear infinite alternate color;
    box-sizing: border-box;
    top: calc((100vh / 2) - 55px);
}
#back{
    background-color: black;
    width: 100vw;
    height: 100vh;
    top: 0;
    opacity: 0;
    visibility: hidden;
    animation: 4s linear opacity;
}
h2.load{
    color: white;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    top: calc((100vh / 2) + 100px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
}

body{
    background-image: url(images/teemu-paananen-OOE4xAnBhKo-unsplash.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
}
div.page{
    backdrop-filter: blur(6px);
    text-align: center;
    align-items: center;
    padding: 20px 50px 5px 50px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    color: rgb(31, 38, 31);
}
div.page span{
    font-family: 'Audiowide', cursive;
    color: goldenrod;
}
div.page h1{
    font-family: 'Comfortaa', cursive;
}
div.page h2:first-of-type{
    font-family: 'Fredericka the Great', cursive;
    color:aquamarine;
}
div.page h2:last-of-type{
    font-family: 'Herr Von Muellerhoff', cursive;
    font-size: 1.9em;
    background-color: rgba(31, 38, 31, 0.8);
    color: lightgoldenrodyellow;
    padding: 15px;
    border-radius: 10px;
}
div.page p{
    font-family: 'Comfortaa', cursive;
    font-weight: bold;
}