@media (min-width:803px)  {
#frontpage_text{   top:25px;
    width:55vw;

left:14vw;position: relative;}
.textarea1{width:22vw;height:21vh;  background-color : #010101;color:white;border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;}
code {color  :aqua}    
    
#vis1{width:33vw;position:relative;white-space: normal;display: inline-block;height: 33vh;overflow: hidden;border-style: solid;padding:10px;}
.code_response1{width:43vw;position:relative;white-space: normal;display: inline-block;border-style: solid; border-color: white;margin-top: 11px;padding:11px;border-radius: 8px;}


.text1{font-size:12.5px; line-height: 0.35;}

#response1{width:65vw;position:relative;top:-310px;left:430px;font-size: 1.7vh;}#edit1{width:43vw;position:relative;top:-310px;left:250px;font-size: 1.7vh;}#canvas3{width:47vw;position:absolute;height:62vh;border-color: white;border-style: solid;left:30vw;top:30px;}.image_preview{position:relative;height:0vh;display:inline-block;}
#canvas1{width:43vw;position:relative;height:61vh;border-color: white;border-style: solid;}
#big_signup{ width:30vw;left:52vw;top:100px;position:relative;--clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: aqua;text-align: center;
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: purple;
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(
      325deg,
      var(--btn-bg-2) 0%,
      var(--btn-bg-1) 55%,
      var(--btn-bg-2) 90%
    );
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
      0px 0px 20px rgba(71, 184, 255, 0.5),
      0px 5px 5px -1px rgba(58, 125, 233, 0.25),
      inset 4px 4px 8px rgba(175, 230, 255, 0.5),
      inset -4px -4px 8px rgba(19, 95, 216, 0.35);}
#big_signup a{
    cursor: pointer; 
    border-radius: 2vh;
    font-size: 30px;color:white;   
    text-decoration:none;
left:53vw;}
body.welcome{
    
    
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-size: 250px,200px;
    background-color: rgb(1, 1, 85);background-image:/*linear-gradient(rgb(1, 1, 85),black),*/
    radial-gradient(white, rgba(255,255,255,.2) 0px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 0px, transparent 30px),
    radial-gradient(teal, rgba(255,255,255,.1) 0px, transparent 40px),
    radial-gradient(slateblue, rgba(255,255,255,.2) 0px, transparent 40px),
    radial-gradient(purple, rgba(255,255,255,.15) 0px, transparent 30px),
    radial-gradient(aqua, rgba(255,255,255,.1) 0px, transparent 40px);
    
    
    
    background-position: 0 0, 1vw 3vw, 4vw 8vw, 7vw 100px, 80px 80px, 130px 270px, 70px 100px;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
    font-family:Calibri;
    color:white;    
}

#big_signup:hover {
    background-position: right top;
  }
  
  #big_signup:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow:
      0 0 0 3px var(--btn-bg-color),
      0 0 0 6px var(--btn-bg-2);
  }
  
  @media (prefers-reduced-motion: reduce) {
    #big_signup {
      transition: linear;
    }
  }
  
body.welcome_disclaimer{
    

    background-color: black;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
    font-family:Calibri;
    color:white;    
}
#req_section{
    position:relative;
    height:auto;
    left:38px;

    width:89vw;
    top:0vw;
    display:inline-block;
    background-color: black;
    padding: 30px;
    border-radius: 10px;border-color: aqua;border-style: solid;
    opacity:0.88;
}
#transcription{position:relative;top:20px}
#req_section .req_text{
    border-radius: 1vh;
    width:155px;
    border-style:solid;
    border-color: darkslateblue;
    background-color:darkslateblue;
    color:white;
    margin:3px;
}
/* From Uiverse.io by andrew-demchenk0 */ 
.info {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 320px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;left:38px;position: relative;
  background: #509AF8;
  border-radius: 8px;
  box-shadow: 0px 0px 5px -3px #111;
}

.info__icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
  margin-right: 8px;
}

.info__icon path {
  fill: #fff;
}

.info__title {
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}

.info__close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-left: auto;
}#api_details{position:relative;background-color: darkmagenta;padding: 10px;width:25vw;border-radius: 8px;}
#api_details p{font-size:16px;}
.info__close path {
  fill: #fff;
}
#req_edit_button{
    --black-700: hsla(0 0% 12% / 1);
    --border_radius: 9999px;
    --transition: 0.3s ease-in-out;
    --offset: 2px;
  
    cursor: pointer;
    position: relative;
  
    display: flex;
    align-items: center;
    gap: 0.5rem;
  
    transform-origin: center;
  
    padding: 0.35rem 1rem;
    background-color: transparent;
  
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  
    transition: transform var(--transition);
  }
  
  #req_edit_button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: var(--black-700);
  
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
      0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
      0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);
  
    transition: all var(--transtion);
    z-index: 0;
  }
  
