html, body {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.github-corner:hover .octo-face {
    display: inline;
}

.github-corner .octo-face {
    display: none;
}

.github-corner:hover .octo-eye {
    animation: octocat-blink 560ms ease-in-out;
}

@keyframes octocat-blink {
    0%, 25%, 100% {
        transform: scale(1);
    }
    60% {
        transform: scale(0, 0);
    }
    85% {
        transform: scale(.8, .8);
    }
}

@media (max-width: 500px) {
    .github-corner:hover .octo-eye {
        animation: none;
    }

    .github-corner .octo-eye {
        animation: octocat-blink 560ms ease-in-out;
    }
}

#root {
    text-align: center;
    margin-top: 4rem;
}

h3.title {
    color: rgb(0, 26, 105);
    font-size: 2.2rem;
}

span.logo {
    font-size: 2.2rem;
    background-color: #ddd;
    border-radius: .5rem;
    padding: 0.5rem 0 0 0.5rem;
    top: 0.25rem;
    position: relative;
    margin-right: 0.5rem;
}

span.logoFirstLetter {
    color: #fc6719;
    font-size: 3rem;
}

span.logoSecondLetter {
    color: #000f63;
    font-size: 3rem;
}

div.description {
    font-size: larger;
    text-align: center;
    margin: 0 auto;
    width: 50%;
}

div.example {
    margin: 2rem auto;
    width: 75%;
}

div.example img {
    width: 100%;
    max-width: 1280px;
}