style.min.css

svg,svg *{fill:currentColor}.main__form,body{flex-direction:column}.aside__encrypt,.aside__h2,.aside__p,.modal__body,.modal__header{text-align:center}@media (prefers-reduced-motion:reduce){*{animation:none;transition:none}}*{margin:0;padding:0;border:0;box-sizing:border-box;vertical-align:baseline}figure,iframe,img,picture,video{max-width:100%;width:100%;display:block}a{display:block}p a{display:inline}li{list-style-type:none}html{scroll-behavior:smooth}a,b,blockquote,em,h1,h2,h3,h4,h5,h6,i,p,span,strong,u{font-size:1em;font-weight:inherit;font-style:inherit;text-decoration:none;color:inherit}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}::selection{background-color:rgba(0,0,0,.5);text-shadow:none}button,form,input,label,select,textarea{font-family:inherit;font-size:inherit;hyphens:auto;background-color:transparent;display:block;color:inherit}table,td,tr{border-collapse:collapse;border-spacing:0}svg{width:100%;display:block}body{min-height:100vh;font-size:100%;line-height:1.4em;font-smooth:always;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#292B38;color:#FFF;display:flex;font-family:Roboto,sans-serif}.main{width:100%;min-height:95vh;padding:2em 0;display:flex;flex-direction:row}.main__logo{display:flex;justify-content:center;min-width:10vw}.main__img{max-width:8em}.main__form{margin-top:4em;min-height:60vh;width:60vw;display:flex;justify-content:space-between}.main__textarea{width:100%;min-height:60vh;color:#FFF;font-size:1.75em;resize:none;height:100%}.main__textarea::placeholder{color:#FFF}.main__textarea:focus{outline:0}.main__footer{display:flex;flex-direction:column}.main__small{width:100%;margin-bottom:.5em}.main__small small{padding-left:1.5em;position:relative;display:flex;align-items:center}.main__small small::before{content:"";background-image:url(img/icon.svg);width:1em;height:1em;background-repeat:no-repeat;background-position:center;background-size:cover;display:block;position:absolute;left:0;filter:invert(1) brightness(2)}.main__buttons{width:100%;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}.main__button{border-radius:.5em;padding:1em;font-weight:600;font-family:1.5em;width:100%;cursor:pointer}.main__button-primary{background-color:#4EA1FA;color:#FFF;transition:background 250ms;margin-right:.75em}.main__button-primary:hover{background:#007bff}.main__button-secondary{background-color:#1D1E23;border:.15em solid #1D1E23;color:#4EA1FA;transition:background 250ms,border 250ms;margin-left:.75em}.aside__button,.modal__button{font-family:1.5em;color:#4EA1FA;transition:opacity 250ms}.main__button-secondary:hover{border-color:#4EA1FA}.aside{width:30vw;min-height:60vh;max-height:calc(90vh - 2em);padding:0 3em}.aside__content{background-color:#4EA1FA;box-shadow:0 0 2em 0 rgba(0,0,0,.38);-webkit-box-shadow:0 0 2em 0 rgba(0,0,0,.38);-moz-box-shadow:0 0 2em 0 rgba(0,0,0,.38);height:100%;width:100%;border-radius:1.5em;padding:2em;display:flex;justify-content:center;align-items:center;flex-direction:column}.aside__content--between{justify-content:space-between}.aside__content--none{display:none}.aside__message{overflow-y:auto;width:100%;height:100%}.aside__text{margin-top:3em;display:flex;justify-content:center;align-items:center;flex-direction:column}footer,footer h3{justify-content:center}.aside__h2{font-size:2em;line-height:1em;font-weight:600}.aside__p{margin-top:.5em;width:75%}.aside__encrypt{font-size:1.75em;line-height:1em;max-height:94vh;word-break:break-all}.aside__button{border-radius:.5em;margin-top:1em;padding:1em;min-height:6vh;font-weight:600;width:100%;cursor:pointer;background-color:#1D1E23;border:.15em solid #1D1E23;margin-left:.75em}.aside__button:hover{opacity:.8}footer{width:100%;min-height:5vh;display:flex;align-items:center;flex-direction:row}footer h3{font-size:1em;display:flex;align-items:center;color:#FFF}.modal,.modal__footer{justify-content:center}footer h3 svg{font-size:1em;width:1em;height:1em}footer h3 svg:nth-child(1){margin-right:.4em}footer h3 svg:nth-child(2){margin:0 .4em}footer h3 a{margin-left:.4em;text-decoration:underline}.modal{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;background-color:rgba(0,0,0,.5)}.modal__container{width:35vw;background-color:#4EA1FA;height:50vh;border-radius:2em;padding:2em;display:flex;justify-content:space-between;flex-direction:column;align-items:center}.modal__header{width:100%}.modal__title{font-size:2em}.modal__p{font-size:1.5em}.modal__footer{width:100%;display:flex;align-items:center}.modal__button{border-radius:.5em;margin-top:1em;padding:1em;min-height:6vh;font-weight:600;width:100%;cursor:pointer;background-color:#1D1E23;border:.15em solid #1D1E23;margin-left:.75em}.modal__button:hover{opacity:.8}@media screen and (max-width:1200px){.main{width:100%}.main__logo{min-width:7.5em}.aside{width:45vw}}@media screen and (max-width:1023px){.aside,.main__form{width:100%;padding:2em}body{flex-direction:column}.main{width:100%;flex-direction:column}.main__logo{min-width:7.5em;justify-content:flex-start}.main__textarea{font-size:1.5em}.aside{min-height:auto}.aside__content{padding-top:2em;padding-bottom:2em}.aside__img{display:none}.aside__text{margin:0}.aside__h2{font-size:1em}.aside__p{font-size:.9em}.aside__encrypt{font-size:1.5em}.aside__message{max-height:30vh;min-height:5vh}.modal__container{width:75vw}}@media screen and (max-width:767px){.main__buttons{flex-direction:column}.main__button{margin:1em 0 0}.aside__encrypt,.main__textarea{font-size:1.25em}.modal__container{width:90vw}}::-webkit-scrollbar{width:.25em}::-webkit-scrollbar-track{background:rgba(255,255,255,.5);border-radius:1em}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.5);border-radius:1em}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.75)}button{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}button:after{content:"";background:rgba(0,157,255,.5);display:block;position:absolute;opacity:0;width:10em;height:10em;border-radius:100%;padding:0;margin:0;transition:all 1s;transform:scale(5);aspect-ratio:1/1}button:active:after{padding:0;margin:0;opacity:1;transition:0s;transform:scale(0)}button:focus{outline:0}