style.css

/*--- Created by - Monu ---*/
/*---CSS----*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap');

*{
   padding:0;
   margin:0;
   box-sizing:border-box;
}
button,input{
   border:none;
   background:none;
   font-weight:bolder;
   outline:none;
}
img{
   display:block;
}
html,body{
   height:100%;
   scroll-behavior: smooth;
}
html{
   font-size:18px;
   scroll-behavior:smooth;
   font-family:'Montserrat',sans-serif;
}
body{
   position:relative;
   font-weight:bold;
}
section{
   background:#f5f4f1;
   padding:3.5rem .9rem 0;
   overflow:hidden;
}
#top,#top>div,#profiles,footer>div{
   display:flex;
   display:-webkit-box;
   align-items:center;
   -webkit-box-align:center;
}
#top{
   justify-content:justify;
   -webkit-box-pack:justify;
}
#top>h2,footer>div>p{
   flex:1;
   -webkit-box-flex:1;
}
#top,#box1>img,.box>.img{
   left:50%;
   transform:translateX(-50%);
   -webkit-transform:translateX(-50%);
}
#top{
   width:100%;
   height:3.5rem;
   position:fixed;
   top:0;
   z-index:12;
   padding:0 .9rem;
   background:rgba(255,255,255,.1);
   backdrop-filter:blur(20px);
   -webkit-backdrop-filter:blur(20px);
}
#top>h2{
   font-size:1.35rem;
}
.prof{
   width:1.5rem;
   height:1.5rem;
   border-radius:50%;
   margin-left:-.2rem;
}
span.prof{
   background:#995cbf;
   color:#fff;
   font-size:.7rem;
   text-align:center;
   display:block;
   padding-top:.35rem;
   letter-spacing:2px;
}
#jobs{
   background:#fff;
   font-size:.78rem;
   padding:.45rem .75rem;
   border-radius:.3rem;
   margin:0 0 0 .5rem;
   box-shadow:0 .1rem .1rem rgba(0,0,0,.2);
}
.box,#box1{
   overflow:hidden;
   position:relative;
   margin:auto;
   letter-spacing:.5px;
   font-size:1.1rem;
}
.box{
   margin:.2rem auto .6rem;
   padding:1rem .42rem;
   line-height:1.65;
   word-spacing:3px;
   position:relative;
   overflow:visible;
   border-radius:2rem;
   max-width:480px;
   text-align: center;
}
#box1{
   background:#4c5dc1;
   padding-bottom:2.9rem;
   border-radius:2rem;
   text-align:center;
   padding-top:3.2rem;
   margin-bottom:4rem;
   max-width: 800px;
}
#box1>p{
   font-size:.7rem;
   letter-spacing:3px;
   color:#d0d4ff;
   padding:.7rem 0;
}
#box1>h2{
   color:#fff;
   font-size:1.5rem;
   padding:0 2rem;
   letter-spacing:1px;
   line-height:1.45;
   max-width:360px;
   margin:auto;
}
#box1>img{
   width:130%;
   position:relative;
   margin-top:2rem;
}
#box4{
   padding-top:1.5rem;
}
#box7,#box9{
   background:linear-gradient(to bottom left, #ae778c, #6771db);
   background:-webkit-linear-gradient(top right, #ae778c, #6771db);
   padding:1.7rem 0 2.7rem;
   margin-top:4rem;
   margin-bottom:3.5rem;
}
#box7{
   max-width:100%;
}
#box7>.img{
   position:relative;
   width:80%;
   max-width: 480px;
}
.absol{
   position:absolute;
   z-index:9;
}
#box7>.absol{
   width:70%;
   right:0;
   top:14.5rem;
   max-width: 400px;
}
.centr{
   text-align:center;
   padding:1rem .5rem;
   max-width:340px;
}
#box8>h4{
   background:linear-gradient(to right,#6069e2,#9e4fcf);
   background:-webkit-linear-gradient(left,#6069e2,#9e4fcf);
}
#box10>h4{
   background:linear-gradient(to right,#a54fc8,#e15b60);
   background:-webkit-linear-gradient(left,#a54fc8,#e15b60);
}

#box8>h4,#box10>h4{
   font-size:.75rem;
   margin:2.5rem 0  .9rem;
   letter-spacing:1px;
   background-clip: text;
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
}
#box8{
   padding:1rem 2rem;
}
#box9{
   background:linear-gradient(to bottom right,#bf8b7f,#946b9a,#5a5fd1);
   -webkit-background:linear-gradient(top left,#bf8b7f,#946b9a,#5a5fd1);
   padding:2.5rem .42rem;
   margin:10rem auto 1.75rem;
   max-width: 600px;
}
#box9>.img{
   width:115%;
   position:relative;
}
#box9>.absol{
   width:20%;
   top:-5.6rem;
   left:1rem;
}
#box10>p{
   padding:2.5rem 0 0;
}
#box10>p:nth-child(2){
   padding:0 2rem 4rem;
}
.meetRd{
   height:6.5rem;
}
#hiring{
   background:#fff;
   font-size:.8rem;
   padding:3.7rem 2rem 2.6rem;
   letter-spacing:normal;
   word-spacing:normal;
   max-width:100%;
   margin-bottom:2rem;
}
#hiring>h3{
   font-size:1.5rem;
}
#hiring>p{
   padding:.5rem 0 1.3rem;
   max-width:460px;
   margin:auto;
}
#hiring>button{
   background:#5a5eb9;
   color:#fff;
   font-size:.9rem;
   padding:.4rem .6rem;
   border-radius:.5rem;
}
#foxBox{
   z-index:10;
}
#foxBox>.img{
   width:105%;
   position:relative;
   padding:3rem 0;
}
.obj{
   animation:autoMotion 15s infinite;
   -webkit-animation:autoMotion 15s infinite;
}
.pencil{
   width:4rem;
   top:-1.1rem;
   left:7.8rem;
}
.melon{
   width:3.6rem;
   top:.8rem;
   left:14.5rem;
}
.shoe{
   width:4rem;
   top:.85rem;
   left:1.7rem;
   animation-delay:1s;
   -webkit-animation-delay:1s;
}
.planet{
   width:5.5rem;
   top:3.7rem;
   right:-1.1rem;
   animation-delay:2s;
   -webkit-animation-delay:2s
}
#form{
   color:#fff;
   background:linear-gradient(to right, #7e73c2, #9d769f, #c1857e);
   background:-webkit-linear-gradient(left, #7e73c2, #9d769f, #c1857e);
   margin-top:-6.6rem;
   padding:1.5rem 1.3rem;
   letter-spacing:normal;
   word-spacing:1px;
   font-size:.8rem;
   max-width:100%;
}
#form>div{
   max-width:460px;
   margin:auto;
}
#form>div>h3{
   text-align:center;
   font-size:1.6rem;
   padding:.7rem 1rem .5rem;
   line-height:1.45;
}
#form>div>input,#form>div>button{
   background:rgba(0,0,0,.2);
   display:block;
   width:100%;
   border-radius:.6rem;
   height:2.6rem;
   padding:0 1.5rem;
   margin:1.4rem auto .5rem;
   color:#fff;
   font-size:.85rem;
}
#form>div>input::placeholder{
   color:#999;
}
#form>div>button{
   height:2.4rem;
   margin:.5rem auto 1.5rem;
   background:rgba(0,0,0,.5);
}
footer{
   margin:4rem auto 0;
   font-size:.7rem;
   padding:.8rem .1rem 2.3rem .4rem;
}
#earth{
   display:inline-block;
   margin:0 .3rem -.2rem;
   background-image:url("https://dl.dropbox.com/s/u98nsykhc1rmy01/world-map.jpeg");
   background-size:auto 100%;
   background-repeat:repeat-x;
   width:1rem;
   height:1rem;
   border-radius:50%;
   animation:rottErth 5s infinite;
   -webkit-animation:rottErth 5s infinite;
}
@keyframes rottErth{
   from{
      background-position:0 0;
   }
   to{
      background-position:200% 0;
   }
}
@-webkit-keyframes rottErth{
   from{
      background-position:0 0;
   }
   to{
      background-position:200% 0;
   }
}
#mediaIcons>img{
   display:inline-block;
   margin:.6rem .4rem 0;
   width:1.25rem;
   padding:.2rem;
   border-radius:.4rem;
}
#mediaIcons>img:hover{
   background:#fff;
}
footer>p{
   padding:.2rem 0 .5rem;
}
footer>p>span{
   margin-right:.4rem;
   color:#aaa;
}

@-webkit-keyframes autoMotion{
   0%{
      margin-top:0rem;
   }
   25%{
      margin-top:-.8rem;
   }
   50%{
      margin-top:0;
   }
   75%{
      margin-top:.8rem;
   }
   100%{
      margin-top:0;
   }
}
@keyframes autoMotion{
   0%{
      margin-top:0rem;
   }
   25%{
      margin-top:-.8rem;
   }
   50%{
      margin-top:0;
   }
   75%{
      margin-top:.8rem;
   }
   100%{
      margin-top:0;
   }
}

/*---SVG Styling---*/
svg{
   display:inline;
   width:0;
   height:0;
}

#wave,#wig3,#lin2,#lin3{
   position:relative;
   display:inline-block;
}
#wave>svg{
   width:72px;
   height:10px;
   position:absolute;
   bottom:-4px;
   left:-5px;
}

#wig3>svg{
   width:30px;
   height:30px;
   position:absolute;
   top:2px;
}
#wig3>.left{
   left:-32px;
}
#wig3>.right{
   right:-35px;
}

#lin1>svg,#lin2>svg,#lin3>svg{
   width:100%;
   height:20px;
   position:absolute;
   bottom:-1px;
}
#lin1>svg{
   left: 50%;
   transform: translateX(-100px);
   -webkit-transform: translateX(-100px);
}
#lin2>svg{
   height:10px;
   bottom:-6px;
   left:0;
}
#lin3>svg{
   left:0;
   bottom:-17px;
}

/*---Media Query----*/
@media screen and (min-width:480px){
   html{
      font-size:19px;
   }
   section{
      padding:3.5rem 1.2rem 0;
   }
   #top{
      padding:0 1.1rem;
   }
}