*{
    border-radius: 0.2rem;
 }

header{
    color: var(--txt);
    font-size: var(--txt-size-large);
    background-color: var(--fg1);
    padding: 0.25rem;
}

h1{
    font-size: 1.5rem;
}

h3{
    display: flex;
}

section{
    width: 100vw;  


}

label, legend{
    display: flex;
    align-items: center;
    gap: var(--dist-small);
    background-color: var(--fg2);
    color: white;
    padding: 0.1rem;
}


legend{
    padding: 0.2rem;
    font-size: 1.1rem;
    width:100%;
    p{
        width:100%;
        text-align:left;
    }
}

input, select{
    height: 1.2rem;
    width: 3rem;
}

.fa-btn{
    display: flex; 
    align-items: center;
    gap: 0.3rem;
    background-color: transparent;
    border: none;
    color: var(--fg2);
    font-size: var(--txt-size-middle);
    border: 1px solid var(--fg2);
    padding: 0.1rem;
}

.fa-btn:hover{
    background-color: var(--fg2);
    color: white;
    transition: 0.1s ease-in-out;
}

label .fa-btn{
    color: white;
}

label .fa-btn:hover{
    color: rgb(143, 143, 143);
    transition: 0.1s ease-in-out;
}

.text, #media-container, #video-container{
    margin-top: var(--dist-large);
    
    border: 1px solid var(--fg2);
    padding: 0.2rem;
    width: 40vw;
    height:calc(100vh - 9.5rem);

    #start-edit{
        resize: none;
    }

    #text-edit{
        overflow-y: scroll;
        height:30rem;
        padding:0.5rem;
        resize: none;
    }
}

#resources-list{
    height:100%;
    align-items: flex-start;
    padding-top: var(--dist-small);
    overflow-y: scroll;
}

canvas{
    transform-origin: 0 0;
    
   
    #bg-canv, #vid-canv, #img-canv, #txt-canv{
       display:none;     
    }
}

.media-container{
    width:100%;

    img, video{
        width:100%;
    }
}

.label-container{
    width:100%;
    display:flex;
    align-items: start;
    justify-content: start;
    flex-wrap: wrap;
    gap:0.3rem;
}

.media-panel{
width: 100%;
display: grid;
grid-template-columns: 82% 12%;
border: 1px solid var(--fg1);
padding: var(--dist-small);
gap:6%;

}

.resource-start, .resource-end, .x, .y, .scale{
    width: 4rem;
}



.resource-id{
    width: 3rem;
}

.resource{
    transform-origin: left top;
}

#canvas-container{
    width: 40vw;
     height:100%;
    
   overflow: auto;
}

.off{
    display: none;
}

#video-create{
   width: 100%;
}

header a{
    color: rgb(61, 61, 61);
}

#pixabay-input{
    width:100%;
}

#help-tags{
overflow: hidden;

div{
    height:80vh;
}
}
#help-tags ul{
   width:90%;
   
   li{
     margin-top: 0.5rem;
   }
   code{
    font-size: 1rem;
   }
}
/* Phone */
@media only screen and (max-width: 1024px) {

  .text, #media-container, #video-container{
      width: 100%;
  }

  #main-container{
    flex-direction: column;
    gap: 3rem;
    padding:0;

    fieldset{
        border:none;
        padding: 0;
    }

    .pad-small{
        padding:0;
    }
  }

  section{
        padding:0;
        margin:0;
  }

  main{
padding:0;
  }

  #play-btn:disabled #play-icon{
     color: red;
  }
}