@media all and (orientation:landscape)
{
	.animation{
	font-size:80px;
	font-weight:bold;
	text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
	}
}

@media all and (max-width: 768px)
{
	.animation{
	font-size:50px;
	font-weight:bold;
	text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
	}
}


    .letter:nth-child(1) {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
    }
    .letter:nth-child(2) {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
    }
    .letter:nth-child(3) {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
    }
    .letter:nth-child(4) {
        -webkit-animation: fade 4s infinite 1600ms;
        animation: fade 4s infinite 1600ms;
    }
    .letter:nth-child(5) {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 2000ms;
    }
    .letter:nth-child(6) {
        -webkit-animation: fade 4s infinite 2400ms;
        animation: fade 4s infinite 2400ms;
    }
    .letter:nth-child(7) {
        -webkit-animation: fade 4s infinite 2800ms;
        animation: fade 4s infinite 2800ms;
    }
	.letter:nth-child(8) {
        -webkit-animation: fade 4s infinite 3200ms;
        animation: fade 4s infinite 3200ms;
    }
              
    @-webkit-keyframes fade {
        50% {
            opacity: 0.02;

        }
    }
              
    @keyframes fade {
        50% {
            opacity: 0.02;

        }
    }