html{
    min-height: 100%;
    position: relative;
}

header{
    position: fixed;
    top: 0;
    width: 80%;
    margin-left: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 8%;
    padding-right: 15%;
    display: flex;
    justify-content: space-between;
    background-color:#010f18e9;
    border-bottom: 1px solid rgb(39, 61, 84);
    z-index: 30;
}

body{
    margin-top: 7%;
    scrollbar-width: none;
    -ms-text-overflow-style: none;
    overflow-y: scroll;
    background-color: #010f18;
    color: white;
    font-family:  'Roboto','Nunito', 'Open Sans', sans-serif;
    padding-bottom: 4rem;
}

footer{
    position: absolute;
    bottom: 0;

    height: 4rem;
    width: 100%;

    margin-left: -20px;
    padding-right: 15px;

    border-top: 2px solid rgb(39, 61, 84);
    display: flex;
    justify-content: space-around;
    background-color: #182d39b2;
}

body::-webkit-scrollbar {
    display: none;
}

figure{
    max-width: 100%;
    max-height: 100%;
    border-radius:40px;
    overflow:hidden;
}

h1{
    font-size: 70;
}

h2{
    font-size: 40;
}

h4{
    font-size: 50;
}

/*classes*/
.name{
    line-height: 50%;
    min-width: 185px;
}

.buttons{
    border: rgb(39, 61, 84);
    border-style: solid;
    border-width: 2px;
    border-radius: 50px;
    display: flex;
    width: 350px;
    height: 70px;
    justify-content: space-evenly;
    background-color: #0f2948;
}

.home-button{
    border-radius: 50px;
    margin: 10px;
    height: 70%;
    width: 30%;
    text-align: center;
    line-height: 50%;
}

.home-button:hover{
    background-color: rgb(27, 63, 90);
}

.index-page .home-button{
    background-color: rgb(1, 109, 155);
}

.index-page .home-button:hover{
    background-color: rgb(1, 109, 155);
}

.work-button{
    border-radius: 50px;
    margin: 10px;
    height: 70%;
    width: 30%;
    text-align: center;
    line-height: 50%;
}

.work-button:hover{
    background-color: rgb(27, 63, 90);
}

.work-page .work-button{
    background-color: rgb(1, 109, 155);
}

.work-page .work-button:hover{
    background-color: rgb(1, 109, 155);
}

.about-button{
    border-radius: 50px;
    margin: 10px;
    height: 70%;
    width: 30%;
    text-align: center;
    line-height: 50%;
}

.about-button:hover{
    background-color: rgb(27, 63, 90);
}

.about-page .about-button{
    background-color: rgb(1, 109, 155);
}

.about-page .about-button:hover{
    background-color: rgb(1, 109, 155);
}

.linkedin{
    height: 70px;
    width: 70px;
}

.intro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image: url("./images/bg1.jpg");
}

.work-intro{
    width: 70%;
    background-image: url("./images/bg1.jpg");
    margin-bottom: 2%;
}

.intro-text{
    max-width: 35%;
}

.portrait{
    margin-left: 1%;
    width: 500;
    height: 620;
    text-align: center;
}

.skill-pills{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.skill{
    margin-left: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    padding-left: 10px;
    padding-right: 15px;
    height: 50px;
    background-color: rgb(1, 109, 155);
    border-radius: 50px;
    text-align: center;
    line-height: 50%;
    min-width: 40px;
}

.icon{
    margin-top: 5px;
    max-width: 40px;
    max-height: 40px;
}

.work{
    margin-top: 5%;
    padding-bottom: 5%;
    border-top: 2px solid rgb(39, 61, 84);
}

.work-index {
    display: flex;
    justify-content: center;
    padding-left: 100px;
    padding-right: 100px;
    background-image: url("./images/bg2.jpg");
}

.work-index-header{
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
}

.work-index-header{
    margin-right: 0px;
}

.work-tagline{
    margin-top: -60px;
}

.dummy{
    display: flex;
    justify-content: center;
}

.view-all{
    display: flex;
    justify-content: center;
    align-items: baseline;
    background-color: rgb(1, 109, 155);
    border-radius: 50px;
    height: 75px;
    width: 350px;
    text-align: center;
    line-height: 60%;
    margin-left: 10px;
}

.project-grid{
    width: 100%;
    list-style: none;
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    margin-bottom: 2%;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.project{
    position: relative;
    margin: 20px;
    width: 450px;
    height: 325px;
    border-radius: 40px;
}

.project-img{
    border-radius: 40px;
    width: 100%;
    height: 100%;
}

.label{
    margin-top: 15px;
    margin-left: 15px;
    padding: 10px;
    background-color: #08141bc5;
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.info{
    border-top: 2px solid rgb(39, 61, 84);
    margin-top: 2%;
    margin-bottom: 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: url("./images/bg1.jpg");
}

.togethaa{
    margin-right: 70px;
}

.about-title{
    padding-top: 50px;
    width: 100%;
    text-align: center;
    padding-bottom: 70px;
    background-image: url(./images/bg1.jpg);
}

.background{
    display: flex;
    justify-content: center;
    align-items: top;
    flex-wrap: wrap;
    background-image: url(./images/bg2.jpg);
}

.bg-title{
    width: 300px;
    margin-right: 40px;
    margin-top: 0;
}

.bg-text{
    margin-top: -50px;
    max-width: 1000px;
    color: rgb(211, 212, 213);
    font-size: 22;
}

.skills-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.project-page{
    align-items: center;
}

.project-intro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image: url("./images/bg1.jpg");
}

.go-back{
    text-align: center;
    width: 165px;
    margin-top: 140px;
    margin-bottom: -40px;
    margin-left: -1%;
    font-size: 20;
}

.go-back a:link{
    color: rgb(1, 109, 155);
}

.go-back a:visited{
    color: rgb(1, 109, 155);
}

.project-image{
    display: flex;
    justify-content: center;
}

.project-image-div{
    margin: 20px;
    border-radius: 40px;
}

.prj-img{
    width: 650px;
    height: 350px;
    border-radius: 40px;
}

.project-desc{
    background-image: url("./images/bg2.jpg");
    display: flex;
    justify-content: center;
}

.project-text{
    max-width: 900px;
}

.desc{
    font-size: 25;
}

/*links*/
a:link{
    color:white;
    text-decoration: none;
}

a:visited{
    text-decoration: none;
    color: white;
}

a:focus{
    color:white;
}

a:active{
    color: white;
}