@font-face {
   font-family: Jaapokki; 
   src: url('../fonts/Jaapokki-Regular.otf');
} 

body {
    color: black;
    font-family: "Jaapokki";
}

.split {
    display: flex;
    height: 100%;
}

.left {
    padding: 10%;
    width: 28%;
}

.right {
    width:50%;
}

.header {
    font-size: 140;
    line-height: 0;
}

.body-text {
    font-size: 20;
}

.dot{
    position:absolute;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}

.dot#one{
    height: 100px;
    width: 100px;
    margin-left: 4%;
    margin-top: 5%;
    background-color: #0097a7;
}

.dot#two{
    height: 50px;
    width: 50px;
    margin-left: 13%;
    margin-top: 8%;
    background-color: #ffd600; 
}

.dot#three{
    height: 30px;
    width: 30px;
    margin-left: 8%;
    margin-top: 14%;
    background-color: #d50000; 
}

.dot#four{
    height: 100px;
    width: 100px;
    margin-left: 80%;
    margin-top:40%;
    background-color: #0097a7; 
}

.text {
    position:absolute;
    width:40%;
    z-index: 1;
}

#portrait {
    position: absolute;
    width: 320;
    margin-top: 15%;
    margin-left: 12%;
    border-radius: 50%;
    z-index: 2;
}

#cubes {
    position: absolute;
    margin-top: 3%;
    z-index:1;
    width: 45%;
}

.buttons {
    margin-top: 120px;
}


.icon {
    position: absolute;
    bottom: 0;
    width: 70px;
    margin: 10px;
}

.icon:hover {
    cursor: pointer;
}

.icon#linkedin:active{
    width:65px;
    content:url("../images/linkedin_pressed.svg");
}

.icon#github{
    margin-left:120px;
}

.icon#github:active{
    width:65px;
    content:url("../images/github_pressed.svg");
}

.icon#shopify{
    margin-left:230px;
}

.icon#shopify:active{
    width:65px;
    content:url("../images/shopify_pressed.svg");
}