body{background-image:url(../media/medium-bg.jpg);background-repeat:no-repeat;background-size:cover}main{display:grid;grid-template-columns:1fr;align-items:center}section{box-sizing:border-box}section.entry{position:relative;min-height:5rem;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:rgba(27,152,161,.5);box-shadow:0 0 50px rgba(0,0,0,.5),10px 10px 10px rgba(0,0,0,.7),inset 20px 0 30px rgba(2,2,125,.5),inset 3px -1px 3px #c8ffff;border:2px ridge #1b98a1;padding:1.25rem;margin:5px 0}section.entry:nth-child(2n){background-color:rgba(0,0,3,.5);box-shadow:0 0 50px rgba(0,0,0,.5),10px 10px 10px rgba(0,0,0,.7),inset 20px 0 30px rgba(2,2,2,.5),inset 3px -1px 3px rgba(255,222,225,.8);border-color:#000}section.entry:nth-child(3n){background-color:rgba(71,44,0,.77);box-shadow:0 0 50px #000,10px 10px 10px rgba(7,3,3,.7),inset 20px 0 30px rgba(225,109,117,.3),inset 3px -1px 3px rgba(255,222,125,.8);border-color:#472c00}section.entry:nth-child(5n){background-color:rgba(47,120,43,.8);box-shadow:0 0 50px rgba(0,0,0,.58),10px 10px 10px rgba(5,10,7,.7),inset 20px 0 30px rgba(1,35,1,.5),inset 3px -1px 3px rgba(255,255,225,.8);border-color:rgba(47,120,43,.8)}section.entry:nth-child(7n){background-color:rgba(136,20,167,.7);box-shadow:0 0 50px rgba(0,0,0,.5),10px 10px 10px rgba(8,1,8,.7),inset 20px 0 30px rgba(136,20,200,.6),inset 3px -1px 3px rgba(255,222,225,.8);border-color:#8814a7}section.entry button{height:1.5rem;width:1.5rem;position:absolute;top:0;right:0;opacity:0;transition:opacity .3s;padding:0;margin:0}section.entry button:focus,section.entry:hover button{opacity:1}section.entry textarea{font-family:sans-serif;font-weight:600;color:#faebd7;background-color:transparent;text-align:center;width:100%;height:100%;font-size:1.05rem;resize:vertical;box-sizing:border-box;overflow:hidden}section.entry img{width:100%;height:auto}button{font-size:1.25em;color:#faebd7;background:0 0;font-weight:600}@media only screen and (min-width:425px){main{grid-template-columns:1fr 1fr}section.entry{margin:2%}#image.button,#text.button{grid-column:span 2}}@media only screen and (min-width:768px){main{grid-template-columns:repeat(3,1fr)}section.entry{margin:5%}#image.button,#text.button{grid-column:span 3}}@media only screen and (min-width:1024px){main{grid-template-columns:repeat(4,1fr)}section.entry{margin:9%}#image.button,#text.button{grid-column:span 4}}@media screen and (pointer:coarse){section.entry button{opacity:1}section.entry textarea{padding-right:1.5rem;overflow:scroll}}button:focus,button:hover{color:red;background-color:rgba(248,242,242,.5);-webkit-animation:flameB 1s ease-in-out infinite alternate;-moz-animation:flameB 1s ease-in-out infinite alternate;animation:flameB 1s ease-in-out infinite alternate}#image.button button:focus,#image.button button:hover,#text.button button:focus,#text.button button:hover{color:green}section.button button{width:100%;height:100%;box-sizing:border-box;padding:.35rem 0}section#image input{display:none}h1{font-size:4rem;color:#fff;margin:.25rem 0 2rem}section.entry{transition:.5s}section.entry:hover{box-shadow:0 2px 4px #000,0 8px 30px #000}h1:hover{color:#fff;-webkit-animation:flameT 1s ease-in-out infinite alternate;-moz-animation:flameT 1s ease-in-out infinite alternate;animation:flameT 1s ease-in-out infinite alternate}@-webkit-keyframes flameB{from{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a;box-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a;box-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a}}@-moz-keyframes flameB{from{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a;box-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a;box-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a}}@keyframes flameB{from{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a;box-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a;box-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a}}@-webkit-keyframes flameT{from{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a}}@-moz-keyframes flameT{from{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a}}@keyframes flameT{from{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ffdd1b,0 0 70px #ffdd1b,0 0 80px #ff1a1a,0 0 100px #ff1a1a,0 0 150px #ff1a1a}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ffdd1b,0 0 35px #ffdd1b,0 0 40px #ff1a1a,0 0 50px #ff1a1a,0 0 75px #ff1a1a}}
