html{
    scroll-behavior: smooth;
}
body {
    margin: 0;
    /* min-height: 100vh; Solution from here: https://www.freecodecamp.org/news/html-page-width-height/ */
    font-family: Lato;
    font-weight: 500;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

h1 {
    color: unset;
    margin: 0;
}
a,
li {
    text-decoration: none;
    color: black;
    /* border: #ebf1ff 1px solid; */
    font-weight: 700;
    opacity: 1;
    display: inline-block
}
.centered-icon {
    position: relative;
    width: 100%;
    margin: auto 0;
}
/* #navigation {
    width: 100%;
    position: sticky;
    z-index: 10;
    top: 0;
    height: 50px;
    margin: 0;
    box-shadow: 1px 0.1px 1px black;
    border-bottom: 1px solid #FFF; 
} */
.shadow {
    /*   position: absolute; */
    box-shadow: 1px 1px 1px rgb(148, 148, 148);
}
/* .navigation-section {
  position: sticky;
  border: 1px solid purple;
  height: 60px;
  top: 0;
} */
.nav--scrolled {
    background-color: rgb(255, 255, 255);
    box-shadow: .1px 0px 0px .5px gray;
}
.navbar {
    /* border: 1px green solid; */
    position: fixed;
    padding: 1%;
    transition: .2s;
    width: 100%;
    z-index: 999;
}
.navbar ul {
    list-style: none;
    margin: 0;
    margin-left: 65%;
    display: inline-block;
}
.nav-link {
    padding: 5px 25px;
    display: inline-block;
    /*   border: 1px red solid; */
    /* text-align: center; */
    color: black;
    margin-left: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 14px;
    width: 100%;
}
.nav-link:hover {
    background-color: #fff;
    font-weight: 400;
    color: black;
    /* border: 1px #ebf1ff solid; */
    border-radius: 5px;
    opacity: 1;
    transition: 0.4s;
}
/* Global Section Settings */
.section {
    height: 100vh;
}
.int-link {
    text-align: center;
    cursor: pointer;
    position: relative;
    top: 150px;
}
.int-link {
    overflow: hidden;
}
#pro-int-link {
    margin-bottom: 0;
    color: rgb(73, 73, 73);
    text-decoration: none;
    display: block;
}
i:hover{
    color: unset;
    text-decoration: none;
    transition: all .2s ease-in-out;
}
#pro-int-link:active {
    color: gray;
}
/* welcome section */
#welcome {
    margin: 0 auto;
    background-color: #b8c6db;
    background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
    height: 95vh;
}
.welcome-h1 {
    color: black;
    padding-top: 15%;
    text-transform: uppercase;
    letter-spacing: 0px;
    text-align: center;
    font-size: 3rem;
    font-weight: 100;
}
.row-welcome {
    margin: 0;
}
/* Project Section */
#projects {
    height: 95vh;
}
.project-row {
    margin: 2%;
}
.project-row .card {
    margin: 25px;
}
#projects {
    z-index: 0;
    /* width: 100%; */
    /* height: 100%; */
}
.projects-h1 {
    text-align: center;
    font-size: 55px;
    padding-top: 6%;
}
.project-img {
    height: 30vh;
}
.tiles {
    /*   border: 1px red solid; */
    position: relative;
    padding: 0;
    margin: 0 auto;
}
.custom-card {
    background-color: rgb(255, 255, 255);
}
.custom-btn {
    background: white;
    border: 1px rgb(176, 176, 176) solid;
    color: black;
    float: right;
}
.custom-btn:hover{
    color: rgb(10, 10, 10);
    background-color: white;
    border: 1px solid grey;
}
/* .link-btn {
    background-color: #183446;
     border: 1px solid #ebf1ff;
}
/* Workbench Section */
#workbench {
    border-top: 1px solid #ebf1ff;
    padding: 6em;
    margin-top: auto;
    height: 55vh;
}
.workbench-container {
        padding: 4%;
        margin: 0;
        text-align: center;
}
#workbench h1, #workbench p {
    text-align: center;
}
#workbench i {
    font-size: 65px;
    padding: 1%;
}
button.btn {
    margin: 0 auto;
    /* border: 1px red solid; */
    position: static;
    display: block;
}
@media only screen and(max-width: 1081px) {
    h1 {
        color: purple;
    }
    .project-row .card {
        margin: 25px;
    }
    .nav-link {
        width: 100%;
    }
}