* { box-sizing:border-box; } body { font-size:62.5%; } h1,h2,h3 { font-family:'PT Sans',sans-serif; text-transform:uppercase; } h2 { font-size:1.6em; margin:0; padding:10px; border-top:1px solid #ccc; } h3 { margin:0; padding:10px; } .Outer { background:#f1f1f1; text-align:center; margin-top:30px; /*border-top:1px solid #004eff; border-bottom:1px solid #004eff; */ } .Outer:first-child { margin-top:0; } .Wrapper { text-align:center; background-color:#fff; padding:10px; } .content { display:inline-block; text-align:center; font-family:'Francois One',Helvetica,Arial,sans-serif; font-size:5rem; color:#deeaff; text-decoration:none; text-shadow:1.5px 1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px 1.5px 0 #818acc,1.5px -1.5px 0 #818acc; transition:all 400ms ease-in-out; } .content-pushDown { text-shadow:1.5px 1.5px 0 #004eff,0px 1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px 1.5px 0 #004eff,1.5px -1.5px 0 #004eff,0.77782px 0.77782px 0 #7793fb,1.55563px 1.55563px 0 #7793fb,2.33345px 2.33345px 0 #7793fb,3.11127px 3.11127px 0 #7793fb,3.88909px 3.88909px 0 #7793fb,4.6669px 4.6669px 0 #7793fb,5.44472px 5.44472px 0 #7793fb,6.22254px 6.22254px 0 #7793fb,7.00036px 7.00036px 0 #7793fb,7.77817px 7.77817px 0 #7793fb; } .content-pushDown:hover { transform:translate(9px,9px); text-shadow:1.5px 1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px 1.5px 0 #818acc,1.5px -1.5px 0 #818acc; } .content-raiseUp:hover { transform:translate(-9px,-9px); text-shadow:1.5px 1.5px 0 #004eff,0px 1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px 1.5px 0 #004eff,1.5px -1.5px 0 #004eff,0.77782px 0.77782px 0 #7793fb,1.55563px 1.55563px 0 #7793fb,2.33345px 2.33345px 0 #7793fb,3.11127px 3.11127px 0 #7793fb,3.88909px 3.88909px 0 #7793fb,4.6669px 4.6669px 0 #7793fb,5.44472px 5.44472px 0 #7793fb,6.22254px 6.22254px 0 #7793fb,7.00036px 7.00036px 0 #7793fb,7.77817px 7.77817px 0 #7793fb; } .content-shadow:hover { transform:translate(5px,0); } .content-shadow.content-raiseUp:hover { transform:translate(-5px,0); } /*.color { background-color:#00b0ff; } */ .color .content { color:#9beaf8; text-shadow:1.5px 1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px 1.5px 0 #76a3d3,1.5px -1.5px 0 #76a3d3; } .color .content-pushDown { text-shadow:1.5px 1.5px 0 #fff,0px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,0.77782px 0.77782px 0 #154ae6,1.55563px 1.55563px 0 #154ae6,2.33345px 2.33345px 0 #154ae6,3.11127px 3.11127px 0 #154ae6,3.88909px 3.88909px 0 #154ae6,4.6669px 4.6669px 0 #154ae6,5.44472px 5.44472px 0 #154ae6,6.22254px 6.22254px 0 #154ae6,7.00036px 7.00036px 0 #154ae6,7.77817px 7.77817px 0 #154ae6; } .color .content-pushDown:hover { text-shadow:1.5px 1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px 1.5px 0 #76a3d3,1.5px -1.5px 0 #76a3d3; } .color .content-raiseUp:hover { text-shadow:1.5px 1.5px 0 #fff,0px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,0.77782px 0.77782px 0 #154ae6,1.55563px 1.55563px 0 #154ae6,2.33345px 2.33345px 0 #154ae6,3.11127px 3.11127px 0 #154ae6,3.88909px 3.88909px 0 #154ae6,4.6669px 4.6669px 0 #154ae6,5.44472px 5.44472px 0 #154ae6,6.22254px 6.22254px 0 #154ae6,7.00036px 7.00036px 0 #154ae6,7.77817px 7.77817px 0 #154ae6; } svg { line-height:1.2; width:410px; height:1.5em; } .content--svg text,.content--svg stop { transition:all 350ms ease-in-out; } .content--svg text { text-transform:uppercase; fill:url(#striped); text-shadow:1.5px 1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px -1.5px 0 #818acc,-1.5px 1.5px 0 #818acc,1.5px -1.5px 0 #818acc; } .content--svg:hover text { text-shadow:1.5px 1.5px 0 #004eff,0px 1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px -1.5px 0 #004eff,-1.5px 1.5px 0 #004eff,1.5px -1.5px 0 #004eff,0.77782px 0.77782px 0 #7793fb,1.55563px 1.55563px 0 #7793fb,2.33345px 2.33345px 0 #7793fb,3.11127px 3.11127px 0 #7793fb,3.88909px 3.88909px 0 #7793fb,4.6669px 4.6669px 0 #7793fb,5.44472px 5.44472px 0 #7793fb,6.22254px 6.22254px 0 #7793fb,7.00036px 7.00036px 0 #7793fb,7.77817px 7.77817px 0 #7793fb; } .content--svg stop { stop-color:#deeaff; } .content--svg:hover stop { stop-color:#fff; } .content--svg:hover stop:nth-child(2),.content--svg:hover stop:nth-child(3) { stop-color:#76a3d3; } .color .content--svg text { fill:url(#stripedColor); text-shadow:1.5px 1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px -1.5px 0 #76a3d3,-1.5px 1.5px 0 #76a3d3,1.5px -1.5px 0 #76a3d3; } .color .content--svg:hover text { text-shadow:1.5px 1.5px 0 #fff,0px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,0.77782px 0.77782px 0 #154ae6,1.55563px 1.55563px 0 #154ae6,2.33345px 2.33345px 0 #154ae6,3.11127px 3.11127px 0 #154ae6,3.88909px 3.88909px 0 #154ae6,4.6669px 4.6669px 0 #154ae6,5.44472px 5.44472px 0 #154ae6,6.22254px 6.22254px 0 #154ae6,7.00036px 7.00036px 0 #154ae6,7.77817px 7.77817px 0 #154ae6; } .color stop { stop-color:#9beaf8; } .color .content--svg:hover stop:nth-child(2),.color .content--svg:hover stop:nth-child(3) { stop-color:#1c00f9; }