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

iframe{
    display: none;
}


.content{
    margin-top: 10vh;
    margin-bottom: 10vh;
    display: grid;
    grid-template-areas:
        "a a a"
        "b b b "
        "c d e"
        "f f f";
    justify-self: center;
    justify-items: center;
    align-items: center;
    font-size: 3vw;
    width: 100%;
}
.decideAutoOrCustomMap{
    padding: 1vh 0%;
    text-align: center;
    align-items: center;
    text-decoration: none;
    cursor:pointer;
    font-size: 1.2vw;
}

button {
    text-transform:uppercase;
    border: 0;
    color: transparent;
    background-image: var(--gradient);
    background-size: 500%;
    background-position: right;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 0.2s;
    cursor:pointer;
    font-size: 2vw;
    width: 100%;
}

button:hover{
    background-position: left;
}

.custom-file-upload{
    grid-area: a;
}

#customMap{
    grid-area: c;
    font-size: 1.2vw;
}

#autoMap{
    grid-area:e;
}

#downloadMapCreator{
    grid-area:e;
}

#createMap{
    grid-area: f;
}


canvas {
    grid-area: b;
    background: var(--background);
    border: 2px solid var(--invertedbackground);
    border-radius: .3rem;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 1rem;
    display: block;
  }

  label{
    cursor: pointer;
    width: 100%;
    background-image: var(--gradient);
    background-size: 500%;
    background-position: right;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 0.2s;
  }

  label:hover{
      background-position: left;
      cursor: pointer;
  }

  .songTitle{
    grid-area: a;
    font-size: 2vw;
    text-align: center;
    align-content: center;
  }
  
  #downloadMapCreator{
      font-size: 1.2vw;
  }

  .songTitle{
    background-image: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    background-size:500%;
    animation: animate 5s linear infinite;
  }