html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

pre {
    margin: 0;
    padding: 0;
    font-family: Consolas,monaco,monospace;
    font-size: 0.6vw;
    line-height: 0.4;
    color: red;
    animation: colorchange 1s linear 0s infinite;
    -webkit-animation: colorchange 1s linear 0s infinite;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (orientation:landscape) and (max-width: 1259px) {
    pre {
        font-size: 0.8vw;
    }
}

@media screen and (orientation:portrait) {
    pre {
        font-size: 0.8vh;
        transform: rotate(90deg);
    }
}

@keyframes colorchange
{
    0%   {color: red;}
    33%  {color: green;}
    66%  {color: blue;}
    100% {color: red;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%   {color: red;}
    33%  {color: green;}
    66%  {color: blue;}
    100% {color: red;}
}