@import"https://fonts.googleapis.com/css?family=Inder:400|Inria+Sans:700";@font-face{font-family:GIF Times;src:url(/assets/times-CalcgLBk.ttf) format("truetype")}@font-face{font-family:GIF Impact;src:url(/assets/impact-D4FAfvkI.ttf) format("truetype")}@font-face{font-family:GIF Comic;src:url(/assets/comic-Dh7cIS3G.ttf) format("truetype")}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.normal-text{color:var(--white);font-family:var(--font-family-inder);font-size:var(--font-size-s);font-weight:400;font-style:normal}.appNameLogo{background:none;border:none;cursor:pointer;position:absolute;top:2vh;left:2vw;color:var(--electric-violet);font-family:var(--font-family-inria_sans);font-size:var(--font-size-m2);font-weight:700;font-style:normal;letter-spacing:0;line-height:normal;min-height:8rem;text-shadow:.5rem .5rem 0px var(--glossy-grape);z-index:100;margin-left:2rem}.App{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.bandContainer{z-index:-100;position:absolute;top:0;height:120vh;width:550vw;transform:translate(-1%) rotate(-45deg)}.band{z-index:-100;position:absolute;top:0;height:120vh;width:550vw;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='15'%20height='15'%20transform='scale(0.3)'%3e%3crect%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20fill='%23ffa6b0'/%3e%3cpath%20d='M%2012%206%20l%200%207%20l%20-7%200%20l%200%20-7%20l%207%200'%20stroke-width='1'%20stroke='none'%20fill='%23ffa6b0'/%3e%3c/svg%3e");background-size:15px 15px;background-repeat:repeat;transform:translate(-25%);animation:slide 40s linear infinite}@keyframes slide{to{transform:translate(25%)}}.buttonContainer{background-color:var(--main-button-colour);border:.3rem solid;border-color:var(--white);border-radius:10rem;box-shadow:1rem 1rem 0 var(--shadow-colour);display:flex;justify-content:center;align-items:center;height:5rem;min-width:12rem;transition-duration:.1s;cursor:pointer}.tilt{transform:rotate(-9deg)}.buttonText{color:var(--white);font-family:var(--font-family-inder);font-size:var(--font-size-s);font-weight:400;font-style:normal;letter-spacing:0;line-height:normal;text-align:center;width:12rem;transition-duration:.2s}.buttonContainer:hover{height:5.5rem;min-width:12.5rem;box-shadow:2rem 2rem 0 var(--shadow-colour)}.buttonContainer:hover .buttonText{margin-top:-.2rem;font-size:2rem;width:12.5rem}.buttonContainer:active{height:5rem;min-width:12rem;box-shadow:0 0 0 var(--shadow-colour);background-color:var(--electric-violet)}.buttonContainer:active .buttonText{font-size:1.9rem}.buttonContainer:disabled{background-color:var(--disabled-colour)}.focusedButton{background-color:var(--electric-violet)}.playButtonContainer{position:relative}.playButton{position:absolute;top:-3rem;left:-6rem;background-color:var(--electric-violet);border:.3rem solid;border-color:var(--white);border-radius:100%;box-shadow:1rem 1rem 0 var(--shadow-colour);display:flex;justify-content:center;align-items:center;height:11rem;width:11rem;transition-duration:.5s;color:var(--white);font-family:var(--font-family-inder);font-size:5rem;font-weight:700;font-style:normal;letter-spacing:0;line-height:1rem;text-align:center;cursor:pointer}.playButton:hover .playSymbol{font-size:6rem;margin-left:1rem}.playButton:hover .pauseSymbol{font-size:6rem;margin-bottom:.9rem}.playButton:active{background-color:#c20202}.playButton:disabled{background-color:var(--disabled-colour)}.playSymbol{margin-left:.7rem}.pauseSymbol{margin-bottom:.7rem}.hiddenVideoContainer{overflow:hidden;width:1px;display:flex;justify-content:center;align-items:center}.hiddenVideoContainer video{position:absolute;opacity:0;z-index:-10000}.mainGrid{display:grid;grid-template-columns:1fr 1fr}.leftSide{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:50vw}.rightSide{width:50vw;height:50vh}.canvasVid{border-radius:.5rem;max-width:100%;background-color:var(--pig-pink)}.vidContainer{background-color:var(--black);border-radius:1rem;max-width:90%;overflow:hidden;margin:auto;display:flex;justify-content:center;align-items:center;box-shadow:1rem 1rem 0 var(--shadow-colour)}.duoButtons{position:relative;top:2rem}.duoButtons :nth-child(1){position:absolute;right:8rem}.duoButtons :nth-child(1) *,.duoButtons :nth-child(2) *{right:auto}.duoButtons :nth-child(2){position:absolute;left:8rem}.mainSettings{display:grid;grid-template-columns:1fr 1fr 1fr;width:90%;height:7vh;margin:auto}.mainSettingsButton{width:100%;height:100%;display:flex;justify-content:center}.extraSettings{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:auto}.editOptions{margin-top:6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;width:90%}.editSubOptionsContainer{width:100%}.editSubOptions{display:flex;justify-content:space-around;box-sizing:border-box;height:fit-content;width:100%;padding:1.3rem 0}.simpleLabel{background-color:var(--pig-pink);border:.3rem solid;border-color:var(--white);border-radius:100px;box-shadow:1rem 1rem 0 var(--shadow-colour);display:flex;justify-content:center;align-items:center;height:5rem;min-width:12rem;color:var(--white);font-family:var(--font-family-inder);font-size:var(--font-size-s);font-weight:400;font-style:normal;letter-spacing:0;line-height:normal;text-align:center}.tiny{min-width:8rem}.filterOptionsContainer{display:grid;grid-template-columns:1fr 1fr 1fr;width:90%;height:7vh;margin:1rem auto}.filterOptions{width:100%;height:100%;display:flex;justify-content:center}.filterSubOptions{display:block}.filterSubOptions button{margin-top:2rem}.filterSettings{width:90%;height:7vh;margin:auto}.dualCol{display:flex;justify-content:space-around;width:90%;margin:2rem}.dualColGreenScreen{display:flex;justify-content:space-around;width:90%;margin:1rem}.noStretch{display:flex;justify-content:center;margin:auto}.centerReset{display:flex;justify-content:center;width:100%}.dualColMinMax{display:flex;justify-content:space-around;width:90%;margin:1rem}.desktopGreenScreen{display:flex}.dualColCaption{display:grid;grid-template-columns:1fr 3fr;margin:1rem}.container{display:flex;justify-content:center;align-items:center}.captionPreview{width:100%;height:12rem;display:flex;justify-content:center;align-items:center}.dualColCaptionPreview{display:grid;grid-template-columns:1fr;margin:1rem}.containerRadio{display:grid;grid-template-columns:1fr 1fr}.radioContainer{margin:1rem;display:flex}.greened{background-color:var(--steel-blue)}.captionSettings{display:flex;flex-direction:column;justify-content:center;width:90%;height:40vh;overflow-y:scroll;overflow-x:hidden;position:relative}.captionOptionsContainer{position:absolute;width:100%;top:0}.captionOption{width:100%;margin-bottom:2rem}.modalBackground{z-index:999999;position:absolute;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.modalContainer{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.finalGif{border-radius:1rem;box-shadow:1rem 1rem 0 var(--shadow-colour);margin-bottom:2rem}.dualColGif{display:flex;justify-content:center}.gifButton{margin:1rem 2rem}.shiftLeft{margin-left:2rem}.greenScreenColour{margin:2rem}.errorMessage{color:#c62828;font-family:var(--font-family-inder);font-size:var(--font-size-s);text-align:center;padding:1rem 2rem}@media screen and (max-width:912px){.mainGrid{bottom:0;left:0;overflow-y:auto;overflow-x:hidden;position:absolute;right:0;top:-5vh;display:block}.rightSide{margin:auto;min-width:100%;height:auto}.leftSide{margin:17vh auto 10vh;width:100%}.editOptions{margin-top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:90%;height:25vh;overflow-y:scroll;overflow-x:hidden;position:relative}.editSubOptionsContainer{position:sticky;top:0;width:100%;z-index:1;background-color:var(--pink-chalk)}.editSubOptions{display:flex;justify-content:space-around;box-sizing:border-box;height:fit-content;width:100%;padding:1.3rem 0}.filterSettings{margin-top:0;display:flex;flex-direction:column;justify-content:center;width:90%;height:40vh;overflow-y:scroll;overflow-x:hidden;position:relative}.filterOptionsContainer{position:sticky;top:0;width:100%;z-index:1;background-color:var(--pink-chalk)}.firstFilterOption,.secondFilterOption{margin-top:2rem;width:100%;margin-bottom:2rem}.greenScreenOption{margin-top:2rem;width:100%;margin-bottom:3rem}.filterSubOptions{display:flex;justify-content:center;align-items:center;flex-direction:column}.dualCol{justify-content:space-between;align-items:center}.dualColGreenScreen{display:flex;flex-direction:column;justify-content:space-around;width:90%;margin:1rem}.dualColMinMax{justify-content:space-between;align-items:center}}@media(pointer:coarse){.buttonContainer:hover{height:5rem;min-width:12rem;box-shadow:1rem 1rem 0 var(--shadow-colour)}.buttonContainer:hover .buttonText{margin-top:0;font-size:var(--font-size-s);width:12rem}}:root{font-size:clamp(8px,1vh,14px);--black: rgba(0, 0, 0, 1);--pale-green: rgba(96, 186, 174, 1);--steel-blue: #00c9b8;--shadow-purple: rgba(99, 69, 135, 1);--electric-violet: #ff457d;--glossy-grape: #ffa6b0;--pink-chalk: #ffe0e5;--pig-pink: #ffbfc9;--white: rgba(255, 255, 255, 1);--primary-colour: var(--pale-green);--shadow-colour: var(--glossy-grape);--main-button-colour: var(--steel-blue);--disabled-colour: var(--pig-pink);--font-size-s: 1.8rem;--font-size-m2: 6rem;--font-family-inder: "Inder";--font-family-inria_sans: "Inria Sans";-webkit-tap-highlight-color:rgba(255,255,255,0)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background-color:var(--pink-chalk)}a{color:inherit;text-decoration:none}a:hover{color:inherit;text-decoration:none;cursor:pointer}input[type=range]{-webkit-appearance:none;height:1rem;background:var(--white);border-radius:.5rem;background-repeat:no-repeat;margin:auto 1rem;box-shadow:.5rem .5rem 0 var(--shadow-colour)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:4rem;width:4rem;border-radius:50%;background:var(--steel-blue);cursor:pointer;box-shadow:1rem 1rem 0 var(--shadow-colour);border:.3rem solid;border-color:var(--white)}input[type=range]::-webkit-slider-thumb:hover{box-shadow:1rem 1rem 0 var(--shadow-colour);height:4.5rem;width:4.5rem}input[type=range]::-webkit-slider-thumb:active{box-shadow:1rem 1rem 0 var(--shadow-colour);transition:box-shadow .35s cubic-bezier(.4,0,.2,1) 0ms,left .35s cubic-bezier(.4,0,.2,1) 0ms,bottom .35s cubic-bezier(.4,0,.2,1) 0ms;height:4.5rem;width:4.5rem}input[type=range]::-moz-range-thumb{height:4rem;width:4rem;border-radius:50%;background:var(--steel-blue);cursor:pointer;box-shadow:1rem 1rem 0 var(--shadow-colour);border:.3rem solid;border-color:var(--white)}input[type=range]::-moz-range-thumb:hover{box-shadow:1rem 1rem 0 var(--shadow-colour);height:4.5rem;width:4.5rem}input[type=range]::-moz-range-thumb:active{box-shadow:1rem 1rem 0 var(--shadow-colour);transition:box-shadow .35s cubic-bezier(.4,0,.2,1) 0ms,left .35s cubic-bezier(.4,0,.2,1) 0ms,bottom .35s cubic-bezier(.4,0,.2,1) 0ms;height:4.5rem;width:4.5rem}input[type=range]::-moz-range-track{background:var(--white);border-radius:.5rem;height:1rem}@media(pointer:coarse){input[type=range]::-webkit-slider-thumb:hover{height:4rem;width:4rem}input[type=range]::-webkit-slider-thumb:active{box-shadow:1rem 1rem 0 var(--shadow-colour);height:4rem;width:4rem}input[type=range]::-moz-range-thumb:hover{height:4rem;width:4rem}input[type=range]::-moz-range-thumb:active{box-shadow:1rem 1rem 0 var(--shadow-colour);height:4rem;width:4rem}}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--white);margin:.5rem 1rem 1rem;font:inherit;color:currentColor;width:4rem;height:4rem;border:.3rem solid var(--white);border-radius:50%;display:grid;place-content:center;box-shadow:1rem 1rem 0 var(--shadow-colour)}input[type=radio]:before{content:"";width:2rem;height:2rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 10rem 10rem var(--steel-blue)}input[type=radio]:checked:before{transform:scale(1)}input[type=color]{-webkit-appearance:none;border:none;width:7rem;height:5rem;background-color:var(--pig-pink);padding:1rem;border-radius:.5rem;border:.3rem solid var(--white);box-shadow:1rem 1rem 0 var(--shadow-colour);margin:1rem}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}::-webkit-scrollbar{width:1rem}::-webkit-scrollbar-track{background:#fcb1bd00;border-radius:.5rem}::-webkit-scrollbar-thumb{background:var(--pig-pink);border-radius:.5rem}::-webkit-scrollbar-thumb:hover{background:var(--steel-blue);border-radius:.5rem}input[type=text]{width:90%;padding:1rem 2rem;margin:2rem;box-sizing:border-box;border-radius:.5rem;border:.3rem solid var(--white);box-shadow:1rem 1rem 0 var(--shadow-colour)}input[type=text]:focus{outline:.3rem solid var(--steel-blue)}