body{
    overflow: hidden;
}

.main {
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
    height:99.8vh;
    /* border:solid 1px red */
}
    
/* All gears */
.gear, .gear div {
    position:absolute;
    font-size:60px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(0deg)
}

/* Navigation */
#pupil{
    opacity: 0;
    transition: opacity .6s;
    transition-delay: .2s;
}
#pupil.load{
    opacity: 1;
}

.nav-link{
    color: white;
    text-decoration: none;
}
.nav-link:hover{
    font-weight: bold;
}

/* First gear */
#first.load{
    opacity: 1;
}
#first{
    opacity: 0;
    transition: opacity .2s;
    transition-delay: .2s;

    height:12em!important;
    width:12em!important;

    animation-duration:360s;
    animation-name:first;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
#first > div {
    height:12em!important;
    width:12em!important;
}  
#first > div > span {
    transform-origin:center 6em!important
}
@keyframes first {
    from {transform:translate(-50%,-50%) rotate(0deg)}
    to {transform:translate(-50%,-50%) rotate(360deg)}
}

/* Second gear */
#second.load{
    opacity: 1;
}
#second {
    opacity: 0;
    transition: opacity .3s;
    transition-delay: .2s;

    height:10.525em!important;
    width:10.525em!important;

    animation-duration:360s;
    animation-name:second;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
#second > div {
    height:10.525em!important;
    width:10.525em!important;
}  
#second > div > span {
    transform-origin:center 5.2645em!important;
}
@keyframes second {
    from {transform:translate(-50%,-50%) rotate(0deg)}
    to {transform:translate(-50%,-50%) rotate(-360deg)}
}

/* Third gear */
#third.load{
    opacity: 1;
}
#third{
    opacity: 0;
    transition: opacity .4s;
    transition-delay: .2s;

    height:9.05em!important;
    width:9.05em!important;

    animation-duration:200s;
    animation-name:third;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
#third > div {
    height:9.05em!important;
    width:9.05em!important;
}   
#third > div > span {
    transform-origin:center 4.526em!important;
}
@keyframes third {
    from {transform:translate(-50%,-50%) rotate(0deg)}
    to {transform:translate(-50%,-50%) rotate(-360deg)}
}

/* Fourth gear */
#fourth.load{
    opacity: 1;
}
#fourth {
    opacity: 0;
    transition: opacity .5s;
    transition-delay: .2s;

    height:7.6em!important;
    width:7.6em!important;

    animation-duration:360s;
    animation-name:fourth;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
#fourth > div {
    height:7.6em!important;
    width:7.6em!important;
}  
#fourth > div > span {
    transform-origin:center 3.8em!important;
}
@keyframes fourth {
    from {transform:translate(-50%,-50%) rotate(0deg)}
    to {transform:translate(-50%,-50%) rotate(360deg)}
}

/* Fifth gear */
#fifth.load{
    opacity: 1;
}
#fifth {
    opacity: 0;
    transition: opacity .6s;
    transition-delay: .2s;

    height:6.125em!important;
    width:6.125em!important;

    animation-duration:360s;
    animation-name:fifth;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
#fifth > div {
    height:6.125em!important;
    width:6.125em!important;
}   
#fifth > div > span {
    transform-origin:center 3.07em!important;
}
@keyframes fifth {
    from {transform:translate(-50%,-50%) rotate(0deg)}
    to {transform:translate(-50%,-50%) rotate(-360deg)}
}

/*
.navigation{
    position: absolute;
    width: 100%;
    height: 75px;
    border-bottom: solid 1px gainsboro;
}
*/