html {
    background-color: #262626;
}

body {
    margin: 0;
}

#topBar {
    background-color: #333333;
    height: 80px;
    border-bottom-style: solid;
    border-bottom-color: #007bff;
}

.navLinks {
    display: inline-flex;
    color: whitesmoke;
    margin-top: 30px;
    margin-left: 50px;
    font-size: 20px;
    /*text-decoration: underline;*/
}

a:visited {
    color: whitesmoke;
}

a:link {
    color: whitesmoke;
}

a:hover {
    color: red;
    text-decoration: red;
}

#name {
    font-size: 50px;
    font-weight: bold;
}

.homepageText {
    color: whitesmoke;
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    margin-left: 150px;
}

#pfp {
    height: 300px;
    width: 300px;
    border-style: solid;
    border-radius: 50%;
    margin-right: 8.2%;
    border-color: #007bff;
    border-width: 5px;
}

.container {
    display: flex;
    /* Centers items vertically */
    align-items: center;
    /* Creates space between the items */
    justify-content: space-between;
    align-content: space-between;
    /*max-width: 1000px;*/
    margin-top: 50px;
    margin-right: 70px;
}

p {
    color: whitesmoke;
    font-size: 23px;
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    /*margin-right: 150px;*/
    max-width: 1200px;
}

#python {
    color: #216A9E;
}

#react {
    color: dodgerblue;
}

#js {
    color: yellow;
}

#mongo {
    color: green
}

#php {
    color: violet;
}

/* ***** EMAIL BOX ***** */
h1 {
    font-size: 35px;
    color: whitesmoke;
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    font-weight: 500;
}

.contactContainer {
    display: flex;
    justify-content: flex-end;
    /*padding-right: 10%;*/
    margin-right: 10%;
    margin-bottom: 20px;
}

.contactBorder {
    width: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    background-color: #333333;
    border-radius: 25px;
    border-style: solid;
    border-color: #007bff;
    padding: 0 1% 1% 1%;
}


.emailBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    /*margin: 0 5% 5% 5%;*/
}

.contactMe {
    margin-bottom: 7px;
}

form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.emailForm{
    margin-bottom: 10px;
    width: 100%;
}

label {
    color: white;
    font-size: 23px;
    font-family: "Zalando Sans SemiExpanded", sans-serif;
}

input{
    font-size: 15px;
    /*padding-right: 45%;*/
    /*padding-bottom: 5%;*/
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    width: 100%;
    box-sizing: border-box;
    margin-top: 3px;
}

#contactMessage {
    font-size: 15px;
    /*padding-right: 53%;*/
    /*padding-bottom: 25%;*/
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    width: 100%;
    box-sizing: border-box;
}

button {
    color: whitesmoke;
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    width: 30%;
    height: 50%;
    background-color: #007bff;
    border-radius: 4px;
    border-style: none;
}

@media (max-width: 1580px) {
    /*#pfp {*/
    /*    margin-right: 0;*/
    /*}*/

    .homepageText {
        margin-left: 70px;
        margin-right: 70px;
    }
}