#req_editjs_button{
  --black-700: hsla(0 0% 12% / 1);
  --border_radius: 9999px;
  --transition: 0.3s ease-in-out;
  --offset: 2px;

  cursor: pointer;
  position: relative;

  display: inline-block;
  align-items: center;
  gap: 0.5rem;

  transform-origin: center;

  padding: 0.35rem 1rem;
  background-color: blueviolet;

  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active, 0) * 0.1)));

  transition: transform var(--transition);
}
  #req_edit_button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: hsla(260 97% 61% / 0.75);
    background-image: radial-gradient(
        at 51% 89%,
        hsla(266, 45%, 74%, 1) 0px,
        transparent 50%
      ),
      radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
      radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
    background-position: top;
  
    opacity: var(--active, 0);
    border-radius: var(--border_radius);
    transition: opacity var(--transtion);
    z-index: 2;
  }
  
  #req_edit_button:is(:hover, :focus-visible) {
    --active: 1;
  }
  #req_edit_button:active {
    transform: scale(1);
  }
  
  #req_edit_button .dots_border {
    --size_border: calc(100% + 2px);
  
    overflow: hidden;
  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;
  
    border-radius: var(--border_radius);
    z-index: -10;
  }
  
  #req_edit_button .dots_border::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);
  
    width: 100%;
    height: 2rem;
    background-color: white;
  
    mask: linear-gradient(transparent 0%, white 120%);
    animation: rotate 33s linear infinite;
  }
  
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
  
  #req_edit_button .sparkle {
    position: relative;
    z-index: 10;
  
    width: 1.75rem;
  }
  
  #req_edit_button .sparkle .path {
    fill: currentColor;
    stroke: currentColor;
  
    transform-origin: center;
  
    color: hsl(0, 0%, 100%);
  }
  
  #req_edit_button:is(:hover, :focus) .sparkle .path {
    animation: path 1.5s linear 0.5s infinite;
  }
  
  #req_edit_button .sparkle .path:nth-child(1) {
    --scale_path_1: 1.2;
  }
  #req_edit_button .sparkle .path:nth-child(2) {
    --scale_path_2: 1.2;
  }
  #req_edit_button .sparkle .path:nth-child(3) {
    --scale_path_3: 1.2;
  }
  
  @keyframes path {
    0%,
    34%,
    71%,
    100% {
      transform: scale(1);
    }
    17% {
      transform: scale(var(--scale_path_1, 1));
    }
    49% {
      transform: scale(var(--scale_path_2, 1));
    }
    83% {
      transform: scale(var(--scale_path_3, 1));
    }
  }
  
  #req_edit_button .text_button {
    position: relative;
    z-index: 10;
  
    background-image: linear-gradient(
      90deg,
      hsla(0 0% 100% / 1) 0%,
      hsla(0 0% 100% / var(--active, 0)) 120%
    );
    background-clip: text;
  
    font-size: 1rem;
    color: transparent;
}  #req_editjs_button .text_button {
  position: relative;
  z-index: 10;

  background-image: linear-gradient(
    90deg,
    hsla(0 0% 100% / 1) 0%,
    hsla(0 0% 100% / var(--active, 0)) 120%
  );
  background-clip: text;

  font-size: 0.8rem;
  color: white;
}
/* From Uiverse.io by Yaya12085 */ 
.code-editor {left:20vw;position: relative; left:37vw;
  width: 650px;
  background-color: #1d1e22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 2px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
}

.title {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: rgb(212 212 212);
}

.icon {
  width: 20px;
  transition: .2s ease;
}

.icon:hover {
  cursor: pointer;
  border-radius: 50px;
  background-color: #6e7281;
}

.editor-content {
  margin: 0 10px 10px;
  color: white;
}

.property {line-height: 0.8;
  margin-left: 30px;
}

.property:hover {
  cursor: text;
}

.editor-content .color-0 {
  color: rgb(86 156 214);
}

.editor-content .color-1 {
  color: rgb(182 206 168);
}

.editor-content .color-2 {
  color: rgb(156 220 254);
}

.editor-content .color-3 {
  color: rgb(207 146 120);
}

.color-preview-1,.color-preview-2 {
  height: 8px;
  width: 8px;
  border: 1px solid #fff;
  display: inline-block;
  margin-right: 3px;
}

.color-preview-1 {
  background-color: #1d1e22;
}

.color-preview-1 {
  background-color: rgba(0, 0, 0, 0.5);
}
.checkbox_label{
    color:white;
    font-family:helvetica;
    font-size: 14px;
    left:2px;
}
/* From Uiverse.io by ilkhoeri */ 
.card {top:0px;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid #c5c5c5;
    border-radius: 12px;
    background-color: #d9d9d92f;
    backdrop-filter: blur(8px);
    width: 33vw; left:33vw;position: relative;
  }
  .wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 10;
    border: 0.5px solid #525252;
    border-radius: 8px;
    overflow: hidden;
  }
  .terminal {
    display: flex;
    flex-direction: column;
  
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 40px;
    padding-inline: 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #202425;
  }
  .title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 2.5rem;
    user-select: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8e8e8e;
  }
  .title > svg {
    height: 18px;
    width: 18px;
    margin-top: 2px;
    color: #006adc;
  }
  input{position:absolute;display:inline-block}
  label{position:relative;display:block}
  .copy_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: 0.65px solid #c1c2c5;
    margin-left: auto;
    border-radius: 6px;
    background-color: #202425;
    color: #8e8e8e;
    cursor: pointer;
  }
  .copy_toggle > svg {
    width: 20px;
    height: 20px;
  }
  .copy_toggle:active > svg > path,
  .copy_toggle:focus-within > svg > path {
    animation: clipboard-check 500ms linear forwards;
  }
  .body {
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    overflow-x: auto;
    padding: 1rem;
    line-height: 19px;
    color: white;
    background-color: black;
    white-space: nowrap;
  }
  .pre {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-wrap: nowrap;
    white-space: pre;
    background-color: transparent;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 16px;
  }
  .pre code:nth-child(1) {
    color: #575757;
  }
  .pre code:nth-child(2) {
    color: #e34ba9;
  }  .show_paypal_button{ width:3vw;left:0vw;top:00px;position:relative;--clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: aqua;text-align: center;
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: white;
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(
      325deg,
      var(--btn-bg-2) 0%,
      var(--btn-bg-1) 55%,
      var(--btn-bg-2) 90%
    );
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
      0px 0px 20px rgba(71, 184, 255, 0.5),
      0px 5px 5px -1px rgba(58, 125, 233, 0.25),
      inset 4px 4px 8px rgba(175, 230, 255, 0.5),
      inset -4px -4px 8px rgba(19, 95, 216, 0.35);}
  .cmd {
    height: 19px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .cmd::before {
    content: attr(data-cmd);
    position: relative;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    animation: inputs 8s steps(22) infinite;
  }
  .cmd::after {
    content: "";
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    border-right: 0.15em solid #e34ba9;
    animation: cursor 0.5s step-end infinite alternate, blinking 0.5s infinite;
  }
  
  @keyframes blinking {
    20%,
    80% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(0);
    }
  }
  @keyframes cursor {
    50% {
      border-right-color: transparent;
    }
  }
  @keyframes inputs {
    0%,
    100% {
      width: 0;
    }
    10%,
    90% {
      width: 58px;
    }
    30%,
    70% {
      width: 380px;
      max-width: max-content;
    }
  }
  @keyframes clipboard-check {
    100% {
      color: #fff;
      d: path(
        "M 9 5 H 7 a 2 2 0 0 0 -2 2 v 12 a 2 2 0 0 0 2 2 h 10 a 2 2 0 0 0 2 -2 V 7 a 2 2 0 0 0 -2 -2 h -2 M 9 5 a 2 2 0 0 0 2 2 h 2 a 2 2 0 0 0 2 -2 M 9 5 a 2 2 0 0 1 2 -2 h 2 a 2 2 0 0 1 2 2 m -6 9 l 2 2 l 4 -4"
      );
    }
  }
  /* From Uiverse.io by iconicchandu */ 
