html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(#fa357a, #F9964D, #EDE33D, #b6fa4d, #3dd2fb, #9067DD,#fa357a);
}

#container {
  height:600px; 
}
#box {
  width:550px;
  height:auto;
  margin:auto;
  margin-top:100px;
  position: relative;
  background:black;
  background: rgba(100, 187, 4, 0.25);
  overflow:visible;
}

#box2 {
  width:550px;
  height:auto; 
  margin:auto;
  position: relative;
  background:white;
  overflow:visible;
}

#box3 {
  width:550px;
  height:660px; 
  margin:auto;
  position: relative;
  background:white;
  overflow:visible;
  line-height:0;
}
#boxin {
  padding:20px;
  text-align:center;
  font-family:arial;
  font-size:20px;
  color:#ffffff;
  opacity:1.0;
}

a {
 color:#ff0077; 
 text-decoration:none;
}

a:hover {
 color:#ffff00;
}

.sysbox { 
        background-color:#fff;
        width: 400px;
        color: #fff;
    }
   
    .sysbox2 {
      padding:5px;
      line-height:100%;
        opacity:.8;
        height:30px;
        font-family:arial;
        color:#000;
        font-size:28px;
        -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
overflow: hidden;
 
    }
   
    .sysbox2:hover {
      opacity:1;
        position: relative;
        height: 300px;
        -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
 
    }
   
    .sysbox3 {
        padding-top: 23px;
        font-family:arial;
        font-size: 20px;
        text-align: left;
        line-height: 20px;
        color: #000;
        width:85%;
    }

#s1 {
  background-color:#fa357a;
}

#s2 {
  background-color:#F9964D;
}

#s3 {
  background-color:#EDE33D;
}

#s4 {
  background-color:#b6fa4d;
}

#s5 {
  background-color:#3dd2fb;
}

#s6 {
  background-color:#9067DD;
}

#syscont {
  background:linear-gradient(#9067dd,#fff);
  height:460px;
  width:400px;
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}