@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Heebo:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');

html {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    scroll-behavior: smooth;
}

nav {
    width: 95%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
}

.flex-nav-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px 10px 10px 0px;
    width: 100%;
    background-color: white;
    
}

.flex-nav-container a {
    margin: 0 23px 1px 0px;
    text-decoration: none;
    color: #414141;
    font-family: 'Questrial', sans-serif;
    text-shadow: 1px 1px 1px #fff;
}

.flex-nav-container a:hover {
    /* padding-bottom: 10px; */
    border-bottom: 1px solid #414141;;
    margin-bottom: 0px;
    text-decoration: none;
    color: #414141;
}

.hero {
    /* height: 100%;
    width: 100%;
    position: absolute; */
    height: 100vh;
    width: 100%;
    margin-bottom: 100px;
}

#main-photo {
    position: absolute;
    height: 100vh;
    z-index: 20;
}

.main-photo-container {
    position: absolute;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    z-index: 8;
    margin: 0px;
    padding: 0px;

}

.main-photo-container img {
/* width: 100%;
height: auto; */
height: 100vh;
width: auto;
/* position: absolute; */
/* z-index: 19; */
}

.greetings {
    display: inline-block;
    margin-top: 24%;
    margin-left: 55%;
    position: absolute;
    /* background-color: whitesmoke; */
    z-index: 9;
    padding: 30px;
}

.greetings *{
    color: #414141;
    /* font-family: 'Heebo', sans-serif; */
    font-family: 'Karla', sans-serif;
    text-shadow: 1px 1px 1px #fff;
}

.greetings h1{
    font-size: 55px;
    /* font-weight: 700; */
}

.greetings h3{
    font-size: 25px;
}

.greetings h4{
    font-size: 25px;
}

.page {
    padding: 60px 0px 0px 0px;
    min-height: 100vh;
    margin-bottom: 80px;
}
.page h1 {
    text-align: center;
    margin: 30px 0 15px 0;
    font-size: 20px;
    font-family: 'Karla', sans-serif;
    font-weight: 600;
}

.page .fa-angle-double-down {
    margin: auto;
    margin-left: 50%;
    text-align: center;
}

.about {
    /* padding: 0px; */
    /* padding-top: 15px; */
}

.about .flex-row-container {
    display: flex;
    flex-wrap: wrap;
    /* padding: 0px 5%; */
    width: 100%;
    /* position: absolute; */
    /* height: 85vh; */
}

.flex-row-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 5%;
    /* margin-top: 30px; */
    width: 100%;
    /* position: absolute; */
    /* height: 90vh; */
}


.flex-row-container .column {
    display: inline-block;
    margin: 2%;
    width: 46%;
    /* background-color: lavenderblush; */
    position: relative;
    overflow: hidden;
}

  #biografy-right-column {
    margin-left: 7%;
    margin-top: 4%;
  }

  .avatar-container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    margin-left: 7%;
    margin-top: 5%;
  }
  
  .avatar-container img {
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    object-fit: cover;
    align-content: center;
    margin: 0;
  }

#biografy {
    display: inline-block;
    width: 60vw;
    padding-left: 70px;
}

#biografy p {
    margin-bottom: 5px;
}

.center-container {
    text-align: center;
}

.column .block{
    position: absolute;
    top:50%;
    left: 0;
    transform: translate(0%, -50%);
}

#download {
    display: inline-block;
    text-decoration: none;
    color: gray;
    border: 1px solid grey;
    border-radius: 50px;
    padding: 5px 15px;
    margin: 5px auto;
    margin-top: 50px;
    margin-left: 45px;
}

.tools {
    display: inline-block;
    width: 200px;
    padding: 0px;
    margin: 0px;
}

.tools ul {
    list-style-type: none;
    padding-left: 10px;
}


p {
    white-space: pre-line;
    font-size: 15px;
    font-family: 'Karla', sans-serif;
}

.logo {
    position: absolute;
}

.python {
    width: 38%;
    height: 30%;
    top: 25%;
    left: 67%;
}
.python img { 
    max-width: 100%; 
    height: auto;
}

.react {
    top: 79%;
    left: 0%;
    width: 42%;
}

.react img { 
    /* max-width: 250px;   */
    width: 100%;
}

.javascript img {
    max-width: 100%;  
}

.javascript {
    top: 30%;
    left: 30%;
    width: 20%;
}

.css {
    top: 0px;
    left: 0px;
    width: 29%;  
}