.card1 {top:-112px;
    --white: hsl(0, 0%, 100%);
    --black: hsl(240, 15%, 9%);
    --paragraph: hsl(0, 0%, 83%);
    --line: hsl(240, 9%, 17%);
    --primary: hsl(189, 92%, 58%);
  
    position: relative;
  
    display: flex;left:20vw;
    flex-direction: column;
    gap: 1rem;
  
    padding: 1rem;
    width: 25rem;
    background-color: hsla(240, 15%, 9%, 1);
    background-image: radial-gradient(
        at 88% 40%,
        hsla(240, 15%, 9%, 1) 0px,
        transparent 85%
      ),
      radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
      radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
      radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
      radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
      radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);
  
    border-radius: 1rem;
    box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
  }
  
  .card1 .card1__border {
    overflow: hidden;
    pointer-events: none;
  
    position: absolute;
    z-index: -10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-image: linear-gradient(
      0deg,
      hsl(0, 0%, 100%) -50%,
      hsl(0, 0%, 40%) 100%
    );
  
    border-radius: 1rem;
  }
  
  .card1 .card1__border::before {
    content: "";
    pointer-events: none;
  
    position: fixed;
    z-index: 200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%), rotate(0deg);
    transform-origin: left;
  
    width: 200%;
    height: 10rem;
    background-image: linear-gradient(
      0deg,
      hsla(0, 0%, 100%, 0) 0%,
      hsl(189, 100%, 50%) 40%,
      hsl(189, 100%, 50%) 60%,
      hsla(0, 0%, 40%, 0) 100%
    );
  
    animation: rotate 8s linear infinite;
  }
  
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
  
  .card1 .card1_title__container .card1_title {
    font-size: 22px;
    color: var(--white);
  }
  
  .card1 .card1_title__container .card1_paragraph {
    margin-top: 0.25rem;
    width: 65%;
  
    font-size: 0.5rem;
    color: var(--paragraph);
  }
  
  .card1 .line {
    width: 100%;
    height: 0.1rem;
    background-color: var(--line);
  
    border: none;
  }
  
  .card1 .card1__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .card1 .card1__list .card1__list_item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .card1 .card1__list .card1__list_item .check {
    display: flex;
    justify-content: center;
    align-items: center;
  
    width: 1rem;
    height: 1rem;
    background-color: var(--primary);
  
    border-radius: 50%;
  }
  
  .card1 .card1__list .card1__list_item .check .check_svg {
    width: 0.75rem;
    height: 0.75rem;
  
    fill: var(--black);
  }
  
  .card1 .card1__list .card1__list_item .list_text {
    font-size: 17px;
    color: var(--white);
  }
  
  .card1 .button {
    cursor: pointer;
  
    padding: 0.5rem;
    width: 100%;
    background-image: linear-gradient(
      0deg,
      hsl(189, 92%, 58%),
      hsl(189, 99%, 26%) 100%
    );
  
    font-size: 0.75rem;
    color: var(--white);
  
    border: 0;
    border-radius: 9999px;
    box-shadow: inset 0 -2px 25px -4px var(--white);
  }
  
.videofilelabel{
    border-radius: 1vh;
    background: rgb(161,0,196);
    background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);
    border-color: darkslateblue;
    width:161px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;
    
    
    
    font-size:13.4px;
    padding:1px;
    padding-left: 30px;
    padding-right: 30px;
}

#videofile[type="file"] {
    display: none;
}

#videofile1[type="file"] {
    display: none;
}
#videofile2[type="file"] {
    display: none;
}
#video_file_description{
    position:relative;
    color:white;
    font-family:helvetica;
    font-size:14px;
}

#disclaimer{
    position:relative;
    color:white;
    font-family:helvetica;
    font-size:19px;
    top:300px;
width:800px;
left:10px;

line-height: 1.7;}
.features{
    position:relative;
    top:30vh;
    text-align: center;
    left:0vw;
    line-height: 1.7;
    font-size:19px;

    display:none;
}
#music_label{
    position:relative;
    color:white;
    font-family:helvetica;
    font-size:14px;
}
#music{
    border-radius: 1vh;
    background-color:darkslateblue;
    border-color: darkslateblue;
    width:220px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;
    
    
    padding:1px;
}
footer p{position:relative;
    left:170px;
    line-height: 1;
    font-size:16px}
#back_game_label{
    position:relative;
    color:white;
    font-family:helvetica;
    font-size:14px;
}
#back_game{
    border-radius: 1vh;
    background-color:darkslateblue;
    border-color: darkslateblue;
    width:220px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;
    
    
    padding:1px;
}
#proc_vid


{
    width:50%;
    float:left;
    left:3vw;
    position: relative;
    top: 30vh;
    display: inline-block;
    

}
#rec_vid{
    width:50%;
    float:right;
    
    left:1vw;
    position: relative;
    top:30vh;
    display: inline-block;
}

#seconds_between_clips{
    border-radius: 1vh;
    width:60px;
    border-style:solid;
    border-color: darkslateblue;
    background-color:darkslateblue;
    margin:3px;
    color:white;
}

#seconds_between_clips_label{
    position:relative;
    color:white;
    font-family:helvetica;
    font-size:14px;
}

#video_file_path{
    position:relative;
    color:white;
    font-family:helvetica;
    font-size:14px;
}

#navbar {
    height:100px;
  overflow: hidden;
  
  border-radius: 1vh;
  float:right;
}
#navbar a {
    position:relative;
    float: right;
    
    color: aqua;
    text-align: center;
    padding: 11px 30px;
    text-decoration: none;
    font-size:14.5px;
    font-family:helvetica;
    top:17px;
    transition: .4s;
    -moz-transition: all .4s;
    background: black;
    
    border: 1px  solid rgba(161,0,196,1)  ;
    border-radius:8px;
    -webkit-transition:all .4s;
    -o-transition: all .4s;  
    margin-left: 14px;
    width:2.8vw;
}
  #navbar a:hover {
    position:relative;
    float: right;
    color: aqua;
    background: rgb(161,0,196);
    background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);
    text-align: center;
    padding: 11px 30px;
    text-decoration: none;
    
    top:17px;
    font-size:14.5px;
    font-family:helvetica;
    
    border-radius:8px;
    transition:  .4s;
    -moz-transition: all .4s;
    -webkit-transition:all .4s;
    -o-transition: all .4s;
}

