.body {
    width: 100%;
    height: 1000px;
    text-align: center;
}

.background {
    animation-name: change-background;
    animation-duration: 70s;
    animation-iteration-count: infinite;
}

@keyframes change-background {
    0% {
        background: #f4d6db;    
    }
    10% {
        background: blue;    
    }
    20% {
        background: #69b7eb;
    }
    30% {
        background: #b3dbd3;
    }
    40% {
        background: green;    
    }
    50% {
        background: orange;    
    }
    60% {
        background: purple;    
    }
    70% {
        background: ref;    
    }
    80% {
        background: #ac8daf;    
    }
    90% {
        background: #e8e8e8;    
    }
    100% {
        background: #f4d6db;    
    }
}


#title-font {
    animation-name: change-font-color;
    animation-duration: 70s;
    animation-iteration-count: infinite;

}

@keyframes change-font-color {

    0% {
        color: #363636;    
    }
    10% {
        color: white;    
    }
    20% {
        color: #363636;
    }
    50% {
        color: #363636;
    }
    60% {
        color: white;
    }
    70% {
        color: #363636;
    }

}

#link {
    animation-name: change-color-links;
    animation-duration: 70s;
    animation-iteration-count: infinite;
}

@keyframes change-color-links {
    30% {
        color: #276cda;
    }
    40% {
        color: white;
    }
    50% {
       color: #276cda;
   }
}



.container {
    padding: 10px;
    margin-top: 40px;
    font-size: 20px;
}  

.vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
} 

.upright {
    writing-mode: vertical-lr;
    text-orientation: upright;
}