.css img {
    position: absolute;
    width: 100%;  
}

.node {
    top: 0%;
    left: 27%;
    width: 29%; 
}
.node img {
    width: 100%;  
}

.sql {
    top: 0px;
    left: 65%;
    width: 29%; 
}
.sql img {
    width: 100%;  
}

.mongodb {
    top: 29%;
    left: 0%;
    width: 29%; 
}
.mongodb img {
    width: 100%;  
}

.django {
    top: 50%;
    left: 2%; 
    width: 38%; 

}
.django img {
    width: 100%;  
}

.git {
    top: 50%;
    left: 40%; 
    width: 30%; 
}
.git img {
    width: 100%;  
}

.flask {
    top: 52%;
    left: 70%; 
    width: 30%; 
}
.flask img {
    width: 100%;  
}

.sass {
    top: 78%;
    left: 47%; 
    width: 25%; 

}
.sass   img {
    width: 100%;  
}

.api {
    top: 81%;
    left: 70%; 
    width: 20%; 
}

.api img {
    width: 100%;  

}

.selenium {
    top: 18%;
    left: 50%; 
    width: 25%; 

}

.selenium img {
    width: 100%;
}

.box1 {
   display: flex;
   flex-direction: column;

    width: 49%;
   border-right: 2px solid #b3b3b3; 
}

.row {
    width: 80%;
    border: 2px solid #b3b3b3; 
    margin: 45px auto;
    padding: 10px 20px;
    border-right: 4px solid #4f4f4f; 

}

.line1 {
    position: absolute;
    width: 6%;
    border: 1px solid #b3b3b3; 
    top:14%;
    left:46.3%;
    z-index: -1;
}

.box2 {
    display: flex;
    flex-direction: column;
    width: 49%;
    /* border-left: 2px solid #b3b3b3;  */
 }

 .row2 {
    width: 40%;
    border: 2px solid #b3b3b3; 
    /* margin: 45px auto; */
    margin-top: 11%;
    margin-left: 7%;
    padding: 10px 20px;
    border-left: 4px solid #4f4f4f; 
 }

 .row2 p {
     font-size: 14px;
 }


.dates {
    display: inline-block;
    width: 31%;
    padding: 0.5% 2% 0.5% 1%;
    text-align: right;
}

.dates p {
    /* font-family: 'Heebo', sans-serif; */
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    font-weight: 900;
    margin-top: 10px;
}


 .description {
    display: inline-block;
    width: 65%;
    padding: 0.5% 0% 0.5% 2%;
}

.description li {
    font-size: 15px;
    font-family: 'Karla', sans-serif;

}

/* h4 {
    font-family: 'Karla', sans-serif;
    font-size: 18px;

} */
.description h4 {
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    font-weight: 700;

}

.description h5 {
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    font: italic;

}

.vert-line {
    z-index: 10;
}

.flex-row-container-mini {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0% 0 15%;
    width: 88vw;
    margin-bottom: 20px;
    /* position: absolute; */
    /* height: 85vh; */
}


.flex-column-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project {
    padding-top: 3%;
    margin-bottom: 5%;
    width: 70%;
    margin: auto;
}

.project-description {
    width: 100%;
    padding: 0.5% 2% 0.5% 2%;
    /* display: table;  */
    /* height: 100px;   */
}

.project-description p {
    /* display: table-cell; */
    /* vertical-align: middle; */
    margin-left: 10%;
}

.photo-container {
    display: inline-block;
    width: 47%;
    padding: 0.5% 0% 0.5% 2%;
    height: 300px;
    background-color: grey;
}
.experience {
    min-height: 100%;
}

.portfolio {
    /* height: 190vh; */

}

.medium-text {
    font-size: 16px;
}

.icon {
    width: 100px;
    height: 100px;
}

.placeholder {
    height: 20vh;
}
.icons-flex-box {
    display: flexbox;
    text-align: center;
}


/* Carousel */

.carousel {
    margin-top: 20px;
}

.car-container {
    position: relative;
    width: 100%;
    /* margin-left: 15%; */
    /* height: 70vh; */
}

.tools {
    padding-left: 50px;
    padding-top: 5px;
}

.tools-description {
    padding-left: 200px;
    font-family: 'Karla', sans-serif;
    font-size: 16px;


}


.git {
    font-size: 15px;
    margin-left: 5px;
    vertical-align: text-top;
}