@font-face {
    font-family: shaloems;
    src: url(./fonts/Shaloems.ttf)format('ttf');
    src: url(./fonts/Shaloems.woff)format('woff');
}

@font-face {
    font-family: gilroy;
    src: url(./fonts/Gilroy-Regular.ttf)format('ttf');
    src: url(./fonts/Gilroy-Regular.woff)format('woff');
}


* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'gilroy';
outline: none;
word-wrap: break-word;
}

html, body {
overflow-x: hidden;
}

:root {
scroll-behavior: auto;
overflow-x: hidden;
}

.bubble {
-webkit-filter: blur(25px) saturate(10);
filter: blur(26px) saturate(10);
}

    
#bubble-one {
    position: fixed;
    right: 0%;
    top: 3%;
    z-index: -2;
    width: 60px;
    height: 60px;
    opacity: .3;
    background-color: #efe199;
}


#bubble-two {
    z-index: -2;
    position: fixed;
    left: 2%;
    bottom: 70%;
    width: 60px;
    height: 60px;
    opacity: .4;
    -webkit-filter: blur(35px) saturate(10);
    filter: blur(35px) saturate(10);
    background-color: rgb(255, 194, 114);
}

#bubble-three{
    position: fixed;
    left: 2%;
    bottom: 10%;
    z-index: -2;
    width: 60px;
    height: 60px;
    opacity: .4;
    -webkit-filter: blur(35px) saturate(10);
    filter: blur(35px) saturate(10);
    background-color: rgb(142, 216, 238);
}


#bubble-four{
    z-index: -2;
    position: fixed;
    right: 31%;
    top: 45%;
    width: 60px;
    height: 60px;
    opacity: .4;
    -webkit-filter: blur(35px) saturate(10);
    filter: blur(35px) saturate(10);
    background-color: #d0364b;
}

.nav-name{
    font-weight: 700;
    margin-right:3px;
}

.nav-heading{
    font-size: 1.2rem;

}

nav h3 button{
    margin-left: 10px;
    padding: 6px 20px;
    background-color: #e6663f;
    border: none;
    font-size: 1rem;
    -webkit-box-shadow: 0 5px 40px 3px #e6663f;
    box-shadow: 0 5px 32px 3px #e6663f;
    border-radius: 100px;
    color: #fff;
}




#main-section h1{
    font-size: 60px;
    font-weight: 300;
    margin-top: 50px;
    margin-bottom:20px;
    margin-bottom: 20px;
    line-height: 65px;;
}
@media only screen and (max-width: 767px) {
    #main-section h1{
        font-size: 35px;
        font-weight: 300;
        margin-top: 50px;
        line-height: 35px;;
    }

    .technology{
        width: 100% !important;
    }
}
#main-section span{
    font-family: 'shaloems';
    color: #e6663f;
}

.collab .contact-button{
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px 14px;
        font-size: 12px;
        -webkit-box-shadow: 0 4px 20px #e6663f;
        box-shadow: 0 4px 20px #e6663f;
        background-color: transparent;
        margin-bottom: 30px;
        border: none;
        border-radius: 100px;
        color: #fff;
        background-color: #e6663f;
}

#work{
    min-height: 50vh;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

#work #line{
width: 40px;
height: 3px;
margin-right: 20px;
background-color: black;
}

#work h1 {
    font-size: 70px;
    line-height: 60px;
    margin-top: 20px;
}

a{
    cursor: pointer;
    color: #1e1e1e;
}

.vsshadow{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border: 1px solid #c7c4c4cf; 
}