@media (min-width: 481px) and (max-width: 768px) {
    main {
        padding-top: 3.5em;    
    }
    .logo-container {
        margin-bottom: 1.7em;
    }
    .logo-img img {
        width: 2.8rem;
    }
    .logo-container h1 {
        font-size: 2.5em;
    }
    .paw i {
        font-size: 2.25rem;
        padding: 0.34em;
    }
    .cat-fact {
        padding: 2em;
    }
    .fact-heading h2 {
        font-size: 2rem;
    }
    .fact-heading {
        margin-bottom: 0.8em;
    }
    .fact-container {
        line-height: 1.8;
        word-spacing: 10px;
        letter-spacing: 0.56px;
        font-size: 1.12rem;
    }
    .btn-container {
        margin: 2em 0;
    }
    button {
        padding: 1.12em 2.8em;
        font-size: 1.2rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    main {
        padding-top: 4em;    
    }
    .logo-container {
        margin-bottom: 2em;
    }
    .logo-img img {
        width: 3.3rem;
    }
    .logo-container h1 {
        font-size: 3em;
    }
    .result-container {
        flex-direction: row;
        align-items: stretch;
    }
    .box {
        flex: 1;
    }
    .cat-image, .cat-fact {
        flex: 0 0 50%;
        display: flex;
        flex-direction: column;
    }
    .paw i {
        font-size: 2.55rem;
        padding: 0.4em;
    }
    .cat-fact {
        padding: 2.3em;
    }
    .fact-heading h2 {
        font-size: 2.3rem;
    }
    .fact-heading {
        margin-bottom: 0.92em;
    }
    .fact-container {
        word-spacing: 10px;
        letter-spacing: 0.56px;
        font-size: 1.3rem;
        overflow-y: scroll;
    }
    .btn-container {
        margin: 2em 0;
    }
    button {
        padding: 1.12em 2.8em;
        font-size: 1.2rem;
    }
}

@media (min-width: 1025px) {
    main {
        padding-top: 4.6em;    
    }
    .logo-container {
        margin-bottom: 2.3em;
    }
    .logo-img img {
        width: 3.8rem;
    }
    .logo-container h1 {
        font-size: 3.45em;
    }
    .result-container {
        flex-direction: row;
        align-items: stretch;
    }
    .box {
        flex: 1;
    }
    .cat-image, .cat-fact {
        flex: 0 0 50%;
        display: flex;
        flex-direction: column;
    }
    .paw i {
        font-size: 2.95rem;
        padding: 0.46em;
    }
    .cat-fact {
        padding: 2.3em;
    }
    .fact-heading h2 {
        font-size: 2.8rem;
    }
    .fact-heading {
        margin-bottom: 0.92em;
    }
    .fact-container {
        word-spacing: 10px;
        letter-spacing: 0.56px;
        font-size: 1.3rem;
    }
    .btn-container {
        margin: 2em 0;
    }
    button {
        padding: 1.22em 3.22em;
        font-size: 1.4rem;
    }
}