#navbar p {
    position:relative;
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 0px 20px;
    text-decoration: none;
    font-family:helvetica;
    top:-3px;
    font-size:17px;
} 
#req_load_gif{

    height:30px;
    position:relative;
    top:30px;
    display: inline-block;
}
#loading_chart{
    width:106px;
}
#loading_gif_reference{
    
}

#req_section label{
    color:white;
    font-family:helvetica;
    
}

#download_video_file{    border-radius: 1vh;
    background-color:darkslateblue;
    border-color: darkslateblue;
    width:161px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;}

    #screen_size_label{
        position:relative;
        color:white;
        font-family:helvetica;
        font-size:14px;
    }

#screen_size{
    border-radius: 1vh;
    background-color:darkslateblue;
    border-color: darkslateblue;
    width:80px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;
    
    
    
    padding:1px;}
    
    #device_orientation_label{
        position:relative;
        color:white;
        font-family:helvetica;
        font-size:14px;
    }

#device_orientation{
    border-radius: 1vh;
    background-color:darkslateblue;
    border-color: darkslateblue;
    width:80px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;
    
    
    
    padding:1px;}
    
#email_valid_section button{position: relative;right:25px;
    border-radius: 3px;
    background: rgb(161,0,196);
    background:blue;
    border-color: darkslateblue;
    width:110px;
    font-family:helvetica;
    border-style:none;
    color:white;
    margin:3px;
}
#email_input{border-radius: 1vh;
    width:220px;
    border-style:solid;
    border-color: darkslateblue;
    background-color:darkslateblue;
    margin:3px;
    color:white;}


    


#email_code{border-radius: 1vh;left:11px;padding:3px;
    width:154px;top:-1.2vh;position:relative;
    
    border-style:solid;
    border-color: darkslateblue;
    background-color:black;
    margin:3px;
    color:white;}

    #download_edited_video{
    border-radius: 1vh;
    background-color:darkslateblue;
    border-color: darkslateblue;
    width:161px;
    font-family:helvetica;
    border-style:solid;
    color:white;
    margin:3px;
padding:11px;}
    #download3d {    border-radius: 1vh;
      background-color:purple;
      border-color: darkslateblue;
      width:161px;
      font-family:helvetica;position:relative;
      border-style:solid;
      color:white;
      margin:3px;}
    #img_title{
        padding:0px;
    height: 80px;
    display:inline-block;
    position:relative;    
background-color: black;
border-radius: 2vh;
}
#other_navbar{    display:inline-block;
    position:relative;    
    margin-right:16px;
    margin-left:auto;
top:-5px;}
#code_page_footer{font-size:14px; left:43px;margin-top:10px;
  line-height: 0.8;padding:7px;padding-left:20px;
  position: fixed;z-index:10;text-align: left;border-style: none;background-color:rgb(73, 98, 243);width:20vw;border-radius: 10px;}
    
.subsc_type{
        position:relative;
        height:auto;
        left:8vw;
        width:200px;
        top:0px;
        display:inline-block;
        background: rgb(161,0,196);
background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);

        background-color: #491d9b;
        padding: 30px;
        margin:30px;
        border-radius: 10px;
    height:437px}    
    .subsc_type_profile{
            position:relative;
            height:auto;
            left:25.5vw;
            width:200px;
            top:25px;
            display:inline-block;
            background: rgb(161,0,196);
    background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);
    
            background-color: #491d9b;
            padding: 30px;
            margin:30px;
            border-radius: 10px;
        height:437px}
    #subsc_front{}
#explanation{
    position:absolute;
    top:240px;
    width:350px;
font-size:50px;
left:30px;
}
#frontpage_explanation_title{
    position:relative;
    font-size:70px;

text-align:left;left:10vw;

font-weight: normal;
}
#frontpage_explanation{
    position:relative;
    top:110px;
    width:30vw;

left:14vw;
display: inline-block;
text-align:left;
line-height: 1.9;

}
#subsc_explanation{
    position:absolute;
    top:300px;
    width:350px;
font-size:50px;
left:30px;
}
#calls_available{
    position:relative; text-align: center;font:bold;margin:10px;padding:11px;
font-size:16.5px;padding-right: 11px; padding-left:11px;background-color: darkmagenta;width:3.5vw;border-radius: 8px;
}
#req_message a{font-size:20px;color:orange;
    position:relative;
    left:640px;
    top:0px;

}
#validate_email{left:14px; font-size:14px;padding:8px;}



.paypal_button{
    position:absolute;
}


#email_valid_section{text-align:left;background-color: rgb(52, 133, 158);
    font-size: 16px;
    top:190px;
    left:30px;
position:absolute;
width:280px;
border: none;
border-radius: 3.5px;font-weight: bold;
padding: 10px;

}#email_valid_section h3{left:11px; position:relative;}
#email_valid_section p{left:11px; position:relative;}
#valid_welcome{font-size: 14px;font-weight: normal; }
#current_subsc_id{position:absolute;font-weight: normal; }

.email_code_message{font-size: 14px;width:200px;font-weight: normal; }
.validate_message{font-size: 14px;font-weight: normal; left: 10px;position: relative; }


