Team:SVCE Chennai/CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500); html, body { 

 margin: 0;
 background: #fff;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

}

a:link, a:visited { 

 text-decoration: none;

}

.sign { 

 text-align: center;
 font-size: 14px;
 font-family: 'Roboto';
 color: #777;
 font-weight: 300;
 transition: color 0.3s;

} .sign:hover { 

 color: #333;
 transition: color 0.3s;

}

.head { 

 margin: 0;
 text-align: center;
 padding: 50px;
 font-size: 20px;
 font-family: 'Roboto';
 color: #555;
 margin-left: 20px;

} .head i { 

 display: inline-block;
 position: absolute;
 margin-left: -30px;

} .head span { 

 font-size: 15px;
 font-weight: 300;
 color: #888;

}

  1. container {
 display: table;
 margin: 10px auto;
 width: 350px;
 height: 320px;
 position: relative;

}

  1. container span {
 position: absolute;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 position: absolute;
 margin: auto;
 top: 0;
 bottom: 0;
 transition: all 0.3s;

}

  1. container span:first-child {
 background: #4285F4;

}

  1. container span:nth-child(2) {
 background: #DB4437;
 left: 100px;

}

  1. container span:nth-child(3) {
 background: #F4B400;
 left: 200px;

}

  1. container span:nth-child(4) {
 background: #0F9D58;
 left: 300px;

}

@keyframes updown { 

 0% {
   top: 0;
 }
 50% {
   top: 15px;
 }
 100% {
   top: -15px;
 }

} @keyframes sound-1 { 

 0% {
   height: 280px;
   border-radius: 30px;
 }
 10% {
   height: 190px;
   border-radius: 30px;
 }
 20% {
   height: 260px;
   border-radius: 30px;
 }
 25% {
   height: 180px;
   border-radius: 30px;
 }
 30% {
   height: 280px;
   border-radius: 30px;
 }
 40% {
   height: 190px;
   border-radius: 30px;
 }
 50% {
   height: 160px;
   border-radius: 30px;
 }
 60% {
   height: 130px;
   border-radius: 30px;
 }
 70% {
   height: 100px;
   border-radius: 30px;
 }
 80% {
   height: 130px;
   border-radius: 30px;
 }
 85% {
   height: 100px;
   border-radius: 30px;
 }
 90% {
   height: 130px;
   border-radius: 30px;
 }
 95% {
   height: 100px;
   border-radius: 30px;
 }
 100% {
   height: 50px;
   border-radius: 50%;
 }

} @keyframes sound-2 { 

 0% {
   height: 180px;
   border-radius: 30px;
 }
 20% {
   height: 120px;
   border-radius: 30px;
 }
 30% {
   height: 180px;
   border-radius: 30px;
 }
 40% {
   height: 120px;
   border-radius: 30px;
 }
 50% {
   height: 110px;
   border-radius: 30px;
 }
 60% {
   height: 90px;
   border-radius: 30px;
 }
 70% {
   height: 70px;
   border-radius: 30px;
 }
 80% {
   height: 90px;
   border-radius: 30px;
 }
 90% {
   height: 70px;
   border-radius: 30px;
 }
 100% {
   height: 50px;
   border-radius: 50%;
 }

} @keyframes finalani { 

 0% {
   top: 0;
 }
 50% {
   top: -250px;
 }
 100% {
   top: 0px;
 }

}

  1. content{
width: 100% !important;

}