body,h1,h2,h3,h4,h5,h6{
     font-weight:200;
     font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif 
}
 html{
     box-sizing:border-box;
     font-size:62.5%;
     margin:0;
     padding:0;
     height: 100%;
     color-scheme: light;
}
 body{
     letter-spacing:.01em;
     font-size:1.5em;
     background-repeat: no-repeat;
     background-attachment: fixed;
     margin: 0;
     padding: 0;
     min-height: 100vh;
}
 .container{
     max-width:100%;
     width:100%;
     padding-left: 2rem;
     padding-right: 2rem;
     box-sizing: border-box;
}
 .row{
     display:flex;
     flex-flow:row wrap;
     justify-content:space-between 
}
 .row>:first-child{
     margin-left:0 
}
 .row>:last-child{
     margin-right:0 
}
 .col{
     -webkit-box-flex:1;
     -moz-box-flex:1;
     -webkit-flex:1;
     -ms-flex:1;
     flex:1 
}
 .col,[class*=" col-"],[class^=col-]{
     margin:1rem 
}
 .gradient {
     background: #3fada8;
     background: -webkit-linear-gradient(top, #3fada8, #808080);
     background: linear-gradient(to bottom, #3fada8, #808080);
     background-attachment: fixed;
     min-height: 100vh;
}
 h1,h2,h3{
     letter-spacing:-.1rem 
}
 h1{
     font-size:4rem;
     line-height:1.2;
     color: #fff;
}
 h3 {
     font-size: 20px;
     line-height: 1.2em;
     background: #222;
     color: #fff;
     margin-bottom: 5px;
     display: inline-block;
     text-transform: uppercase;
     -webkit-clip-path: polygon(4% 9%, 100% 0, 97% 100%, 0 100%);
     clip-path: polygon(4% 9%, 100% 0, 97% 100%, 0 100%);
     padding: 8px 12px 6px;
     margin-top: 1vh;
}
 i{
     font-size:1.4rem;
}
 a{
     color:#000;
     transition:all .1s ease;
     font-weight:500;
     text-decoration: none;
}
 a:hover{
     color:#fff;
}
 p {
     line-height: 1.5em;
}
 ul{
     list-style:circle inside;
     padding:4px;
     line-height: 1.5em;
}
 ol{
     list-style:decimal inside 
}
 .name{
     padding-bottom: 1px;
     -webkit-clip-path: polygon(0 0, 100% 19%, 100% 100%, 0 100%);
     clip-path: polygon(0 0, 100% 19%, 100% 100%, 0 100%);
     background:#000;
     display: inline-block;
}
 .icons{
     width: 150px;
     display: inline-block;
     vertical-align: middle;
     padding-left: 1vw;
     letter-spacing: 10px;
}
 #photo {
     height: 100vh;
     position: fixed;
     right: 2rem;
     top: 0;
}
 .text-col {
     margin-left: 6vw;
}
 @media only screen and (max-width:1100px) {
     .row {
         flex-direction: column;
    }
     .photo-col {
         overflow: hidden;
         aspect-ratio: 8 / 6;
         flex: 1;
         margin-bottom:0rem;
    }
     #photo {
         height: auto;
         width: 90%;
         max-width: 100%;
         margin-top: -15%;
         position: relative;
         right: auto;
         top: auto;
         display: block;
    }
}
/* --- Responsive layout --- */
 @media only screen and (max-width:767px) {
     #photo {
         height: auto;
         width: 100%;
         max-width: 100%;
         position: relative;
         right: auto;
         margin-left: 0;
         display: block;
    }
     .text-col {
         margin-left: 0;
         margin-right: 0;
    }
     h1 {
         font-size: 3rem;
         word-wrap: break-word;
         overflow-wrap: break-word;
    }
     .name {
         max-width: 100%;
         word-wrap: break-word;
    }
     .icons {
         width: auto;
         padding-left: 0;
    }
}
 @media screen and (max-width:768px){
     .col,[class*=" col-"],[class^=col-]{
         margin:0;
         flex:0 0 100% 
    }
     .container {
         padding-left: 1rem;
         padding-right: 1rem;
    }
     body {
         overflow-x: hidden;
    }
}
 @media screen and (max-width:400px){
     .hide-phone{
         display:none 
    }
}
 @media screen and (max-width:768px){
     .hide-tablet{
         display:none 
    }
}