html{margin:0;padding:0;border:none;font-family:'Roboto',sans-serif}h1{font-size:36px}.parent{display:grid;grid-template-columns:250px .25fr 1fr .9fr 300px;grid-template-rows:55px 55px 55px 1fr;grid-column-gap:5px;grid-row-gap:5px;padding:10px;max-width:1200px;margin:auto}.div0{grid-area:1 / 1 / 2 / 5;text-align:center;line-height:20px}.div1{grid-area:2 / 1 / 3 / 2;background:#D5D5D5;text-align:center;font-size:26px;line-height:40px;padding:5px 0 0 0}.div2{grid-area:2 / 2 / 3 / 3;text-align:center;padding:20px 0 0 0;font-size:42px}.switchButton{grid-area:3 / 2 / 4 / 3;text-align:center;color:#fff;padding:5px 15px;border:1px solid #1A73E8;border-radius:5px;cursor:pointer;transition:background-color 0.3s ease,box-shadow 0.3s ease;font-size:18px;background-color:#f1f1f1;color:#1A73E8;box-shadow:0 2px 4px rgba(0,0,0,.2);display:inline-block;margin:5px}.switchButton:hover{background-color:#1A73E8;color:#fff}.switchButton:focus{outline:none;box-shadow:0 0 0 2px rgba(0,123,255,.5)}.div3{grid-area:2 / 3 / 3 / 4;background:#D5D5D5;text-align:center;font-size:26px;line-height:40px;padding:5px 0 0 0}.div4{grid-area:3 / 1 / 4 / 2;background:#fff;width:auto}#div5{grid-area:3 / 3 / 4 / 4;background:#fff;padding:8px 0 0 0;text-align:center;font-size:26px;overflow:auto;max-height:100px}.div6{grid-area:4 / 1 / 5 / 5;font-size:18px;line-height:1.6}.div7{grid-area:2 / 4 / 3 / 5;background:#D5D5D5;text-align:center;font-size:26px;line-height:40px;padding:5px}#div8{grid-area:3 / 4 / 4 / 5;background:#fff;padding:8px 0 0 0;text-align:center;font-size:26px;overflow:auto}#sidebar{grid-area:1 / 5 / 5 / 6;text-align:center}#div5,#div8{border:1px solid #000;border-radius:5px}.red{color:red}p{margin-top:1em;margin-bottom:1em}input[type='text'],input[type='number'],textarea{font-size:26px}.clearButton{background:#ed3330}.copyButton{background:#32CD32}.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,{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}#text{width:75%;margin:0 auto}textarea{box-sizing:border-box;border:3px solid #ccc;padding:8px 0 3px 0;border-radius:5px;height:55px;width:100%;outline:none;white-space:initial;resize:none;text-align:center;background-color:#fff;transition:background-color 0.3s ease,border-color 0.3s ease;-webkit-box-shadow:0 8px 6px -6px #999;-moz-box-shadow:0 8px 6px -6px #999;box-shadow:0 8px 6px -6px #999}textarea:hover{background-color:#f0f0f0;border-color:#888}textarea:focus{border:3px solid #555}#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}.buttonBox{grid-area:6/2/7/4}.textAreaBox{grid-area:1/2/10/4}#advert{grid-area:1/4/9/5;height:100px}#buttonAdvert{grid-area:9/1/10/3}#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}.div6 a{color:#1A73E8}@media only screen and (max-width:992px){h1{font-size:22px}.parent{display:grid;grid-template-columns:1fr 300px;grid-template-rows:55px 55px 55px 55px 55px 55px 55px 55px 55px 1fr;grid-column-gap:3px;grid-row-gap:0}.div0{grid-area:1 / 1 / 2 / 2;text-align:center;line-height:18px}.div1{grid-area:2 / 1 / 3 / 1}.div2{grid-area:4 / 1 / 5 / 1;line-height:0;margin:10px 0}.switchButton{grid-area:5 / 1 / 6 / 1;width:100px;height:36px;margin:auto}.div3{grid-area:6 / 1 / 7 / 1}.div4{grid-area:3 / 1 / 4 / 1}#div5{grid-area:7 / 1 / 8 / 1}.div6{grid-area:10 / 1 / 11 / 1}.div7{grid-area:8 / 1 / 9 / 1}#div8{grid-area:9 / 1 / 10 / 1}#sidebar{grid-area:1 / 2 / 11 / 3;text-align:center}.hide{display:none}#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:768px){h1{font-size:22px}.parent{display:grid;grid-template-columns:1fr;grid-template-rows:55px 55px 55px 55px 55px 55px 55px 55px 55px 1fr;grid-column-gap:3px;grid-row-gap:0}.div1{grid-area:2 / 1 / 3 / 1}.div2{grid-area:4 / 1 / 5 / 1;line-height:0}.switchButton{grid-area:5 / 1 / 6 / 1}.div3{grid-area:6 / 1 / 7 / 1}.div4{grid-area:3 / 1 / 4 / 1}#div5{grid-area:7 / 1 / 8 / 1}.div6{grid-area:10 / 1 / 11 / 1}.div7{grid-area:8 / 1 / 9 / 1}#div8{grid-area:9 / 1 / 10 / 1}#sidebar{display:none}.hide{display:none}#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}}#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}}