#queue_number{font-size:14px;
}}
@media (max-width:802px)  {
  #frontpage_text{   top:0px;
      width:74vw;
  
  left:14vw;position: relative;}
  .textarea1{width:68vw;height:21vh;  background-color : #010101;color:white;border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;}
      
  #vis1{width:33vw;position:relative;white-space: normal;display: inline-block;height: 33vh;overflow: hidden;border-style: solid;padding:10px;}
  #code_edit1{width:33vw;position:relative;white-space: normal;display: inline-block;}
  #code_response1{width:33vw;position:relative;white-space: normal;display: inline-block;}
  
  
  .text1{font-size:12.5px; line-height: 0.35;}
  #response1{width:65vw;position:relative;top:-390px;left:430px;font-size: 1.7vh;}
  #response3dmodel{width:65vw;position:relative;top:-480px;left:430px;font-size: 1.7vh;}
  #big_signup{ width:80vw;left:0vw;top:19px;position:relative;--clr-font-main: hsla(0 0% 20% / 100);
      --btn-bg-1: aqua;text-align: center;
      --btn-bg-2: hsla(217 100% 56% / 1);
      --btn-bg-color: purple;
      --radii: 0.5em;
      cursor: pointer;
      padding: 0.9em 1.4em;
      min-width: 120px;
      min-height: 44px;
      font-size: var(--size, 1rem);
      font-weight: 500;
      transition: 0.8s;
      background-size: 280% auto;
      background-image: linear-gradient(
        325deg,
        var(--btn-bg-2) 0%,
        var(--btn-bg-1) 55%,
        var(--btn-bg-2) 90%
      );
      border: none;
      border-radius: var(--radii);
      color: var(--btn-bg-color);
      box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.5),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);}
  #big_signup a{
      cursor: pointer; 
      border-radius: 2vh;
      font-size: 30px;color:white;   
      text-decoration:none;
  left:53vw;}
  body.welcome{
      
      
      background-attachment:scroll;
      background-repeat:repeat-x;
      background-size: 250px,200px;
      background-color: rgb(1, 1, 85);background-image:/*linear-gradient(rgb(1, 1, 85),black),*/
      radial-gradient(white, rgba(255,255,255,.2) 0px, transparent 40px),
      radial-gradient(white, rgba(255,255,255,.15) 0px, transparent 30px),
      radial-gradient(teal, rgba(255,255,255,.1) 0px, transparent 40px),
      radial-gradient(slateblue, rgba(255,255,255,.2) 0px, transparent 40px),
      radial-gradient(purple, rgba(255,255,255,.15) 0px, transparent 30px),
      radial-gradient(aqua, rgba(255,255,255,.1) 0px, transparent 40px);
      
      
      
      background-position: 0 0, 1vw 3vw, 4vw 8vw, 7vw 100px, 80px 80px, 130px 270px, 70px 100px;
      box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
      font-family:Calibri;
      color:white;    
  }
  
  #big_signup:hover {
      background-position: right top;
    }
    
    #big_signup:is(:focus, :focus-visible, :active) {
      outline: none;
      box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
    }
    
    @media (prefers-reduced-motion: reduce) {
      #big_signup {
        transition: linear;
      }
    }
    
  body.welcome_disclaimer{
      
  
      background-color: black;
      box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
      font-family:Calibri;
      color:white;    
  }
  #req_section{
      position:relative;
      height:auto;
      left:3px;
  
      width:70vw;
      top:0vw;
      display:inline-block;
      background-color: black;
      padding: 30px;
      border-radius: 10px;border-color: aqua;border-style: solid;
      opacity:0.88;
  }
  #transcription{position:relative;top:20px}
  #req_section .req_text{
      border-radius: 1vh;
      width:155px;
      border-style:solid;
      border-color: darkslateblue;
      background-color:darkslateblue;
      color:white;
      margin:3px;
  }
  /* From Uiverse.io by andrew-demchenk0 */ 
  .info {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 320px;
    padding: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;left:38px;position: relative;
    background: #509AF8;
    border-radius: 8px;
    box-shadow: 0px 0px 5px -3px #111;
  }
  
  .info__icon {
    width: 20px;
    height: 20px;
    transform: translateY(-2px);
    margin-right: 8px;
  }
  
  .info__icon path {
    fill: #fff;
  }
  
  .info__title {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
  }

  .info__close {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: auto;
  }#api_details{position:relative;background-color: darkmagenta;padding: 10px;width:74vw;border-radius: 8px;margin:10px;right:30px;}
  #api_details p{font-size:16px;}
  .info__close path {
    fill: #fff;
  }
  
  #req_edit_button{
      --black-700: hsla(0 0% 12% / 1);
      --border_radius: 9999px;
      --transition: 0.3s ease-in-out;
      --offset: 2px;
    
      cursor: pointer;
      position: relative;
    
      display: flex;
      align-items: center;
      gap: 0.5rem;
    
      transform-origin: center;
    
      padding: 0.35rem 1rem;
      background-color: transparent;
    
      border: none;
      border-radius: var(--border_radius);
      transform: scale(calc(1 + (var(--active, 0) * 0.1)));
    
      transition: transform var(--transtion);
    }
    
    #req_edit_button::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    
      width: 100%;
      height: 100%;
      background-color: var(--black-700);
    
      border-radius: var(--border_radius);
      box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
        0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
        0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);
    
      transition: all var(--transtion);
      z-index: 0;
    }
    
    #req_edit_button::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    
      width: 100%;
      height: 100%;
      background-color: hsla(260 97% 61% / 0.75);
      background-image: radial-gradient(
          at 51% 89%,
          hsla(266, 45%, 74%, 1) 0px,
          transparent 50%
        ),
        radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
      background-position: top;
    
      opacity: var(--active, 0);
      border-radius: var(--border_radius);
      transition: opacity var(--transtion);
      z-index: 2;
    }
    
    #req_edit_button:is(:hover, :focus-visible) {
      --active: 1;
    }
    #req_edit_button:active {
      transform: scale(1);
    }
    
    #req_edit_button .dots_border {
      --size_border: calc(100% + 2px);
    
      overflow: hidden;
    
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    
      width: var(--size_border);
      height: var(--size_border);
      background-color: transparent;
    
      border-radius: var(--border_radius);
      z-index: -10;
    }
    
    #req_edit_button .dots_border::before {
      content: "";
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: left;
      transform: rotate(0deg);
    
      width: 100%;
      height: 2rem;
      background-color: white;
    
      mask: linear-gradient(transparent 0%, white 120%);
      animation: rotate 33s linear infinite;
    }
    
    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }
    
    #req_edit_button .sparkle {
      position: relative;
      z-index: 10;
    
      width: 1.75rem;
    }
    
    #req_edit_button .sparkle .path {
      fill: currentColor;
      stroke: currentColor;
    
      transform-origin: center;
    
      color: hsl(0, 0%, 100%);
    }
    
    #req_edit_button:is(:hover, :focus) .sparkle .path {
      animation: path 1.5s linear 0.5s infinite;
    }
    
    #req_edit_button .sparkle .path:nth-child(1) {
      --scale_path_1: 1.2;
    }
    #req_edit_button .sparkle .path:nth-child(2) {
      --scale_path_2: 1.2;
    }
    #req_edit_button .sparkle .path:nth-child(3) {
      --scale_path_3: 1.2;
    }
    
    @keyframes path {
      0%,
      34%,
      71%,
      100% {
        transform: scale(1);
      }
      17% {
        transform: scale(var(--scale_path_1, 1));
      }
      49% {
        transform: scale(var(--scale_path_2, 1));
      }
      83% {
        transform: scale(var(--scale_path_3, 1));
      }
    }
    
    #req_edit_button .text_button {
      position: relative;
      z-index: 10;
    
      background-image: linear-gradient(
        90deg,
        hsla(0 0% 100% / 1) 0%,
        hsla(0 0% 100% / var(--active, 0)) 120%
      );
      background-clip: text;
    
      font-size: 1rem;
      color: transparent;
  }
  /* From Uiverse.io by Yaya12085 */ 
  .code-editor {position: relative; left:1vw;
    width: 460px;
    background-color: #1d1e22;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 2px;
  }
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
  }
  
  .title {
    font-family: Lato, sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1.57px;
    color: rgb(212 212 212);
  }
  
  .icon {
    width: 20px;
    transition: .2s ease;
  }
  
  .icon:hover {
    cursor: pointer;
    border-radius: 50px;
    background-color: #6e7281;
  }
  
  .editor-content {
    margin: 0 10px 10px;
    color: white;
  }
  
  .property {line-height: 0.8;
    margin-left: 30px;
  }
  
  .property:hover {
    cursor: text;
  }
  
  .editor-content .color-0 {
    color: rgb(86 156 214);
  }
  
  .editor-content .color-1 {
    color: rgb(182 206 168);
  }
  
  .editor-content .color-2 {
    color: rgb(156 220 254);
  }
  
  .editor-content .color-3 {
    color: rgb(207 146 120);
  }
  
  .color-preview-1,.color-preview-2 {
    height: 8px;
    width: 8px;
    border: 1px solid #fff;
    display: inline-block;
    margin-right: 3px;
  }
  
  .color-preview-1 {
    background-color: #1d1e22;
  }
  
  .color-preview-1 {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .checkbox_label{
      color:white;
      font-family:helvetica;
      font-size: 14px;
      left:2px;
  }
  /* From Uiverse.io by ilkhoeri */ 
  .card {top:8px;
      padding: 1rem;
      overflow: hidden;
      border: 1px solid #c5c5c5;
      border-radius: 12px;
      background-color: #d9d9d92f;
      backdrop-filter: blur(8px);
      width: 83vw; left:3vw;position: relative;
    }
    .wrap {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      z-index: 10;
      border: 0.5px solid #525252;
      border-radius: 8px;
      overflow: hidden;
    }
    .terminal {
      display: flex;
      flex-direction: column;
    
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    }
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      min-height: 40px;
      padding-inline: 12px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      background-color: #202425;
    }
    .title {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 2.5rem;
      user-select: none;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #8e8e8e;
    }
    .title > svg {
      height: 18px;
      width: 18px;
      margin-top: 2px;
      color: #006adc;
    }
    .copy_toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.25rem;
      border: 0.65px solid #c1c2c5;
      margin-left: auto;
      border-radius: 6px;
      background-color: #202425;
      color: #8e8e8e;
      cursor: pointer;
    }
    .copy_toggle > svg {
      width: 20px;
      height: 20px;
    }
    .copy_toggle:active > svg > path,
    .copy_toggle:focus-within > svg > path {
      animation: clipboard-check 500ms linear forwards;
    }
    .body {
      display: flex;
      flex-direction: column;
      position: relative;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
      overflow-x: auto;
      padding: 1rem;
      line-height: 19px;
      color: white;
      background-color: black;
      white-space: nowrap;
    }
    .pre {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-wrap: nowrap;
      white-space: pre;
      background-color: transparent;
      overflow: hidden;
      box-sizing: border-box;
      font-size: 16px;
    }
    .pre code:nth-child(1) {
      color: #575757;
    }
    .pre code:nth-child(2) {
      color: #e34ba9;
    }
    .cmd {
      height: 19px;
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    .cmd::before {
      content: attr(data-cmd);
      position: relative;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      background-color: transparent;
      animation: inputs 8s steps(22) infinite;
    }
    .cmd::after {
      content: "";
      position: relative;
      display: block;
      height: 100%;
      overflow: hidden;
      background-color: transparent;
      border-right: 0.15em solid #e34ba9;
      animation: cursor 0.5s step-end infinite alternate, blinking 0.5s infinite;
    }
    
    @keyframes blinking {
      20%,
      80% {
        transform: scaleY(1);
      }
      50% {
        transform: scaleY(0);
      }
    }
    @keyframes cursor {
      50% {
        border-right-color: transparent;
      }
    }
    @keyframes inputs {
      0%,
      100% {
        width: 0;
      }
      10%,
      90% {
        width: 58px;
      }
      30%,
      70% {
        width: 380px;
        max-width: max-content;
      }
    }
    @keyframes clipboard-check {
      100% {
        color: #fff;
        d: path(
          "M 9 5 H 7 a 2 2 0 0 0 -2 2 v 12 a 2 2 0 0 0 2 2 h 10 a 2 2 0 0 0 2 -2 V 7 a 2 2 0 0 0 -2 -2 h -2 M 9 5 a 2 2 0 0 0 2 2 h 2 a 2 2 0 0 0 2 -2 M 9 5 a 2 2 0 0 1 2 -2 h 2 a 2 2 0 0 1 2 2 m -6 9 l 2 2 l 4 -4"
        );
      }
    }
    /* From Uiverse.io by iconicchandu */ 
  .card1 {top:0px;margin-top:30px;
      --white: hsl(0, 0%, 100%);
      --black: hsl(240, 15%, 9%);
      --paragraph: hsl(0, 0%, 83%);
      --line: hsl(240, 9%, 17%);
      --primary: hsl(189, 92%, 58%);
    
      position: relative;
    
      display: flex;left:7%;
      flex-direction: column;
      gap: 1rem;
    
      padding: 1rem;
      width: 77vw;
      background-color: hsla(240, 15%, 9%, 1);
      background-image: radial-gradient(
          at 88% 40%,
          hsla(240, 15%, 9%, 1) 0px,
          transparent 85%
        ),
        radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
        radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
        radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
        radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
        radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);
    
      border-radius: 1rem;
      box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
    }
    
    .card1 .card1__border {
      overflow: hidden;
      pointer-events: none;
    
      position: absolute;
      z-index: -10;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      background-image: linear-gradient(
        0deg,
        hsl(0, 0%, 100%) -50%,
        hsl(0, 0%, 40%) 100%
      );
    
      border-radius: 1rem;
    }
    
    .card1 .card1__border::before {
      content: "";
      pointer-events: none;
    
      position: fixed;
      z-index: 200;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%), rotate(0deg);
      transform-origin: left;
    
      width: 200%;
      height: 10rem;
      background-image: linear-gradient(
        0deg,
        hsla(0, 0%, 100%, 0) 0%,
        hsl(189, 100%, 50%) 40%,
        hsl(189, 100%, 50%) 60%,
        hsla(0, 0%, 40%, 0) 100%
      );
    
      animation: rotate 8s linear infinite;
    }
    
    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }
    
    .card1 .card1_title__container .card1_title {
      font-size: 22px;
      color: var(--white);
    }
    
    .card1 .card1_title__container .card1_paragraph {
      margin-top: 0.25rem;
      width: 65%;
    
      font-size: 0.5rem;
      color: var(--paragraph);
    }
    
    .card1 .line {
      width: 100%;
      height: 0.1rem;
      background-color: var(--line);
    
      border: none;
    }
    
    .card1 .card1__list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .card1 .card1__list .card1__list_item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .card1 .card1__list .card1__list_item .check {
      display: flex;
      justify-content: center;
      align-items: center;
    
      width: 1rem;
      height: 1rem;
      background-color: var(--primary);
    
      border-radius: 50%;
    }
    
    .card1 .card1__list .card1__list_item .check .check_svg {
      width: 0.75rem;
      height: 0.75rem;
    
      fill: var(--black);
    }
    
    .card1 .card1__list .card1__list_item .list_text {
      font-size: 17px;
      color: var(--white);
    }
    
    .card1 .button {
      cursor: pointer;
    
      padding: 0.5rem;
      width: 100%;
      background-image: linear-gradient(
        0deg,
        hsl(189, 92%, 58%),
        hsl(189, 99%, 26%) 100%
      );
    
      font-size: 0.75rem;
      color: var(--white);
    
      border: 0;
      border-radius: 9999px;
      box-shadow: inset 0 -2px 25px -4px var(--white);
    }
    
  .videofilelabel{
      border-radius: 1vh;
      background: rgb(161,0,196);
      background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);
      border-color: darkslateblue;
      width:161px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;
      
      
      
      font-size:13.4px;
      padding:1px;
      padding-left: 30px;
      padding-right: 30px;
  }
  .show_paypal_button{ width:3vw;left:1vw;top:00px;position:relative;--clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: aqua;text-align: center;
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: purple;
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(
      325deg,
      var(--btn-bg-2) 0%,
      var(--btn-bg-1) 55%,
      var(--btn-bg-2) 90%
    );
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
      0px 0px 20px rgba(71, 184, 255, 0.5),
      0px 5px 5px -1px rgba(58, 125, 233, 0.25),
      inset 4px 4px 8px rgba(175, 230, 255, 0.5),
      inset -4px -4px 8px rgba(19, 95, 216, 0.35);}
  #videofile[type="file"] {
      display: none;
  }
  
  #videofile1[type="file"] {
      display: none;
  }
  #videofile2[type="file"] {
      display: none;
  }
  #video_file_description{
      position:relative;
      color:white;
      font-family:helvetica;
      font-size:14px;
  }
  
  #disclaimer{
      position:relative;
      color:white;
      font-family:helvetica;
      font-size:19px;
      top:300px;
  width:800px;
  left:10px;
  
  line-height: 1.7;}
  .features{
      position:relative;
      top:30vh;
      text-align: center;
      left:0vw;
      line-height: 1.7;
      font-size:19px;
  
      display:none;
  }
  #music_label{
      position:relative;
      color:white;
      font-family:helvetica;
      font-size:14px;
  }
  #music{
      border-radius: 1vh;
      background-color:darkslateblue;
      border-color: darkslateblue;
      width:220px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;
      
      
      padding:1px;
  }
  footer p{position:relative;
      left:170px;
      line-height: 1;
      font-size:16px}
  #back_game_label{
      position:relative;
      color:white;
      font-family:helvetica;
      font-size:14px;
  }
  #back_game{
      border-radius: 1vh;
      background-color:darkslateblue;
      border-color: darkslateblue;
      width:220px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;
      
      
      padding:1px;
  }
  #proc_vid
  
  
  {
      width:50%;
      float:left;
      left:3vw;
      position: relative;
      top: 30vh;
      display: inline-block;
      
  
  }
  #rec_vid{
      width:50%;
      float:right;
      
      left:1vw;
      position: relative;
      top:30vh;
      display: inline-block;
  }
  
  #seconds_between_clips{
      border-radius: 1vh;
      width:60px;
      border-style:solid;
      border-color: darkslateblue;
      background-color:darkslateblue;
      margin:3px;
      color:white;
  }
  
  #seconds_between_clips_label{
      position:relative;
      color:white;
      font-family:helvetica;
      font-size:14px;
  }
  
  #video_file_path{
      position:relative;
      color:white;
      font-family:helvetica;
      font-size:14px;
  }
  
  #navbar {
      height:10px;left:-2vw;position: relative;
    visibility: hidden;
    
    border-radius: 1vh;
    float:center;
  }
  #navbar a {
      position:relative;
      float: left;
      
      color: aqua;
      text-align: left;
      padding: 11px 52px;padding-left: 25px;padding-right: 56px;
      text-decoration: none;
      font-size:17px;
      font-family:helvetica;
      top:17px;
      transition: .4s;
      -moz-transition: all .4s;
      background: rgb(161,0,196);
      background: linear-gradient(180deg, darkmagenta 0%, rgba(0,17,232,1) 100%);
      
      border: 1px  solid rgba(161,0,196,1)  ;
      border-radius:8px;
      -webkit-transition:all .4s;
      -o-transition: all .4s;  
      margin-left: 14px;
      width:2.8vw;
  }

  
  #navbar p {
      position:relative;
      float: right;
      color: #f2f2f2;
      text-align: center;
      padding: 0px 20px;
      text-decoration: none;
      font-family:helvetica;
      top:-3px;
      font-size:17px;
  } 
  #req_load_gif{
  
      height:30px;
      position:relative;
      top:30px;
      display: inline-block;
  }
  #loading_chart{
      width:106px;
  }
  #loading_gif_reference{
      
  }
  
  #req_section label{
      color:white;
      font-family:helvetica;
      
  }
  
  #download_video_file{    border-radius: 1vh;
      background-color:darkslateblue;
      border-color: darkslateblue;
      width:161px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;}
  
      #screen_size_label{
          position:relative;
          color:white;
          font-family:helvetica;
          font-size:14px;
      }
  
  #screen_size{
      border-radius: 1vh;
      background-color:darkslateblue;
      border-color: darkslateblue;
      width:80px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;
      
      
      
      padding:1px;}
      
      #device_orientation_label{
          position:relative;
          color:white;
          font-family:helvetica;
          font-size:14px;
      }

  #device_orientation{
      border-radius: 1vh;
      background-color:darkslateblue;
      border-color: darkslateblue;
      width:80px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;
      
      
      
      padding:1px;}
      
  #email_valid_section button{position: relative;right:25px;
      border-radius: 3px;
      background: rgb(161,0,196);
      background:blue;
      border-color: darkslateblue;
      width:110px;
      font-family:helvetica;
      border-style:none;
      color:white;
      margin:3px;
  }
  #email_input{border-radius: 1vh;
      width:220px;
      border-style:solid;
      border-color: darkslateblue;
      background-color:darkslateblue;
      margin:3px;
      color:white;}
  
  
      
  
  
  #email_code{border-radius: 1vh;
      width:154px;
      
      border-style:solid;
      border-color: darkslateblue;
      background-color:black;
      margin:3px;
      color:white;}
  
      #download_edited_video{
      border-radius: 1vh;
      background-color:darkslateblue;
      border-color: darkslateblue;
      width:161px;
      font-family:helvetica;
      border-style:solid;
      color:white;
      margin:3px;
  padding:11px;}
  
      #img_title{
          padding:0px;
      height: 80px;
      display:inline-block;
      position:relative;    
  background-color: black;
  border-radius: 2vh;
  }
  #other_navbar{    display:inline-block;
      position:relative;    
      margin-right:16px;
      margin-left:auto;
  top:-5px;}
  #code_page_footer{font-size:20px; left:3px;margin-top:10px;
    line-height: 0.8;padding:7px;padding-left:20px;
    position: fixed;z-index:10;text-align: left;border-style: none;background-color:rgb(73, 98, 243);width:77vw;border-radius: 10px;}
      
  .subsc_type{
          position:relative;
          height:auto;
          left:20vw;
          width:200px;
          top:0px;
          display:inline-block;
          background: rgb(161,0,196);
  background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);
  
          background-color: #491d9b;
          padding: 30px;
          margin:30px;
          border-radius: 10px;
      height:437px}    
      .subsc_type_profile{
              position:relative;
              height:auto;
              left:8vw;
              width:200px;
              top:70px;
              display:inline-block;
              background: rgb(161,0,196);
      background: linear-gradient(221deg, rgba(161,0,196,1) 0%, rgba(0,17,232,1) 100%);
      
              background-color: #491d9b;
              padding: 30px;
              margin:30px;
              border-radius: 10px;
          height:437px}
      #subsc_front{left:0px;}
  #explanation{
      position:absolute;
      top:240px;
      width:350px;
  font-size:50px;
  left:30px;
  }
  #frontpage_explanation_title{
      position:relative;
      font-size:38px;
  
  text-align:left;left:10vw;
  
  font-weight: normal;
  }
  #frontpage_explanation{
      position:relative;
      top:110px;
      width:30vw;
  
  left:14vw;
  display: inline-block;
  text-align:left;
  line-height: 1.9;
  
  }
  #subsc_explanation{
      position:absolute;
      top:300px;
      width:350px;
  font-size:50px;
  left:30px;
  }
  #calls_available{
      position:relative; text-align: center;font:bold;margin:10px;padding:11px;
  font-size:16.5px;padding-right: 11px; padding-left:11px;background-color: darkmagenta;width:3.5vw;border-radius: 8px;
  }
  #req_message a{font-size:20px;color:orange;
      position:relative;
      left:640px;
      top:0px;
  
  }
  #validate_email{}
  
  
  
  .paypal_button{
      position:absolute;
  }
  
  
  #email_valid_section{text-align:left;background-color: rgb(52, 133, 158);
      font-size: 16px;
      top:190px;
      left:30px;
  position:absolute;
  width:280px;
  border: none;
  border-radius: 3.5px;font-weight: bold;
  padding: 10px;
  
  }
  #valid_welcome{font-size: 11px;font-weight: normal; }
  #current_subsc_id{position:absolute;font-weight: normal; }
  
  .email_code_message{font-size: 11px;font-weight: normal; }
  .validate_message{font-size: 11px;font-weight: normal; left: 10px;position: relative; }
  
  
  #queue_number{font-size:14px;
  }}
  

    /* Importing Google font - Open Sans */


