.Options{flex-flow:wrap;justify-content:space-between;display:flex}.Options div{flex-direction:column;display:flex}
.Banner{height:400px;position:relative}@media (min-width:0) and (max-width:767px){.Banner{height:900px}}.Banner .Media{background-color:#fff;height:100%;position:relative;overflow:hidden}.Banner .Media .MediaCaption{text-overflow:ellipsis;color:#fff;opacity:.6;cursor:pointer;background-color:#000;width:100%;height:10%;padding:15px;font-size:21px;font-weight:200;transition:all .3s;position:absolute;bottom:0}.Banner .Media .MediaCaption:hover{opacity:.8}.Banner .Media{cursor:pointer;transition:all .3s}.Banner .Media:hover{filter:brightness(115%)}.Banner .BannerGrid{height:100%;position:relative}.Banner .Content{color:#fff;cursor:pointer;background-color:#771818;height:100%;padding:30px;transition:all .3s;position:relative}.Banner .Content:hover,.Banner .Content:active{background-color:#571111}.Banner .Content:hover .ViewButton,.Banner .Content:active .ViewButton{color:#771818;background-color:#f1f1f1}.Banner .Content .Title{color:#fff;font-size:30px;font-weight:500}.Banner .Content .Caption{color:#fff;margin-top:10px;font-size:18px}.Banner .Content .ViewButton{color:#fff;text-transform:capitalize;border:3px solid #fff;margin-top:40px;font-size:25px;transition:all .2s}
.SecondExample{max-width:500px}.SecondExample .Project{max-width:100%;height:300px;padding:20px;position:relative;overflow:hidden}.SecondExample .Project *{color:#fff}.SecondExample .Project .CheckButton{color:#fff;text-transform:capitalize;border:3px solid #fff;margin-top:40px;font-size:25px}
body{margin:0}@media (min-width:0) and (max-width:1279px){.root{padding:40px!important}.installation{width:90%!important}}.root{background-color:#333;padding:40px 20%}.root .react{color:#115293}.root .description{flex-wrap:wrap;display:flex}.root .description div{flex-grow:1}.root .installation{background-color:#252525;border-radius:5px;width:50%;padding:10px}.root a{color:#b71c1c;text-decoration:none;transition:all .2s}.root a:hover{color:#751010}.root ul{list-style:none}.root .github{color:#d3d3d3;background-color:#222}.root .npm{color:#d3d3d3;background-color:#bb2026}.root .coffee{color:#000;background-color:#fd0}.root .footer{text-align:center;margin-top:80px;padding:24px 0 8px}.root .footer p{color:#afafaf;letter-spacing:.02em;font-size:12px}.root .footer a{color:#afafaf;text-underline-offset:2px;text-decoration:underline}.root .footer a:hover{color:#b71c1c}.root .footerDots{justify-content:center;gap:8px;margin-bottom:12px;display:flex}.root .footerDots span{opacity:.6;background-color:#afafaf;border-radius:50%;width:6px;height:6px}
.Example3{max-width:700px}.Example3 .HeightItem{color:#fff;font-family:var(--font-montserrat),Helvetica,Arial,sans-serif;background-color:#771818;padding:100px}.Example3 .HeightItem h1{font-weight:100}