@import"https://fonts.googleapis.com/css2?family=Varela+Round&display=swap";*{margin:0;font-family:Varela Round,sans-serif;padding:0;box-sizing:0;list-style:none;text-decoration:none;transition:all .2s ease}body{margin:10px 5vw;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns:svgjs='http://svgjs.dev/svgjs'%20viewBox='0%200%20700%20700'%20width='700'%20height='700'%20opacity='1'%3e%3cdefs%3e%3cradialGradient%20id='ffflux-gradient'%3e%3cstop%20offset='0%25'%20stop-color='hsl(301,%2062%25,%208%25)'%3e%3c/stop%3e%3cstop%20offset='100%25'%20stop-color='hsl(227,%2087%25,%2021%25)'%3e%3c/stop%3e%3c/radialGradient%3e%3cfilter%20id='ffflux-filter'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%20filterUnits='objectBoundingBox'%20primitiveUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='0.001%200.001'%20numOctaves='1'%20seed='59'%20stitchTiles='stitch'%20x='0%25'%20y='0%25'%20width='100%25'%20height='100%25'%20result='turbulence'%3e%3c/feTurbulence%3e%3cfeGaussianBlur%20stdDeviation='60%2066'%20x='0%25'%20y='0%25'%20width='100%25'%20height='100%25'%20in='turbulence'%20edgeMode='duplicate'%20result='blur'%3e%3c/feGaussianBlur%3e%3cfeBlend%20mode='color-burn'%20x='0%25'%20y='0%25'%20width='100%25'%20height='100%25'%20in='SourceGraphic'%20in2='blur'%20result='blend'%3e%3c/feBlend%3e%3c/filter%3e%3c/defs%3e%3crect%20width='700'%20height='700'%20fill='url(%23ffflux-gradient)'%20filter='url(%23ffflux-filter)'%3e%3c/rect%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:cover}#preview{width:22vw;height:21vw;background:linear-gradient(45deg,#bf26ff,#2700ff);border-radius:60px 30px 45px 85px}.MainArea{display:flex;flex-direction:column;justify-content:center;align-items:center}.Header{border:2px solid white;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-radius:10px;background:#e0e0e000}.items{display:flex;align-items:center;justify-content:space-between}.items li{font-size:1.75vw;padding:.5vw 1.75vw;margin:0vw 2vw;color:#0095ff;border:2px solid white;font-weight:600;border-radius:6px;transition:all .5s ease-in-out}.items li:hover{background:linear-gradient(45deg,#42b1ff,#0069b4);color:#000;text-shadow:0 0 3px #0a73a9,0 0 5px #0000ff}.Logo span:nth-child(1){font-size:4.5vw;color:#fff;font-weight:600;text-shadow:0 0 3px #0a73a9,0 0 5px #0c048b}.Logo span:nth-child(2){font-size:3.5vw;font-weight:600;color:#0095ff}.App{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:6vw;gap:3vw}.App input{color:#fff;width:19vw;border-radius:5px;background:#000;outline:dashed;opacity:.7}.App input:nth-child(3){rotate:180deg}.lateral{display:flex;align-items:center}.lateral input:first-child{rotate:90deg}.lateral input:nth-child(3){rotate:90deg}#textToCopy{color:#0095ff;margin:2vw;font-size:2.5vw;font-weight:600;padding:2vw;border:4px solid;border-image:linear-gradient(45deg,#007eff,#3cf);border-image-slice:1}#textToCopy:hover{color:#e3f3ff;border-image:linear-gradient(45deg,#00c21b,#00d70e);border-image-slice:1;cursor:pointer;background:#00294d}.Footer{text-align:center;background-color:#000;color:#fff;padding:11px}.AboutMe{display:flex;align-items:center;justify-content:center;height:25vw;width:74%;color:#fff;line-height:3vw;flex-direction:column;gap:2vw}.custom-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;box-shadow:0 0 10px #0000004d;border-radius:10px;font-size:2vw;background:#6cff6c;padding:2vw;font-weight:600;animation:pop .25s ease-in-out 1}@keyframes pop{0%{scale:.75}97%{scale:1.2}98.5%{scale:1.1}to{scale:1}}.modal-content{text-align:center}.close{position:absolute;top:10px;right:10px;font-size:20px;cursor:pointer}.AboutMe h4{color:#0095ff;font-size:3vw}.AboutMe p{padding:1vw;border:2px solid;border-radius:10px}@media only screen and (max-width: 600px){body{margin:0}.MainArea{height:165vw}.App{padding:1vw}.App input{width:23vw}#preview{padding:25vw;margin:0}.custom-modal{padding:3vw 10vw;font-size:3.5vw;top:45%;left:45%}#textToCopy{margin:10vw;font-size:5vw;text-align:center}.Logo{padding:2vw}.Logo span:nth-child(1){font-size:10vw}.Logo span:nth-child(2){font-size:7vw}.items{padding:10px;margin-right:0;justify-content:flex-end}.Header{justify-content:space-between;padding:0}.items a li{margin-left:0;font-size:3.5vw}.AboutMe h4{text-align:center;color:#0095ff;font-size:7vw;line-height:30px}.AboutMe p{padding:2vw;width:100%;font-size:5vw;line-height:22px}}