@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap);body{-webkit-text-size-adjust:100%;color:#333}body,h1.title{font-family:Josefin Sans,sans-serif;font-weight:700}h1.title{font-size:2vw;left:33%;position:absolute;top:2%;z-index:98}.container{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;margin:1ch;outline:none;padding:2rem;position:relative}a{color:#0074d9}.rotatewarning{align-items:center;background:#333;color:#fff;display:none;flex-direction:column;font-family:Josefin Sans,sans-serif;font-size:calc(16px + 1vw);font-weight:700;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:200}.rotatewarning svg{margin-bottom:10vw}.rotatewarning p{font-size:80%;line-height:1.2;margin-top:3vw;max-width:50vw;opacity:.5;text-align:center}@media(orientation:portrait)and (max-width:800px){.rotatewarning{display:flex}}.PeriodicTable{display:flex;flex-direction:column;max-width:99%;padding-bottom:2.5vw;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.PeriodicTable .elements{display:flex;flex-flow:row wrap}.legend{align-items:center;background-color:#f2f3f4;border:1px_solid_black;border-radius:10px;display:flex;flex-direction:row;flex-wrap:wrap;font-family:Josefin Sans,sans-serif;font-size:.75vw;font-weight:700;justify-content:center;left:32%;position:absolute;top:7%;width:30%;z-index:99}.classify{cursor:pointer;margin:.75ch;padding:1ch;text-align:center;width:13ch}.aesthetic{background-color:#fabed4}.sprite{background-color:#f2e4fa}.style{background-color:#42d4f4}.template{background-color:#fffac8}.attention{background-color:#deb887}.audio-video{background-color:#cda4ff}.effect{background-color:#d3fdf8}.resize{background-color:#f4ff6a}.audio{background-color:#fac9a6}.custom{background-color:#ffe119}.image{background-color:#f58231}.layer{background-color:#98fb98}.optimization{background-color:#ffd8b1}.photoshop{background-color:oldlace}.resolution{background-color:#911eb4}.size{background-color:#f032e6}.place{background-color:#a9a9a9}.Element{align-items:center;background:#f2f2f2;border:1px solid #fff;border-collapse:collapse;cursor:pointer;display:flex;flex:0 0 5.5556%;flex-direction:column;font-size:.76vw;height:5.4vw;justify-content:center;overflow:hidden;position:relative}.Element .symbol{font-family:Josefin Sans,sans-serif;font-size:1.7vw;font-weight:700;margin-bottom:.1vw}.Element .number{position:absolute;right:.3vw;top:.3vw}.Element .name{margin-bottom:.2vw}.Element.blank{background:#fff;border:0;height:1.6vh}.highlight{color:red}div.Element.aesthetic{background-color:#fabed4}div.Element.audio{background-color:#fac9a6}div.Element.custom{background-color:#ffe119}div.Element.image{background-color:#f58231}div.Element.layer{background-color:#98fb98}div.Element.optimization{background-color:#ffd8b1}div.Element.photoshop{background-color:oldlace}div.Element.resolution{background-color:#911eb4}div.Element.size{background-color:#f032e6}div.div.Element.place{background-color:#a9a9a9}div.Element.sprite{background-color:#f2e4fa}div.Element.style{background-color:#42d4f4}div.Element.template{background-color:#fffac8}div.Element.attention{background-color:#deb887}div.Element.audio-video{background-color:#cda4ff}div.Element.effect{background-color:#d3fdf8}div.Element.resize{background-color:#f4ff6a}.line1{font-size:.55vw;margin:1ch 0}.line1,.line2{-webkit-text-size-adjust:100%;color:#333;font-family:Josefin Sans,sans-serif;font-weight:400;text-align:center}.line2{font-size:.49vw}.overlay{background-color:rgba(0,0,0,.7);bottom:0;height:100%;left:0;opacity:0;position:absolute;right:0;top:0;transition:.5s ease;width:100%}.Element:hover .overlay{opacity:1}.text{color:#fff;font-size:.75rem;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}*,:after,:before{box-sizing:border-box}a,b,blockquote,body,canvas,caption,code,div,em,embed,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,label,li,main,nav,object,ol,p,pre,section,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,video{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}footer,header,main,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{-webkit-appearance:none;border-radius:0}
/*# sourceMappingURL=main.ca3844af.css.map*/