/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    #toggle-bar {
        height: 30px;
    }

    #toggle-bar i {
        font-size: 350%;
    }
    /* About Page */
    #pic {
        height: 160px;
        width: 160px;
    }

    #about-content, #contact form {
        width: 60%;
    }

    #about h4 {
        font-size: 90%;
    }

    #about p {
        font-size: 80%;
    }

    #about-btns button {
        font-size: 90%;
    }

    /* Skills Page */
    #skills h1 {
        font-size: 450%;
    }

    #skills-1 h4,
    #skills-2 h4 {
        font-size: 180%;
    }

    #skills-1 p,
    #skills-2 p {
        font-size: 100%;
    }

    .port-redir h4 {
        font-size: 110%;
    }

    .port-redir i {
        height: 35px;
        width: 35px;
        font-size: 100%;
    }

    /* Other Pages */
    #cincy h1, #highlands h1, #statefarm h1, #kroger h1, #soccer h1, #photo h1 {
        font-size: 200%;
    }
    
    .info h4 {
        font-size: 100%;
    }

    #experience .info h2 {
        font-size: 90%;
    }

    #web h1, #graphic h1 {
        font-size: 250%;
    }

    #web .info h2, #graphic .info h2 {
        width: 60%;
        font-size: 90%;
    }

    #web .info h3, #graphic .info h3 {
        font-size: 90%;
    }

    /* Contact page */
    form input, form textarea {
        font-size: 110%;
    }

    form input:not(:placeholder-shown),
    form textarea:not(:placeholder-shown) {
        padding: 10px;
    }

    footer button {
        width: 40%;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* Navigation change */
    #nav-container {
        min-height: max-content;
        width: 30%;
    }

    nav {
        height: max-content;
        width: 30%;
    }

    #nav-drop-container {
        width: 100%;
    }
    
    #navhead-right h4 {
        font-size: 80%;
    }

    #logo {
        height: 30px;
        width: 30px;
    }

    #text p {
        font-size: 60%;
    }

    #text h4 {
        font-size: 90%;
    }

    .port-redir h4 {
        font-size: 90%;
    }

    .port-redir i {
        height: 30px;
        width: 30px;
        font-size: 90%;
    }

    #link-container {
        width: 100%;
        display: flex;
    }

    #toggle-bar {
        display: none;
    }

    .section {
        position: absolute;
        top: 0;
        right: 0;
        width: 70%;
        min-height: 100vh;
    }

    footer {
        width: 30%;
        position: fixed;
        left: 0;
        bottom: 0;
        min-height: 200px;
        height: max-content;
        background-color: white;
        font-size: 70%;
    }

    #media i {
        margin: 10px 5px;
        font-size: 200%;
    }
    
    footer button {
        font-size: 150%;
        width: 50%;
        background-color: var(--lightergrey);
        color: white;
        outline: none;
        border:none;
        border-radius: 5px;
        margin: 10px 0;
        padding: 10px 0;
        font-weight: 700;
    }
    
    /* About Page background */
    #about::before {
        opacity: 0.12;
    }

    #about h1 {
        font-size: 350%;
    }

    /* Hover Effects */
    #about-btns button:hover {
        cursor: pointer;
        border: none;
        /* background: var(--blueGradient); */
        background: var(--greyGradient);
        color: var(--dark);
        transform: scaleX(.95);
    }

    .port-redir i:hover, .port-redir h4:hover, #logo:hover, #contact form input[type="submit"]:hover, footer button:hover, #media i:hover, nav li:hover {
        cursor: pointer;
    }

    .port-redir i:hover, .port-redir h4:hover ~ i {
        background-color: var(--green);
    }

    nav #link-container li:hover {
        background-color: var(--dark);
    }

    nav #link-container li:hover i {
        color: var(--dark);
        opacity: .2;
    }

    nav #link-container .active-link:hover i, nav #link-container #cred-container .active-link:hover i {
        color: transparent;
        opacity: 1;
    }

    nav #link-container .open:hover i {
        opacity: 1;
    }

    .active-link:hover {
        cursor: default;
    }

    footer button:hover {
        background-color: var(--blue);
    }

    footer #media i:hover {
        color: var(--blue);
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}