body{font-family:"DM Sans",sans-serif;font-size:1rem}h1,h2,h3,h4,h5,h6{font-weight:700;font-family:"EB Garamond",serif}h1{font-size:4rem}h2{font-size:3.5rem}h3{font-size:3rem}h4{font-size:2.5rem}a{color:#228CDB}a:hover{text-decoration:none}.positionRelative{position:relative}.customRow:before,.customRow:after{display:table;content:""}.customRow:after{clear:both}.defaultButton{cursor:pointer;padding:0 18px;color:transparent;background-color:transparent;border:2px solid transparent;margin-top:2px;margin-bottom:2px;text-transform:uppercase;text-align:center;line-height:44px;display:inline-block;font-weight:700;font-size:.8333333333rem}.defaultButton.primaryButton{background:#000;border-color:#000;color:#fff}.defaultButton.secondaryButton{background:#fff;color:#000;border-color:#000}nav{background:rgba(0,0,0,0.15);position:fixed;top:0;left:0;width:100%;z-index:900}nav .gridBox{padding:20px;max-width:1200px;margin:0 auto;display:flex}nav .gridBox .segment{flex-basis:50%}nav .gridBox .segment .appIcon{width:35px;height:auto;margin-top:-4px;margin-right:5px}nav .gridBox .segment .appName{color:#fff;font-size:0.8rem;font-family:"DM Mono",monospace;letter-spacing:-0.5px}nav .gridBox .segment ul.social{display:flex;gap:0 12px;margin-bottom:0;display:flex;justify-content:flex-end}nav .gridBox .segment ul.social li a{display:block}nav .gridBox .segment ul.social li a img{width:25px;height:auto;margin-top:-4px}nav .gridBox .segment ul.social li a img.gitIcon{filter:invert(1)}nav .techLinks{display:none}footer{position:relative;z-index:10;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px)}footer .container{max-width:100%;padding:100px 20px;border-top:1px solid #333;border-top-right-radius:20px;border-top-left-radius:20px}footer .container .gridBox{max-width:1200px;margin:0 auto}footer .container .gridBox .segment h2{font-family:"DM Sans",sans-serif;font-weight:600;font-size:1.0rem;color:#fff;margin-bottom:10px}footer .container .gridBox .segment p{color:#bbb;font-size:0.9rem;line-height:1.4rem}footer .container .gridBox .segment .codeLinks{margin-bottom:0}footer .container .gridBox .segment .codeLinks li{display:inline-block;position:relative;margin-right:12px}footer .container .gridBox .segment .codeLinks li:before{content:".";color:#ccc;position:absolute;right:-11px;top:50%;transform:translateY(-50%)}footer .container .gridBox .segment .codeLinks li a{color:#fff;background-clip:text;font-size:0.8rem;font-style:italic}footer .container .gridBox .segment .social{margin-top:25px}footer .container .gridBox .segment .social li{display:inline-block;margin-right:5px}footer .container .gridBox .segment .social li a img{width:30px;height:auto;border-radius:50%}footer .container .gridBox .segment .social li a img.gitIcon{filter:invert(1)}footer .container .attributions{max-width:1200px;margin:50px auto 0;font-size:0.8rem;color:#aaa;line-height:1.2rem}@media only screen and (min-width: 768px){nav .gridBox .segment ul.social{gap:0 15px}nav .techLinks{display:block;position:fixed;bottom:20px;left:20px;z-index:900}nav .techLinks.right{left:auto;right:20px}nav .techLinks a{color:#aaa;border-radius:10px;border:1px solid #444;padding:13px 15px 11px;font-size:0.7rem;font-weight:500;font-family:"DM Mono",monospace;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);color:#ddd}nav .techLinks a:hover{color:#eee}footer .container{padding:75px 20px 100px}footer .container .gridBox{display:flex}footer .container .gridBox .segment{flex-basis:50%}footer .container .gridBox .segment .social{margin:0;text-align:right}}@media only screen and (min-width: 1200px){nav .techLinks{left:calc((100% - 1200px + 60px)/2)}nav .techLinks.right{left:auto;right:calc((100% - 1200px + 60px)/2)}footer .container .gridBox{padding:0 40px}footer .container .gridBox .segment h2{font-size:1.0rem}footer .container .gridBox .segment .social li{margin-right:8.2px}footer .container .gridBox .segment .social li:last-child{margin-right:0}footer .container .gridBox .segment .social li a img{width:35px}footer .container .attributions{padding:0 40px}}.sampleNavBar{background:#000;padding:20px;font-weight:600;color:#ddd;font-size:1.2rem}.sampleNavBar img{width:20px;display:inline-block;margin-right:7px}.sampleFooterBar{background:#000;padding:19px 20px}.sampleFooterBar p{color:#fff;margin:0;line-height:20px}@media only screen and (min-width: 1200px){.sampleFooterBar{padding:20px}}.videoParent{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;margin-bottom:-1px}.videoParent video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.videoParent.hiddenTransform{opacity:0}@-webkit-keyframes cursor-blink-soft{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes cursor-blink-soft{0%,49%{opacity:1}50%,100%{opacity:0}}.homePage .geometricFixedJumbotron{height:100vh;position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:#000}.homePage .heroSection{z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center}.homePage .heroSection .posContainer{padding:100px 20px;max-width:600px}.homePage .heroSection .posContainer h1{font-size:2.8rem;font-weight:500;line-height:2.7rem;color:#fff}.homePage .heroSection .posContainer .subText{font-size:1.1rem;color:#eee;margin-bottom:30px}.homePage .heroSection .posContainer .terminal{border-radius:10px;background:#222;max-width:450px;margin:0 auto 15px}.homePage .heroSection .posContainer .terminal .tHeader{padding:10px 15px;color:#aaa;font-size:0.8rem;border-bottom:1px solid #444}.homePage .heroSection .posContainer .terminal .tBody{padding:12px 15px 14px}.homePage .heroSection .posContainer .terminal .tBody p{margin:0;font-family:"DM Mono",monospace;font-weight:500;font-size:1.0rem;line-height:1.4rem;color:#fff;letter-spacing:-0.7px}.homePage .heroSection .posContainer .terminal .tBody p .cursor{width:7px;height:15px;background:#fff;display:inline-block;vertical-align:middle;margin-top:-4px;margin-left:5px;animation:cursor-blink-soft 1.2s ease-in-out infinite}.homePage .heroSection .posContainer .buttonContainer{display:flex;gap:0 5px;max-width:450px;margin:0 auto}.homePage .heroSection .posContainer .buttonContainer .btn-default{border:0;border-radius:10px;flex-basis:50%;text-decoration:none;color:#fff;padding:11px 14px 13px;font-size:0.9rem;line-height:25px;font-weight:500}.homePage .heroSection .posContainer .buttonContainer .btn-default.npm{background:#c0392b;background:-webkit-linear-gradient(to right, #8e44ad, #c0392b);background:linear-gradient(to right, #8e44ad, #c0392b)}.homePage .heroSection .posContainer .buttonContainer .btn-default.git{background:#141E30;background:-webkit-linear-gradient(to right, #243B55, #141E30);background:linear-gradient(to right, #243B55, #141E30)}.homePage .mainInfo .dottedBg{display:block}.homePage .features{background:#000;z-index:10}.homePage .features .dottedBg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;background:url("https://raw.githubusercontent.com/NPM-Workbench/react-create-html-video/refs/heads/feature/website-dev/assets/images/dotted-pattern.jpg") repeat center center;background-size:100px auto;opacity:0.25}.homePage .features .container{padding:80px 20px}.homePage .features .container h2{font-size:2.5rem;font-weight:500;line-height:2.4rem;color:#fff;margin-bottom:50px}.homePage .features .container h2 .smallText{font-family:"DM Mono",monospace;font-size:0.9rem;font-weight:300;font-style:italic;display:block}.homePage .features .container .featuresList{margin-bottom:0}.homePage .features .container .featuresList li{border:1px solid #222;padding:25px 20px;display:flex;flex-direction:column;justify-content:space-between}.homePage .features .container .featuresList li .content{margin-bottom:20px}.homePage .features .container .featuresList li .content img{width:30px;height:auto;filter:invert(1);display:block;margin-bottom:15px}.homePage .features .container .featuresList li .content .description{display:block;color:#999;font-size:1.0rem;line-height:1.5rem}.homePage .features .container .featuresList li .title{display:block;font-size:0.9rem;font-family:"DM Mono",monospace;font-style:italic;color:#fff;border-top:1px solid #222;padding-top:20px}.homePage .integration{z-index:10;background:#000;padding:100px 20px}.homePage .integration .codeEditor{margin-top:-150px;padding:0;border-radius:20px;overflow:hidden;border:1px solid #333;background:#111}.homePage .integration .codeEditor .header{display:flex;padding:20px;border-bottom:1px solid #333}.homePage .integration .codeEditor .header .segment{flex-basis:50%;color:#fff;font-size:0.8rem}.homePage .integration .codeEditor .header .segment:last-child{display:none}.homePage .integration .codeEditor .header .segment .round{width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px}.homePage .integration .codeEditor .header .segment .round.red{background:red}.homePage .integration .codeEditor .header .segment .round.yellow{background:yellow}.homePage .integration .codeEditor .header .segment .round.green{background:green}.homePage .integration .codeEditor .body{padding:20px}.homePage .integration .codeEditor .body .explorer{display:none}.homePage .integration .codeEditor .body .codeSection pre{font-family:"DM Mono",monospace;font-size:0.85rem;color:#fff;margin-bottom:0}.homePage .integration .codeEditor .body .codeSection pre .cursor{width:7px;height:15px;background:#fff;display:inline-block;vertical-align:middle;margin-top:-4px;margin-left:2px;animation:cursor-blink-soft 1.2s ease-in-out infinite}.homePage .integration .codeEditor .body .codeSection pre .comment{opacity:0.3}.homePage .integration .codeEditor .body .codeSection pre .comment.info{display:block;margin-top:30px}.homePage .integration .codeEditor .body .codeSection pre .purple{color:#c084fc}.homePage .integration .codeEditor .body .codeSection pre .green{color:#4ade80}.homePage .integration .codeEditor .body .codeSection pre .blue{color:#60a5fa}.homePage .integration .codeEditor .body .codeSection pre .orange{color:#ffa500}.homePage .skullSection{padding:100px 20px;z-index:10;background:#000;border-top:1px solid #222}.homePage .skullSection .container{padding:0;position:relative;z-index:20}.homePage .skullSection .container p{font-size:1.5rem;font-family:"EB Garamond",serif;font-weight:600;line-height:1.8rem;color:#fff;margin-bottom:0}.homePage .skullSection .videoParent{opacity:0.3}@media only screen and (min-width: 768px){.homePage .heroSection .posContainer h1{font-size:4.0rem;line-height:3.7rem}.homePage .heroSection .posContainer p{font-size:1.3rem;line-height:2.0rem}.homePage .features .container h2{max-width:700px;font-size:2.6rem;line-height:2.6rem}.homePage .features .container .featuresList{display:flex;flex-wrap:wrap;gap:5px}.homePage .features .container .featuresList li{flex-basis:calc(50% - 5px)}.homePage .integration .codeEditor .header{padding:20px 40px}.homePage .integration .codeEditor .header .segment:first-child{flex-basis:30%}.homePage .integration .codeEditor .header .segment:last-child{flex-basis:70%;display:block;text-align:right}.homePage .integration .codeEditor .header .segment:last-child p{word-spacing:-1.5px;font-weight:300;font-size:0.8rem;color:#888;margin-top:2px;margin-bottom:0}.homePage .integration .codeEditor .body{padding:50px 40px 20px}.homePage .skullSection .container p{font-size:2.3rem;line-height:2.75rem}}@media only screen and (min-width: 992px){.homePage .features .container .featuresList li{flex-basis:calc(33% - 5px);flex-grow:1}}@media only screen and (min-width: 1200px){.homePage .heroSection .posContainer{max-width:700px}.homePage .mainInfo .dottedBg{display:block;background:url("https://npm-workbench.github.io/react-create-html-video/assets/images/dotted-pattern.jpg") repeat center center;background-size:100px auto;opacity:0.25;position:absolute;inset:0;z-index:100}.homePage .features .container{padding:100px 0}.homePage .integration .codeEditor{mask-image:linear-gradient(to top, transparent, rgba(0,0,0,0.8) 5%, rgba(0,0,0,0.8) 89%, transparent);-webkit-mask-image:linear-gradient(to top, transparent, rgba(0,0,0,0.8) 5%, rgba(0,0,0,0.8) 89%, transparent)}.homePage .integration .codeEditor .body{display:flex}.homePage .integration .codeEditor .body .explorer{display:block;flex-basis:300px;display:flex}.homePage .integration .codeEditor .body .explorer .iconsList{width:45.5px;border-right:1px solid #222;padding-right:20px}.homePage .integration .codeEditor .body .explorer .iconsList ul{margin-bottom:0}.homePage .integration .codeEditor .body .explorer .iconsList ul li{margin-bottom:25px}.homePage .integration .codeEditor .body .explorer .iconsList ul li:last-child{margin-bottom:0}.homePage .integration .codeEditor .body .explorer .iconsList ul li img{filter:invert(1);width:100%;height:auto;display:block;opacity:0.5}.homePage .integration .codeEditor .body .explorer .fileSection{flex-grow:1;color:#fff;padding-left:20px;font-size:0.8rem}.homePage .integration .codeEditor .body .explorer .fileSection .folderIcon,.homePage .integration .codeEditor .body .explorer .fileSection .codeIcon{width:20px;margin-right:5px;margin-top:-4px}.homePage .integration .codeEditor .body .explorer .fileSection .folderIcon{filter:invert(1)}.homePage .integration .codeEditor .body .explorer .fileSection .title{display:block;margin-bottom:10px}.homePage .integration .codeEditor .body .explorer .fileSection .appName{display:block;margin-bottom:5px}.homePage .integration .codeEditor .body .explorer .fileSection .appName .folderIcon{display:inline-block}.homePage .integration .codeEditor .body .explorer .fileSection ul{margin-bottom:0;padding-left:15px}.homePage .integration .codeEditor .body .explorer .fileSection ul li{margin-bottom:6.5px}.homePage .integration .codeEditor .body .explorer .fileSection ul li:last-child{margin-bottom:0}}