body {
    margin: 0px;
    background-color: #212633;
    scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6,p {
    margin: 0px;
}
.body-container{
    width: 100vw;
    height: 100vh;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    flex: none;
    overflow-x: hidden;
    overflow-y: scroll;
}
.fab-contact{
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 75px;
    max-height: 75px;
    color: white;
    font-family: montserrat;
    text-align: center;
    z-index: 10;
}
.fab-contact img {
    height: 50px;
    width: 50px;
}
.pg-one{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    scroll-snap-align: start;
}
.jumbo-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.jumbo-content {
    display: flex;
    flex-direction: column;
    color: #DEDEDE;
    font-family: montserrat;
}
.jumbo-content h3{
    font-size: 3vw;
    color: #B2B2B2;
    font-family: "Nokia Pure Headline";
}
.jumbo-content h1{
    font-family: 'Agency Fb';
    font-size: 7vw;
    color: #F9CB11;
}
.jumbo-content button {
    background-color: #F9CB11;
    color: #212633;
    align-self: flex-end;
    font-size: large;
    font-family: montserrat;
    font-weight: 900;
    border-style: none;
    border-radius: .2rem;
    padding: 10px;
    cursor: pointer;
    transition: all 0.1s;
}
.jumbo-content button:hover {
    transform: translateY(3px);
    opacity: 0.8;
}
.jumbo-content button:active {
    background-color: #212633;
    color: #F9CB11;
    transition: all 0 .1s ease;
}
.portrait-container{
    max-width: 550px;
    overflow: hidden;
}
.portrait-container img {
    height: 100vh;
    filter: grayscale(1);
    transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.portrait-container img:hover {
    filter: grayscale(0);
    transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.pg-two {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}
.web-dev-container{
    height: 100%;
    width: 100%;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}
.web-dev-container h1{
    font-family: 'Agency Fb';
    font-size: 5vw;
    color: #F9CB11;
    margin-left: 100px;
}
.web-dev-content{
    align-self: center;
    width: 80%;
    /* height: 90%; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.web-project-container {
    width: 450px;
}
.web-project-content {
    width: 450px;
    /* border-style: solid; */
    /* border-width: .1px; */
    /* border-color: #525252; */
    background-color: #2d323f;
    cursor: pointer;
    padding: 15px;
    border-radius: .5rem;
    transform: scale(1);
    transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
.web-project-content:hover {
    transform: scale(1.05);
    transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);

}
.web-project-content h3{
    font-family: montserrat;
    color: #B2B2B2;
}
.web-project-content img {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    border-radius: .5rem;
}

.web-project-content p {
    font-size: medium;
    color: #DEDEDE;
    font-family: montserrat;
}



.pg-three {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
}

.graphics-design-container {
    height: 100%;
    width: 100%;
}
.graphics-design-container h1 {
    font-family: 'Agency Fb';
    font-size: 5vw;
    color: #F9CB11;
    margin-left: 100px;
}
.graphics-content {
    height: 80%;
    max-width: 90%;
    padding-left: 100px;
    display: flex;
    flex-wrap: wrap;
    /* overflow-x: scroll; */
}
.graphics-content img {
    max-height: 40%;
    width: auto;
    margin: 10px;
    transform: scale(1);
    transition: all .3s ease;
}
.graphics-content img:hover {
    transform: scale(.95);
    transition: all .3s ease;
}


.pg-four {
    width: 100vw;
    height: 100%;
    scroll-snap-align: start;
}
.td-design-container {
    height: 100%;
    width: 100%;

}
.td-design-container h1{
    font-family: 'Agency Fb';
    font-size: 5vw;
    color: #F9CB11;
    margin-left: 100px;
}
.td-content {
    height: 80%;
    max-width: 95%;
    padding-left: 100px;
    display: flex;
    flex-wrap: wrap;
}
.td-content img {
    max-height: 40%;
    width: auto;
    margin: 10px;
    transform: scale(1);
    transition: all .3s ease;
}
.td-content img:hover {
    transform: scale(.95);
    transition: all .3s ease;
}


.pg-five {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}

.contact-page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.contact-content {
    display: flex;
    width: 100%;
    height: 100%;
}
.contact-page h1{
    font-family: 'Agency Fb';
    font-size: 10vw;
    color: #F9CB11;
    margin-left: 100px;
}
.links-container {
    display: flex;
    flex-direction: column;
    width: 50%;
    /* height: 80%; */
    /* justify-content: space-around; */
    align-items: flex-end;
}
.image-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.image-container img {
    width: 90%;
}
.links-container span {
    background-color: #2d323f;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 500px;
    margin: 10px;
}
.links-container span img {
    max-height: 35px;
    margin-right: 10px;
}
.links-container span a {
    font-size: larger;
    font-family: montserrat;
    text-decoration: none;
    color: #DEDEDE;
}