@font-face {
    font-family: "Forum";
    src: url("../fonts/Forum-Regular.ttf")
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat-Regular.ttf)
}

@font-face {
    font-family: "Handlee";
    src: url("../fonts/Handlee-Regular.ttf")
}

body {
    background-color: #515e71;
    font-family: "Forum";
    font-weight: 700
}

h1 {
    font-family: "Montserrat";
}

.big {
    font-size: 55px
}

li a,li i {
    color: #55acee
}

li a:hover,li i:hover {
    color: white
}

textarea,input,button {
    outline: none !important
}

.button {
    font-family: "Forum";
    background-color: #e0e0e08f;
    color: #000000;
    border-radius: 15px;
    border: 2px solid #2A3A3F;
    font-weight: 700
}

.button:hover,.label {
    background-color: transparent;
    color: #2A3A3F;
    border: 2px solid #869a4b;
    border-radius: 15px
}

section {
    padding: 10px
}

#me {
    height: 100vh
}

#me h1 {
    color: #f3f3f3;
    padding: 0px;
    margin: 0px
}

#me h3 {
    color: #f3f3f3;
    font-family: "Montserrat"
}

#me .main {
    margin-top: 25vh
}

#me li i {
    margin-right: 0
}

@media only screen and (max-width: 40em) {
    #me .medium {
        font-size:40px
    }
}

#projects {
    background-color: #e5e5e5;
    color: #2A3A3F
}

#projects h1 {
    color: #2A3A3F
}

#projects .cards img {
    width: 200px;
    height: 150px;
    border: 2px solid #ffffff
}

#projects .cards {
    padding: 15px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
    background-color: #f5f5f5;
    border-radius: 6px;
    transition: all .1s ease-in;
    min-height: 458px
}

#projects .cards:hover {
    background-color: #fff
}

#projects .cards h2 {
    font-family: "Forum";
    font-weight: 600
}

#social {
    //font-family: "Montserrat";
    background-color: #f3f3f3
}

#social h1 {
    color: #2A3A3F
}

#social .social {
    font-family: "Montserrat";
    margin-top: 20px
}
.main {
    max-width: 1200px;
    width: 90%;
    margin: auto

}
.platforms {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.platforms .twitter,.platforms .instagram {
    overflow: hidden;
    width: 100%;
    margin-right: 2%;
    margin-bottom: 2%
}

@media (min-width: 700px) {
    .platforms .twitter,.platforms .instagram {
        -webkit-box-flex:1;
        -ms-flex: 1;
        flex: 1
    }
}

.platforms .instagram .header {
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1em 0
}

.platforms .instagram .header img {
    height: 1.5em;
    margin-right: 0.5rem
}

.platforms .instagram .photo {
    border-radius: 0.5rem;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.platforms .instagram .caption {
    background-color: #222;
    padding: 1em;
    padding-bottom: 0.5em;
    font-size: 0.8em;
    margin-top: -1em;
    margin-bottom: 1em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em
}

#about {
    background-color: #e5e5e5;
    color: #292929d4
}

#about p {
    font-family: "Montserrat";
    font-size: 20px
}

#about #portrait {
    margin-top: 7.5%;
    margin-bottom: 7.5%;
    border: 1px solid #2A3A3F;
    box-shadow: 2px 2px 8px 0px black
}

@media only screen and (max-width: 40em) {
    #about #portrait {
        margin-top:0px
    }
}

#contact {
    font-family: "Montserrat";
    background-color: #515e71
}

#contact h1 {
    color: #292f33
}

#contact .button {
    font-family: "Montserrat";
    border: 2px solid #040404
}

#contact li {
    display: block;
    margin-bottom: 10px;
    font-size: 25px
}

#contact a {
    padding-bottom: 5px;
    font-family: "Forum"
}