html, body {
    color:#f5f5f5;
    margin:1rem;
    padding:0
}

html {
    font-family:"Montserrat","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
    font-size:16px;
    overflow-y:auto
}

body {
    background-color:#2c3e50
}

.title {
    padding-top:7em;
    font-family:'Oxanium', sans-serif;font-weight:400;
}

.h3-link {
    text-decoration: none;
    color: #6dbcdb;
}

.h3-link:hover {
    color: #f5f5f5;
}


a {
    -webkit-transition:color 0.2s ease-out;
    -moz-transition:color 0.2s ease-out;
    transition:color 0.2s ease-out;
    color:#6dbcdb;
    text-decoration: none;
}

a:hover {
    color:#f58172
}

h1 {font-size:8rem}
h2{font-size:2.2rem;font-weight:normal;margin: 0;color: #f58172}
h3{font-size:1.3rem;font-weight:normal;margin-top:0.5em;}
h4{font-size:1.3rem; color: #f58172;font-family:'Oxanium', sans-serif;font-weight:400}
p, li{line-height:28px;padding-bottom:1rem;margin-left: 0;font-size:1.2em}
ul {padding-left: 1em;}
.about{padding-top:1.8em;}
.testimonial{border-top: 5px dashed #f5f5f5; padding-top: 3em; margin-top:2em;}
.testi{font-style:italic; font-size:1em;}
.title-email{font-size:2rem}

img.portrait{
    box-sizing:border-box;
    border-radius:50%;
    border:10px solid #f5f5f5;
    margin:2em 3em;
    width:100%;
    height:auto;
    max-width:300px;
    max-height:300px
}

@media screen and (max-width: 992px){
    h1{font-size:15vw}
    h2{font-size:1.7rem}
    h3{font-size:1.2rem}
    h4{font-size:1.2rem}
    .title{padding-top:30px}
    .title-email{font-size:1.5rem}
    .contact{padding-top:1em;text-align:right;font-weight:800}
    img.portrait{
        box-sizing:border-box;
        border-radius:50%;
        border:5px solid #f5f5f5;
        margin:2em 3em;
        width:100%;
        height:auto;
        max-width:200px;
        max-height:200px
    }
}

.column{flex:1}
main .block{display:flex}
main .column.left{text-align:end; max-width: 35%; padding-right:2em}
main .column.right h1{margin-left:-10px;margin-bottom:0.4em}
main .column.right h2{margin-left:-4px;margin-top:0}
main .column.right h3{margin-left:-4px;margin-top:0.3em}
main .column.right .links{margin-top:2.5rem;font-size:1.5rem}
main .column.right .links a{margin-right:0.5rem;text-decoration:none}

@media screen and (max-width: 992px){
    main .block{flex-direction:column}
    main .block.introduction{margin-top:0}
    main .column.left{text-align:right; max-width: 100%;}
    main .column.right h1{margin-top:0}
    main img.portrait{margin:0}
}

footer{
    display:flex;
    margin-top:1rem;
    padding-bottom:1rem;
    padding-top:5rem;
    padding-right: 2rem;
    font-size:0.7rem;
    text-align: right;
}

@media screen and (max-width: 992px){
    footer{
        text-align:right;
        margin-top:0
    }
}