2023-10-03 10:51:43 +00:00
|
|
|
:root{--volt-purple:#582c83;--background:#140022;--editor-purple:#522e77}*{margin:0;padding:0;font-family:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#140022;background-color:var(--background)}footer{margin:10vmin 0 0}.locale_chooser{margin:10vmin;text-align:center}.App{text-align:center;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff;padding:10vmin}h1{font-size:calc(10px + 10vmin);line-height:.9;margin-top:2vmin}h2{margin:10vh 0 2vh;font-size:calc(10px + 4vmin)}p{max-width:100%;width:calc(40vh + 15vw)}a{color:#fff}a:hover{color:hsla(0,0%,100%,.8)}.HeaderImage{height:calc(10px + 20vmin);max-width:100%}.FinishedFrame{height:36vh;margin:2vh}.FrameChooser .frame{position:relative;display:inline-block;font-size:0;margin:2vh;cursor:pointer;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.FrameChooser .frame img{height:24vh;pointer-events:none}.FrameChooser .frame:hover{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(1.1);transform:scale(1.1)}.FrameChooser .frame.choosen:after{content:"";position:absolute;top:-.5vh;right:-.5vh;bottom:-.5vh;left:-.5vh;box-shadow:0 0 0 .5vh #fff}.labelButton,button{position:relative;outline:none;border:none;margin:2vmin;padding:1vh 2vh;font-size:calc(10px + 2vmin);font-weight:700;cursor:pointer;background:#fff;color:#582c83;color:var(--volt-purple);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}button.isInRow{margin:1vmin}.labelButton:hover,button:hover{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(1.05);transform:scale(1.05)}button.choosen:after{content:"";position:absolute;top:-.5vh;right:-.5vh;bottom:-.5vh;left:-.5vh;box-shadow:0 0 0 .5vh #fff}.labelButton img{display:inline;height:calc(10px + 4vmin);margin:0 2vh 0 -1vh}.labelButton img,.labelButton span{vertical-align:middle}.droparea{position:fixed;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-weight:700;font-size:calc(10px + 10vmin);background:rgba(20,0,34,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;opacity:0;transition:opacity .2s ease}.droparea.active{opacity:1}.Editor{pointer-events:all;position:relative;margin:2vh;font-size:0;cursor:move;overflow:hidden;width:calc(36vh - 1px);height:calc(36vh - 1px);background:#522e77;background:var(--editor-purple)}.Editor .background{pointer-events:none;position:absolute;top:50%;left:50%}.Editor .foreground{pointer-events:none;position:relative;width:36vh;height:36vh}.Editor .hashtag{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%}
|
