@font-face {
    font-family: "mon-bold";
    src: url(montserrat.bold.ttf);
}

@font-face {
    font-family: "mon-reg";
    src: url(montserrat.regular.ttf);
}

@font-face {
    font-family: "ubuntu";
    src: url(Ubuntu-Regular.ttf);
}


* {
    margin: 0; 
    padding:0;
}




header {
    
    background-color: rgb(17, 19, 27);
    color: white;
    padding: 20px; 

}
#header-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

#email, #name, #location {
    color: white;
    font-family: "mon-bold";
}

#email a {
    color: white; 
    list-style-type: none;
    text-decoration: none;
}
#email a:hover {
    color: rgb(150, 125, 78);
}


nav {
    z-index: 2;
    display: flex;
    background-color: white;
    position: sticky;
    top: 0;
    justify-content: center;
    padding: 15px; 
   
}
nav ul {
   overflow: hidden;
}

nav li {
    display: inline-block;
 
}

nav a {
    color: rgb(150, 125, 78);
    font-family: "mon-reg";
    font-size: 20px; 
    padding-left: 12px;
    text-decoration: none;
}

main, .container {
    z-index: 1;
    font-size: 18px; 
    font-family: "ubuntu";
    font-weight: bold;
}


.container {
    
    display: flex;
    flex-direction: row;
    justify-content: center;


}

aside{
    padding: 30px;
    background-color: #e9ecf1;
    margin-top: 50px;
    font-family: "ubuntu";
    width: 300px;
    margin-right: 25px;
    clip-path: polygon(
        0% 0px,                 /* top left */
        0px 0%,                 /* top left */
        calc(100% - 50px) 0%,    /* top right */
        100% 50px,               /* top right */
        100% calc(100% - 20px),  /* bottom right */
        calc(100% - 0px) 100%,  /* bottom right */
        0px 100%,               /* bottom left */
        0 calc(100% - 20px)  

    );
} 

/*aside:before {
    content: "";
    position:absolute;
    margin:-20px;
    width:40px;
    height:40px;
    transform:rotate(45deg);
    background-color:rgb(255, 255, 255);  to see where it is

  } */



aside p {
    
    font-family: "ubuntu";
    margin-bottom: 20px;
    text-align: left;
    width: auto;
}
aside h3 {
    
    margin-bottom: 15px;
}


main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boxes h2 {
    font-weight: bold;
}

.boxes {
    text-align: left;
    width: 600px;
    padding-bottom: 5vh;

}

.img_cirle {
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px
}