body{ width: 100%; text-align:center; background: #00B3B3; background: -moz-radial-gradient(center, ellipse cover, #00B3B3 0%, #1B5BC0 100%); background: -webkit-radial-gradient(center, ellipse cover, #00B3B3 0%,#1B5BC0 100%); background: radial-gradient(ellipse at center, #00B3B3 0%,#1B5BC0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00B3B3', endColorstr='#1B5BC0',GradientType=1 ); background-repeat:no-repeat; background-size:cover; background-attachment:fixed; } .whitetransparent { background-image: url(https://watereffect.net/whitetransparent.png); background-repeat: repeat; background-position: center top; border: solid 0px #f4f4f4; margin:auto; height: 100%; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); } .whitetransparent2 { background-image: url(https://watereffect.net/whitetransparent.png); background-repeat: repeat; background-position: center top; border: solid 0px #f4f4f4; margin:auto; height: 100%; } .the-box{ display: flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items: stretch; align-content: stretch; height:100%; } .xyz-text { color: #fff; font-size: 5em; font-weight: bold; font-family: 'Warnes'; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } @media screen and (max-width: 600px) { .xyz-text { color: #fff; font-size: 2em; font-family: 'Warnes'; text-shadow: 0 0px 0 #ccc, 0 0px 0 #c9c9c9, 0 0px 0 #bbb, 0 0px 0 #b9b9b9, 0 0px 0 #aaa, 0 0px 0px rgba(0,0,0,0), 0 0 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0); } }