@import url(http://fonts.googleapis.com/css?family=Roboto:400,200); * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; background: #fdf6e3; } .row { text-align:center; margin-top: 250px; } .row .column { display: inline; letter-spacing:0.5em; } .row .column a { font-size: 250%; color:rgba(0,0,0,0) } .row .column a:not(:hover) { opacity:.5; transition: opacity .5s; } form { width: 100%; margin: auto; padding: 0px; text-align: center; background: #fdf6e3; position: relative; top: 60px; } .search { width: 440px; height: 20px; margin-right: 0px; padding: 5px; background: #eee8d5; font-family: "Roboto", "Consolas", "Helvetica", sans-serif; font-size: 12px; letter-spacing: 0.5px; color: #657b83; opacity: .5; border: 2.5px solid #657b83; } .search:hover { border: 2.5px solid #657b83; } .search:focus { outline: none; border: 2.5px solid #657b83; } icons { width: 500px; height: 40px; margin: 0px auto; padding: 45px 0; font: "Roboto", "Consolas", "Helvetica", sans-serif; text-align: center; text-transform: uppercase; } i { color: #002b36; font-family: icons; font-size: 150px; font-weight: normal; font-style: normal; line-height: 0.0; opacity: 0.7; } icons h2 { margin: 0 0 8px; color: #002b36; font-size: 55px; font-weight: 300; text-align: center; opacity: 0.5; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); } icons ul { margin: 0; padding: 0; } icons li { background: #002b36; background: rgba(255,255,255,0.90); padding: 20px; display: inline-block; border-radius: 5px; }