#footer_docs{transform: translate(-40%, -40%);;position:relative}

.footer {
  position: relative;
  bottom:-31vh;
  left: 52%;
  transform: translate(-50%, -50%);
  min-width: 1280px;
  width: 30%;
  background: linear-gradient(45deg, blue, red);;
  border-radius: 8px;
}

.footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 60px;
}

.footer-row .footer-col h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}

.footer-col .links {
  margin-top: 20px;
}

.footer-col .links li {
  list-style: none;
  margin-bottom: 10px;
}

.footer-col .links li a {
  text-decoration: none;
  color: #bfbfbf;
}

.footer-col .links li a:hover {
  color: #fff;
}

.footer-col p {
  margin: 20px 0;
  color: #bfbfbf;
  max-width: 300px;
}

.footer-col form {
  display: flex;
  gap: 5px;
}

.footer-col input {
  height: 40px;
  border-radius: 6px;
  background: none;
  width: 100%;
  outline: none;
  border: 1px solid #7489C6 ;
  caret-color: #fff;
  color: #fff;
  padding-left: 10px;
}

.footer-col input::placeholder {
  color: #ccc;
}

 .footer-col form button {
  background: #fff;
  outline: none;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}

.footer-col form button:hover {
  background: #cecccc;
}

.footer-col .icons {
  display: flex;
  margin-top: 30px;
  gap: 30px;
  cursor: pointer;
}

.footer-col .icons i {
  color: #afb6c7;
}

.footer-col .icons i:hover  {
  color: #fff;
}

@media (max-width: 768px) {
  .footer {min-width: 80px;
    position: relative;
    top: 300px;
    left: 00px;
    transform: none;
    width: 100%;
    border-radius: 0;
  }

  .footer .footer-row {
    padding: 20px;
    gap: 1rem;
  }

  .footer-col form {
    display: block;
  }

  .footer-col form :where(input, button) {
    width: 100%;
  }

  .footer-col form button {
    margin: 10px 0 0 0;
  }
}