@import url(https://fonts.googleapis.com/css2?family=Boldonse&family=Fascinate+Inline&family=Fira+Code:wght@300..700&family=Holtwood+One+SC&family=Kaushan+Script&family=League+Spartan:wght@100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Orbitron:wght@400..900&family=Permanent+Marker&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Podkova:wght@400..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);body{background-color:var(--colors-surface1);color:var(--colors-black);font-family:var(--font-secondary);margin:0;padding:20px;width:calc(100% - 40px);.body{height:calc(100vh - 100px);width:100%}h1{margin:0}button{cursor:pointer}.icon-button{align-items:center;background:none;border:none;color:var(--colors-black);display:flex;font-weight:700;gap:5px;justify-content:center;padding:5px;width:70px;z-index:2;img{width:15px}}.blue-button{align-items:center;background:linear-gradient(180deg,var(--color-blue),var(--color-blue-dark));border:none;border-radius:8px;color:var(--colors-surface1);display:flex;font-weight:700;gap:5px;height:calc(100% + 6px);justify-content:start;padding:5px 20px;z-index:2;img{width:15px}}.icon-label{align-items:center;background:none;border:none;color:var(--color-white);display:flex;gap:5px;justify-content:start;margin-bottom:20px;padding:5px;text-transform:capitalize;img{width:25px}}}:root{--colors-surface1:#fff;--colors-surface2:#efefef;--colors-surface3:#f3f3f3;--colors-surface4:#c5c5c5;--colors-black:#323232;--color-blue:#3a7bd5;--color-blue-dark:#2a5ca9;--font-primary:"Inter","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;--font-secondary:"Roboto"}header{align-items:center;display:flex;gap:10px;height:30px;justify-content:start;margin:0 0 20px;width:100%;img{border-radius:100px;width:20px}label{font-size:15px}.slash{margin:0 10px;opacity:.5}.name{margin-right:auto}.toggle{align-items:center;background-color:var(--colors-surface3);border-radius:8px;display:flex;gap:5px;height:100%;justify-content:center;padding:3px;position:relative;img{filter:brightness(0) invert(0)}.selected-button{background:var(--colors-surface1);border-radius:5px;box-shadow:0 0 10px var(--colors-surface4);height:calc(100% - 6px);left:2.5%;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;width:calc(50% - 6px);z-index:1}.selected-button.active{transform:translate(107%,-50%)}}}.code-section{align-self:center;background:none;display:flex;gap:20px;height:100%!important;justify-content:center;width:100%;img{filter:brightness(0) invert(0)}.right-section{background-color:var(--colors-surface3);border:1px solid var(--colors-surface4);border-radius:10px;height:-webkit-fit-content;height:fit-content;width:30%;.hero{font-weight:700;height:-webkit-fit-content;height:fit-content;padding:20px 20px 0;width:calc(100% - 40px);z-index:10;.open-source{background:#151515!important;border:1px solid var(--colors-surface4);border-radius:10px;color:var(--colors-surface1);margin:0 0 20px;padding:20px}.button-section{align-self:center;display:flex;gap:10px;height:50px;justify-content:start;width:100%;button{background:none;border:none;border-radius:5px 5px 0 0;color:var(--colors-surface4);font-weight:700;height:35px;transition:all .1s;width:-webkit-fit-content;width:fit-content}.css-button.active,.html-button.active,.js-button.active{background-color:var(--colors-surface1);border:1px solid var(--colors-surface4)!important;border-bottom:none!important;color:var(--colors-black)}}.button-section.active{display:none!important}}.hero.active{display:none}.code-editor-section{align-items:center;background-color:var(--colors-surface1);border:1px solid var(--colors-surface4);border-radius:0 0 10px 10px;display:flex;height:calc(79vh - 115px);justify-content:center;margin:-17px 0 0 -1px;padding:15px 0;position:relative;width:100%;z-index:5;.line-numbers{font-size:15px;height:100%;overflow:hidden;padding:10px;text-align:right;-webkit-user-select:none;user-select:none}.copy-code{background-color:var(--colors-surface1);border:1px solid var(--colors-surface4);border-radius:5px;position:absolute;right:10px;top:10px;transition:all .3s;&:active{transform:scale(.9)}}textarea{background:none;border:none;color:var(--color-white);font-size:15px;height:100%;outline:none;overflow-x:auto;padding:10px;resize:none;scrollbar-width:none;white-space:pre;width:100%}}.code-editor-section.active{display:none!important}.info-section{align-items:start;background-color:var(--color-black-light);border:1px solid var(--color-gray-dark);border-radius:0 0 10px 10px;display:none;flex-direction:column;gap:10px;justify-content:start;padding:20px;width:calc(100% - 40px)}.info-section.active{display:flex}}.left-section{border:1px solid var(--color-black);border-radius:10px;height:100%;overflow:hidden;width:70%!important;iframe{border:1px solid var(--color-black);border-radius:10px;height:100%;width:100%}}}@media only screen and (max-width:900px){.code-section{flex-direction:column;.left-section,.right-section{height:50%!important;width:100%!important}}}
/*# sourceMappingURL=main.15787789.css.map*/