@media only screen and (min-width:990px) {
    body {
        max-width: 80%;
        margin-left: 10%
    }
    h1 {
        font-size: 4rem;
        margin-left: auto;
        margin-right: auto;
    }
    main h2 {
        font-size: 2.5rem;
    }
    nav ul {
        font-size: 2rem;
    }
    .bio, .float-left p, .float-right p{
        font-size: 1.8rem;
    }
    .bio p{
        font-size: 2rem;
        text-align: left;
    }
    .author-pic img{
        max-width: 600px;
    }

    .grid .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    }

    .main-grid {
        display:flex;
        flex-direction: column;
        max-width: 60%;
        margin-left: 20%;
    }
    hr {
        width: 100%;
    }
}