html {
    background: #8aa7b5;
    background: linear-gradient(-30deg, rgba(138, 167, 181, 1) 0%, rgba(87, 199, 133, 0.12) 50%, rgba(245, 232, 113, 1) 100%);
    height: 100%;
    background-size: 400% 400%;
    animation: gradientt 20s ease infinite;
}

#mobile {
    display: none;
}

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

h1 {
    text-align: center;
    color: darkred;
}

h2 {
    text-align: center;
}

#TODO {
    text-shadow: 1px 1px 4px black;
}

#cool {
    font-style: italic;
}

P {
    color: maroon;
    text-align: center;
    margin: 2vh;
    font-size: larger;
    text-shadow: 1px 1px 1px black;
}

#borderr {
    margin: auto;
    width: 50%;
    border: 6px dotted blue;
    padding: 1em;
    animation-name: borderColor;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

li {
    margin: .2em;
}

@keyframes borderColor {
    0% {
        border-color: blue;

    }

    33% {
        border-color: green;

    }

    66% {
        border-color: red;

    }

    100% {
        border-color: blue;

    }
}

@keyframes gradientt {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

#bottom {
    margin-top: 2em;
    font-weight: 100;
    font-style: italic;
}