html,
body {
    background-color: #7C99DF;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

.montserrat {
    /*-<uniqueifier >*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size: 8rem;
    color: #3AB1CF;
    font-weight: bold;
    padding-top: 5.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.5rem;
    color: #203E83;
}

h3 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #203E83;
}

/*Banner Section*/
.banner {
    background-color: #203E83;
    color: mintcream;
    text-align: center;
    margin: 0;
    padding: 2rem;
    width: 100%;
    height: 30rem;
}

.smallBanner {
    background-color: #203E83;
    color: mintcream;

}

.contactInfo {
    color: mintcream;
    margin-top: 0;
}

a {
    color: mintcream;
    text-decoration: none;
}

a:hover {
    color: #3AB1CF;
}

/*Education Section*/
.education {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
}

/* College Section*/
.collegeContainer {
    background-color: #577DD6;
    max-width: 35rem;
    width: 100%;
    border: 3px solid midnightblue;
    border-radius: 5px;
    display: inline-block;
    padding: 2rem;
}

.hr {
    color: #203E83;
}

/*Skills Section*/
.skills {
    width: 100%;
    overflow: hidden;
    /* Hides the content outside the view so it can roll in*/
    color: black;
    padding: 0.5rem 0;
    text-align: center;
}

/* Individual Tickers for Each Part of The Skills Section, 
    used to apply unique animations to each Ticker*/
.languagesTicker {
    display: flex;
    animation: ticker 45s linear infinite;
    white-space: nowrap;
}

.skillsTicker {
    display: flex;
    animation: ticker2 45s linear infinite;
    white-space: nowrap;
}

.toolsTicker {
    display: flex;
    animation: ticker 45s linear infinite;
    white-space: nowrap;
}

/*Applied to Each Block in the Ticker*/
.tickerItem {
    display: inline-block;
    margin: 0.5 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border: 2px solid midnightblue;
    background: #577DD6;
}

/*Dedicated Animations for Tickers*/

/*Right to Left Ticker Animation*/
@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/*Left to Right Ticker Animation*/
@keyframes ticker2 {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Work Experience & Volunteering/Leadership */
.work {
    text-align: center;
    margin: 0rem;
    margin-bottom: 3rem;
}

/* Each Job Element, also used for Volunteer Section */
.workCard {
    background-color: #203E83;
    border: 3px solid #577DD6;
    color: white;
    display: inline-block;
    vertical-align: top;
    padding: 1rem;
    border-radius: 3px 4px;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Buttons */

button {
    background-color: #203E83;
    color: mintcream;
    font-weight: bold;
    border: 2px solid midnightblue;
    border-radius: 25px;
    padding: 1rem;
    width: 18rem;
    margin-bottom: 3rem;

}

button:hover {
    background-color: #305cc2;
}

.buttonMenu {
    background-color: #577DD6;
    border: 3px solid midnightblue;
    border-radius: 5px;
}

/*Personal Interest*/
.personal {
    margin: 2rem;
}

/*Container for Image and Paragraph*/
.personalContainer {
    background-color: #577DD6;
    border: 3px solid midnightblue;
    border-radius: 5px;
    padding: 2rem;
}

/*Image*/
.personalImage {
    box-shadow: midnightblue -10px -10px;
}

/*Three Words Section*/
.words {
    height: 10rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

/*Individual Word*/
.word {
    border: 4px solid midnightblue;
    width: 22rem;
    height: 4rem;
    text-align: center;
    display: inline-block;
    margin-right: 5rem;
    font-size: 3rem;
    border-radius: 25px 25px;
    color: #6082B6;
    text-shadow: 2px 1px 1px mintcream;
    background-color: midnightblue;
}

/*Footer*/
.footer {
    text-align: center;
    background-color: #162957;
    width: 100%;
    height: 15rem;
    margin: 0;
    padding: 2rem;
    padding-top: 3rem;
}

/*Projects Page*/

#fullStackProjects {
    background-color: #203E83;
}

#gameDevProjects {
    background-color: #203E83;
}

.projContainer {
    background-color: #7C99DF;
    border: 3px solid midnightblue;
    border-radius: 5px;
}