digital_design.css

@import url("https://fonts.googleapis.com/css?family=Montserrat");
#particles-js{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;

} 

h1{
    font-family: Montserrat;
    color: #F0F0C9;
    z-index: 4;
}

h5{
    font-family: Montserrat;
    color: #F0F0C9;
    z-index: 4;
    font-size: 3vw;


}
  
body{
    margin-top: 0px;
    margin-left: 0px;
    font-family: Montserrat;
    background: linear-gradient(to right,#0B132B, #1C2541 );
    overflow-x: hidden;



}



::-webkit-scrollbar {
    width: 0px;
    background: transparent; 
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: center;
  }

.go_home{
    position: fixed;
    z-index: 6;
    left:87%;
    top:3%;
    
    transform: translate(50%);

    font-size: 1vw;
    background: linear-gradient(to right,#1C2541, #0B132B);
 
    font-family: Montserrat;
    color: #F0F0C9;
    outline: 0;
    border-radius:12px;
    padding: 10px;
    border: 0px;


}

.Contact{

    position: fixed;
    z-index: 6;
    left:87%;
    top:9%;
    transform: translate(50%);
    font-size: 1.0vw;
    background: linear-gradient(to right,#1C2541, #0B132B);
    font-family: Montserrat;
    color: #F0F0C9;
    outline: 0;
    border-radius:12px;
    padding: 10px;
    padding-right: 17px;
    border: 0px;
}
.Contact:hover{
    z-index: 5;
    box-shadow: 0 0px 100px 0 #6FFFE9, 0 6px 20px 0 rgba(0,0,0,1);
    transition-duration: 0.25s;

}
.go_home:hover{
    z-index: 5;
    box-shadow: 0 0px 100px 0 #6FFFE9, 0 6px 20px 0 rgba(0,0,0,1);
    transition-duration: 0.25s;
}

.dd_title{
    position: relative;
    width: 60vw;



}

.title{
    position: absolute;
    z-index: 3;

}

.t_joke{
    position: absolute;
    top: 80%;
    right: 50%;
    transform:translate(50%);

}

.t_desc{
    position: absolute;
    top: 220%;
    right: 50%;
    transform:translate(50%);


}
section#main{
    background: linear-gradient(to right,#0B132B,#1C2541);


}

section#p1{
    position: relative;
    background: linear-gradient(to right,#0B132B,#1C2541);


}


.ink_cover{
    position: relative;
    width: 28vw;
    top: -9%;
    z-index: 3;
    box-shadow: 0 0px 100px 0 rgba(187, 168, 168, 0.25), 0 6px 20px 0;


}

.award_title{
    position: relative;
    top: -16%;
    font-size: 1vw;
    color: #F0F0C9;


}
.img_award{
    width: 10vw;


}

.award{
    position: absolute;
    width: 7vw;
    top: 65%;
    right: 39%;
    z-index: 5;

}
.db9k{
    position: relative;
    z-index: 4;
    top: -10%;
    box-shadow: 0 0px 100px 0 rgba(187, 168, 168, 0.25), 0 6px 20px 0;


}

section#p2{
    position: relative;
    background: linear-gradient(to right,#0B132B,#1C2541);


}

.eqax{
    position: relative;
    z-index: 4;

}

.ps_logo4{
    top:93%;
    z-index: 4;
    width: 69px;
    position: absolute;
    left: 46%;

}
.ill_logo4{
    top:93%;
   
    right: 46%;
    z-index: 4;
    width: 70px;
    position: absolute;

}

.ps_logo1{
    top:83%;
    z-index: 4;
    width: 69px;
    position: absolute;
    left: 46%;
    



}
.ill_logo1{
    top:83%;
   
    right: 46%;
    z-index: 4;
    width: 70px;
    position: absolute;

}


.logosp2{
    z-index: 4;
    top: -8%;
    justify-content: center;
    position: relative;
    transform: translate(-50%);
    width: 100%;
    left: 50%;
}

.ps_logo2{

    z-index: 4;
    width: 69px;
    position: absolute;
    right: 55%;

 
    



}
.ill_logo2{
   right: 51%;
   
    z-index: 4;
    width: 70px;
    position: absolute;


}

.octane_logo2{
    right: 47%;
    z-index: 4;
    position: absolute;
    width: 70px;

}
.eqax{
    position: relative;
    top: -10%;
    box-shadow: 0 0px 100px 0 rgba(187, 168, 168, 0.25), 0 6px 20px 0;
}

.cinema4d_logo{
    z-index: 4;
    position: absolute;
    right: 43%;
    width: 70px;

}

section#p3{
    position: relative;
    background: linear-gradient(to right,#0B132B,#1C2541);


}
.ntice_img{
    width: 100%;
    position: relative;
    top: -20%;
    box-shadow: 0 0px 100px 0 rgba(187, 168, 168, 0.25), 0 6px 20px 0;


}

.ntice{
    z-index: 4;
    width: 25%;
    position: absolute;
    transform: translate(-50%);
    right: 55%;
    box-shadow: 0 0px 100px 0 rgba(187, 168, 168, 0.25), 0 6px 20px 0;


}
.ntice_tattoo{
    z-index: 4;
    position: absolute;
    width: 33.1%;
    transform: translate(-50%);
    left: 80%;
    box-shadow: 0 0px 100px 0 rgba(187, 168, 168, 0.25), 0 6px 20px 0;

}

.ntice_svg{
    position: absolute;
    z-index: 4;
    top: 12%;
    transform: translate(-51%);
    width:100vw;

}
.ntice_title{
    z-index: 4;
    position: relative;
    top: 8%;
}
.logosp3{
    z-index: 4;
    position: relative;
    top: 53%;

}

.ill_logo3{
    z-index: 4;
    top:83%;
   
   
    z-index: 4;
    width: 70px;
    position: absolute;

}


.ps_logo3{
    z-index: 4;

    right: 51%;
    z-index: 4;
    width: 69px;
    position: absolute;
    transform: translate(-50%);
 
}

section#p4{
    position: relative;
    background: linear-gradient(to right,#0B132B,#1C2541);


}

.go_home_shadow{
    position: fixed;
    z-index: 4;
    left:87%;
    top:3%;
    
    transform: translate(50%);

    font-size: 1vw;
    background: linear-gradient(to right,#1C2541, #0B132B);
 
    font-family: Montserrat;
    color: #F0F0C9;
    outline: 0;
    border-radius:12px;
    padding: 10px;
    border: 0px;
    box-shadow: 0 0px 100px 0 rgb(0,0, 0), 0 6px 20px 0 rgba(0,0,0,0.15);


}

.Contact_shadow{

    position: fixed;
    z-index: 4;
    left:87%;
    top:9%;
    
    transform: translate(50%);

    font-size: 1.0vw;
    background: linear-gradient(to right,#1C2541, #0B132B);
  
    font-family: Montserrat;

    border-radius:12px;
    padding: 10px;
    padding-right: 17px;
    box-shadow: 0 0px 100px 0 rgb(0,0, 0), 0 6px 20px 0 rgba(0,0,0,0.15);

    
    border: 0px;

}