/* Adjust for screen size */
@media screen and (max-width:900px){
    /* Navbar */
    .navbar h1 span{
        display: none;
    }
    .dropdown{
        display: block;
        float: right;
    }
    .dropdown a{
        color: white;
        padding: 5%;
        text-decoration: none;
        display: block;
    }
    .drop-content{
        display: none;
        position: absolute;
        background-color: var(--blue-main);
        min-width: 160px;
        z-index: 1;
    }
    .dropbtn{
        font-family: inherit;
        margin: 0;
    }
    .dropdown a:hover, .dropdown:hover .dropbtn {
        color: var(--magenta-accent);
        cursor: pointer;
    }
    .navbar ul{
        display: none;
    }
    /* About Me */
    .about-section h2{
        font-size: 36px;
    }
    .section-text{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
    }
    .section-text span{
        display: none;
    }
    .section-text h2{
        font-size: 36px;
    }
    /* Main Container */
    .master-container{
        flex-direction: column;
    }
    .master-container h2{
        font-size: 50px;
        padding-left: 0%;
        padding-right: 0%;
    }
    .row{
        flex-direction: column;
    }
    .row a{
        width: 100%;
        margin-bottom: 5%;
    }
    .card-title{
        flex: 1 1 50px; /*need extra help with this*/
    }
    /* Contact Section */
    .contact-container a{
        margin: 5%;
    }
    /* Footer */
    footer{
        margin-top: 8%;
    }
    footer h4{
        font-size: 16px;
    }
}

@media screen and (max-width:420px){
    .text-box h3{
        font-size: 16px;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .text-box p{
        font-size: 12px;
        margin: 2%;
    }
    .card-btn{
        font-size: 16px;
    }
}