/*General Styling Sheet for Michael Heilman's Portfolio website*/

/*Import link for Ubuntu Font from fonts.google.com*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*Import link for Roboto Font from fonts.google.com*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*Global CSS variables*/
:root {
    --nav-footer-color: #C6DBE7;
    --body-color: #EAFCFF;
    --card-background-color: white;
    --hover-color: #ACB9CE;
    --opening-text-color: #d8e5e9;
    --header-font-family: "Ubuntu", sans-serif; /*Font from fonts.google.com*/
    --parag-font-family: "Roboto", sans-serif; /*Font from fonts.google.com*/
}

html {
    scroll-padding-top: 50px;
    /*Adds a bit of padding between the navbar and the "link" location on the page when clicking on the link in
    the navbar*/
    scroll-behavior: smooth;
}

/* *** General Styling *** */
body {
    padding-top: 10vh;
    background-color: var(--body-color);
}

.img-fluid {
    max-width: 75%;
}

p {
    font-family: var(--parag-font-family);
    line-height: 4vh;
    font-size: 1vw;
}

h1, h3 {
    font-family: var(--header-font-family);
    color: black;
}

blockquote {
    font-family: var(--parag-font-family);
}

figcaption {
    font-family: var(--parag-font-family);
}

/* *** End of General Styling *** */

/* *** Navbar Styling *** */
nav {
    background-color: var(--nav-footer-color);
}

#navbarOffcanvasLg {
    background-color: var(--body-color);
}

.navbar-brand {
    font-weight: bold;
    font-size: 2vw;
}

.nav-item:hover{
    background-color: var(--hover-color);
    border-radius: 10px;
}

.nav-link {
    font-family: var(--header-font-family);
    font-weight: bold;
    font-size: 1vw;
}

/* *** End of Navbar Styling *** */

/* *** Footer Styling *** */
footer {
    background-color: var(--nav-footer-color);
}

footer span {
    font-family: var(--header-font-family);
    font-size: 1vw;
}

/* *** End of Footer Styling *** */

/* *** About Page Styling *** */

.change-edu-img, .change-skill-img {
    font-family: var(--parag-font-family);
    font-size: 1vw;
}

/* *** End of About Page styling *** */


/* *** Project Card Styling *** */

.card-title {
    font-family: var(--header-font-family);
}

.card-subtitle {
    font-family: var(--header-font-family);
}


/* *** End of Project Card Styling *** */

/* *** Form Styling *** */
form {
    display: table;
    margin: auto;
}

button[type="submit"] {
    font-family: var(--parag-font-family);
    background-color: white;
    letter-spacing: 0.3vw;
    font-size: 1vw;
    font-weight: bold;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 10px;
}

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

label {
    font-family: var(--header-font-family);
    font-size: 1vw;
    text-decoration: underline;
}

input[type=text] {
    font-family: var(--parag-font-family);
    width: 40vw;
}

textarea {
    font-family: var(--parag-font-family);
}

/* *** End of Form Styling *** */

/* *** Media Query Section *** */
@media screen and (max-width: 527px) {
    p {
        font-size: 3vw;
    }

    .navbar-brand {
        font-size: 3.5vw;
    }

    .nav-link, footer span  {
        font-size: 3vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 3vw;
    }

    button[type="submit"] {
        font-size: 3vw;
    }

    label {
        font-size: 3vw;
    }
}

@media screen and (min-width: 528px) and (max-width: 660px) {
    p {
        font-size: 2.75vw;
    }

    .navbar-brand {
        font-size: 3.25vw;
    }

    .nav-link, footer span  {
        font-size: 2.75vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 2.75vw;
    }

    button[type="submit"] {
        font-size: 2.75vw;
    }

    label {
        font-size: 2.75vw;
    }
}

@media screen and (min-width: 661px) and (max-width: 799px) {
    p {
        font-size: 2.5vw;
    }

    .navbar-brand {
        font-size: 3.25vw;
    }

    .nav-link, footer span  {
        font-size: 2.5vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 2.5vw;
    }

    button[type="submit"] {
        font-size: 2.5vw;
    }

    label {
        font-size: 2.5vw;
    }
}

@media screen and (min-width: 800px) and (max-width: 924px) {
    p {
        font-size: 2.25vw;
    }

    .navbar-brand {
        font-size: 3vw;
    }

    .nav-link, footer span  {
        font-size: 2.25vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 2.25vw;
    }

    button[type="submit"] {
        font-size: 2.25vw;
    }

    label {
        font-size: 2.25vw;
    }
}

@media screen and (min-width: 925px) and (max-width: 1050px) {
    p {
        font-size: 2vw;
    }

    .navbar-brand {
        font-size: 2.75vw;
    }

    .nav-link, footer span  {
        font-size: 2vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 2vw;
    }

    button[type="submit"] {
        font-size: 2vw;
    }

    label {
        font-size: 2vw;
    }
}

@media screen and (min-width: 1051px) and (max-width: 1310px) {
    p {
        font-size: 1.75vw;
    }

    .navbar-brand {
        font-size: 2.5vw;
    }

    .nav-link, footer span  {
        font-size: 1.75vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 1.75vw;
    }

    button[type="submit"] {
        font-size: 1.75vw;
    }

    label {
        font-size: 1.75vw;
    }
}

@media screen and (min-width: 1311px) and (max-width: 1535px) {
    p {
        font-size: 1.5vw;
    }

    .navbar-brand {
        font-size: 2.25vw;
    }

    .nav-link, footer span  {
        font-size: 1.5vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 1.5vw;
    }

    button[type="submit"] {
        font-size: 1.5vw;
    }

    label {
        font-size: 1.5vw;
    }
}

@media screen and (min-width: 1536px) and (max-width: 2269px) {
    p {
        font-size: 1.25vw;
    }

    .navbar-brand {
        font-size: 2vw;
    }

    .nav-link, footer span  {
        font-size: 1.25vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 1.25vw;
    }

    button[type="submit"] {
        font-size: 1.25vw;
    }

    label {
        font-size: 1.25vw;
    }
}

@media screen and (min-width: 2270px) {
    p {
        font-size: 1vw;
    }

    .navbar-brand {
        font-size: 1.75vw;
    }

    .nav-link, footer span {
        font-size: 1vw;
    }

    .change-edu-img, .change-skill-img {
        font-size: 1vw;
    }

    button[type="submit"] {
        font-size: 1vw;
    }

    label {
        font-size: 1vw;
    }
}

/* *** End of Query Section *** */