html{margin:0;padding:0;border:none;font-family:Arial,sans-serif}p{margin-top:1em;margin-bottom:1em}h1{text-align:center;font-size:33px;line-height:0;color:#031f30}input[type='text'],input[type='number'],textarea{font-size:16px}.tweetButton{color:#fff!important;background:#0078a6;border-radius:25px;text-transform:uppercase;text-decoration:none;padding:20px;margin:5px 0 0 5px;float:left;border:none;transition:all 0.4s ease 0s}.clearButton{background:#d52d2b;float:right}.copyButton{background:#1e7b1e;float:right}.clearButton,.copyButton{color:#fff!important;text-transform:uppercase;text-decoration:none;padding:20px;margin:5px 0 0 5px;display:inline;border-radius:5px;border:none;transition:all 0.4s ease 0s}.clearButton:hover,.copyButton:hover,.tweetButton:hover{background:#434343;-webkit-box-shadow:0 5px 40px -10px rgba(0,0,0,.57);-moz-box-shadow:0 5px 40px -10px rgba(0,0,0,.57);box-shadow:5px 40px -10px rgba(0,0,0,.57);transition:all 0.4s ease 0s}#userWord{line-height:20px}.parent{display:grid;grid-template-columns:260px repeat(2,1fr) 300px;grid-template-rows:50px 40px 60px 65px repeat(4,50px) 60px 1fr;grid-column-gap:10px;grid-row-gap:10px;padding:10px;max-width:1200px;margin:auto}.parent ul{list-style:disc;padding-left:2em}#div4,#div5,#typed,#div6,#div7,#div8,#div9{color:#000}#typed,#typed2{overflow:auto}#div12{grid-area:1 / 1 / 5 / 2;margin:-15px 0 0 0}#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9{line-height:35px;padding:5px}#div1{grid-area:1 / 2 / 2 / 4;text-align:center;line-height:20px}#div2{grid-area:2 / 2 / 3 / 3;text-align:center;font-size:20px;line-height:35px;background-color:#cfebfc;margin-bottom:-10px}#div3{grid-area:2 / 3 / 3 / 4;text-align:center;font-size:20px;line-height:35px;background-color:#cfebfc;margin-bottom:-10px}#div4{grid-area:3 / 2 / 4 / 3;text-align:center;border:1px solid #1da1f2;font-size:40px;line-height:40px;background-color:#fff}#div5{grid-area:3 / 3 / 4 / 4;text-align:center;border:1px solid #1da1f2;font-size:40px;line-height:40px;background-color:#fff}#div6{grid-area:5 / 1 / 6 / 2;border:1px solid #1da1f2;font-size:20px;line-height:35px;grid-column-gap:0;grid-row-gap:0;background-color:#e7f5fe;border-radius:10px}#div7{grid-area:6 / 1 / 7 / 2;border:1px solid #1da1f2;font-size:20px;line-height:35px;grid-column-gap:0;grid-row-gap:0;background-color:#e7f5fe;border-radius:10px}#div8{grid-area:7 / 1 / 8 / 2;border:1px solid #1da1f2;font-size:20px;line-height:35px;background-color:#e7f5fe;border-radius:10px}#div9{grid-area:8 / 1 / 9 / 2;border:1px solid #1da1f2;font-size:20px;line-height:35px;background-color:#e7f5fe;border-radius:10px}#div10{grid-area:4 / 2 / 9 / 4}#sidebar{grid-area:1 / 4 / 11 / 5}#text{grid-area:10 / 1 / 11 / 4;font-size:18px;line-height:1.6}#text a{color:#1A73E8}.smallerSide{font-size:20px}textarea{box-sizing:border-box;border:5px solid #ccc;padding:5px 5px;border-radius:15px;height:310px;width:100%;outline:none;white-space:initial}textarea:focus{border:5px solid #063e60;-webkit-box-shadow:0 8px 6px -6px #999;-moz-box-shadow:0 8px 6px -6px #999;box-shadow:0 8px 6px -6px #999}#item1{border-radius:5px;border:3px solid #555;-webkit-box-shadow:0 8px 6px -6px #999;-moz-box-shadow:0 8px 6px -6px #999;box-shadow:0 8px 6px -6px #999;padding:0 0 0 5px;font-size:36px;line-height:46px}#item2,#item3,#item4,#item5,#item6,#item7,#item8{background:LightGray;margin:5px 0;border:3px solid #555;border-radius:5px;padding:5px;-webkit-box-shadow:0 8px 6px -6px #999;-moz-box-shadow:0 8px 6px -6px #999;box-shadow:0 8px 6px -6px #999;font-size:18px;line-height:25px}#item1{grid-area:1/1/2/4}#item2{grid-area:1/1/2/2}#item3{grid-area:2/1/3/2}#item4{grid-area:3/1/4/2}#item5{grid-area:4/1/5/2}.textAreaBox{grid-area:1/2/10/4}#advert{background:red;width:160px;height:600px;float:right}input{width:95%}#buttonAdvert{grid-area:9/1/10/3}.containerBox{box-sizing:border-box;padding:5px;width:100%;display:grid;grid-template-columns:250px 1fr 300px 180px;grid-template-rows:65px 65px 65px 65px 30px;grid-column-gap:15px;grid-row-gap:3px}#containerOutput{margin:0 0 0 0;padding:5px;width:100%;display:grid;grid-template-columns:250px 1fr 1fr 180px;grid-template-rows:40px 50px;box-sizing:border-box}#num3{grid-area:1/3/2/4}#num1{grid-area:2/2/3/3}#num4{grid-area:1/2/2/3}#num2{grid-area:2/3/3/4}#num1,#num2,#num3,#num4{background:LightPink;padding:0 0 0 0;font-size:20px;text-transform:uppercase;line-height:40px;text-align:center;font-family:'Roboto',sans-serif}#num1,#num2{font-size:39px}@media only screen and (max-width:1200px){.hide{display:none}}@media only screen and (max-width:1100px){#sidebar{grid-area:1 / 4 / 11 / 5}#div12{display:none}h1{text-align:center;font-size:36px;line-height:28px}.parent{display:grid;grid-template-columns:repeat(2,1fr) 300px;grid-template-rows:60px 35px 55px 375px repeat(2,50px) 1fr;grid-column-gap:10px;grid-row-gap:10px}#div1{grid-area:1 / 1 / 2 / 3}#div2{grid-area:2 / 1 / 3 / 2}#div3{grid-area:2 / 2 / 3 / 3}#div4{grid-area:3 / 1 / 4 / 2}#div5{grid-area:3 / 2 / 4 / 3}#div6{grid-area:5 / 1 / 6 / 2;line-height:40px}#div7{grid-area:5 / 2 / 6 / 3;line-height:40px}#div8{grid-area:6 / 1 / 7 / 2;line-height:40px}#div9{grid-area:6 / 2 / 7 / 3;line-height:40px}#div10{grid-area:4 / 1 / 5 / 3}#sidebar{grid-area:1 / 3 / 8 / 4}#text{grid-area:7 / 1 / 8 / 3}}@media only screen and (max-width:768px){.hide{display:none}.parent{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:60px 30px 50px 1fr repeat(2,50px);grid-column-gap:8px;grid-row-gap:8px}#sidebar{display:none}#containerOutput{margin:0 0 0 0;padding:5px;width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:40px 50px;box-sizing:border-box}#num3{grid-area:1/2/2/3}#num1{grid-area:2/1/3/2}#num4{grid-area:1/1/2/2}#num2{grid-area:2/2/3/3}.containerBox{font-size:36px;line-height:46px;padding:1px;width:99%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:50px 260px 65px 55px 55px 55px 55px 55px 55px;grid-column-gap:2px;grid-row-gap:2px}#item0{grid-area:1/1/2/2}.textAreaBox{grid-area:1/1/3/3}.buttonBox{grid-area:3/1/4/3;margin:0 0 0 0}#item1{grid-area:1/1/2/3;margin:1px}#item2{grid-area:4/1/5/2}#item3{grid-area:4/2/5/3}#item4{grid-area:5/1/5/2}#item5{grid-area:5/2/6/3}#item6{grid-area:6/1/7/2}#item7{grid-area:6/2/7/3}#item8{grid-area:7/1/8/2}#buttonAdvert{grid-area:11/1/12/3}}<!-- @media only screen and (max-width:584px){#buttonAd{display:none}}-->@media only screen and (max-width:550px){h1{text-align:center;font-size:32px;line-height:16px}.parent{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:60px 30px 50px 375px repeat(4,50px) 1fr;grid-column-gap:4px;grid-row-gap:4px}#div1{grid-area:1 / 1 / 2 / 3}#div2{grid-area:2 / 1 / 3 / 2;line-height:25px}#div3{grid-area:2 / 2 / 3 / 3;line-height:25px}#div4{grid-area:3 / 1 / 4 / 2;font-size:20px}#div5{grid-area:3 / 2 / 4 / 3;font-size:20px}#div6{grid-area:5 / 1 / 6 / 3}#div7{grid-area:6 / 1 / 7 / 3}#div8{grid-area:7 / 1 / 8 / 3}#div9{grid-area:8 / 1 / 9 / 3}#div10{grid-area:4 / 1 / 5 / 3}#text{grid-area:9 / 1 / 10 / 3}textarea{height:300px}.containerBox{grid-template-rows:50px 260px 65px 55px 55px 55px 55px 55px 55px;grid-column-gap:1px;grid-row-gap:1px}#item1{margin:5px 0;padding:5px;font-size:20px;line-height:25px}#item2{grid-area:4/1/5/3}#item3{grid-area:5/1/6/3}#item4{grid-area:6/1/7/3}#item5{grid-area:7/1/8/3}#item6{grid-area:8/1/9/3}#item7{grid-area:9/1/10/3}#item8{grid-area:10/1/11/3}.buttonBox{grid-area:3/1/4/3;margin:0}}@media only screen and (max-width:480px){h1{text-align:center;font-size:24px;line-height:18px}}#snackbar,#snackbarFail{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#5cb85c;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:17px}#snackbarFail{background-color:#d9534f}#snackbar.show,#snackbarFail.show{visibility:visible;-webkit-animation:fadein 0.5s,fadeout 0.5s 2.5s;animation:fadein 0.5s,fadeout 0.5s 2.5s}@-webkit-keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}