html {
    font-family: 'Quicksand';
}


body {
  background-color:#090C08;
}

h1 {
    font-family: 'Sora';
    font-weight:600;
    font-size:36px;
}


section {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    min-height:100vh;
    max-width:1920px;
    margin:auto;
}


.card {
  background-color:#1a1a1a;
  border-radius:24px;
  padding: 2% 4% 4% 4%;
  max-width:360px;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.1);
}


.instructions {
  font-size:16px;
  color:#FCF7F8;
  font-weight:400;
  text-align:center;
  margin:16% 0%;
}



input[type="file"]{
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: -1px;
    left: 0;
    width: 0.1px;
    height: 0.1px;
}

input[type="file"]:focus + label{
    border: 1px solid #85E5FF;
}


label, input[type="text"] {
  display:flex;
  border:2px solid grey;
  border-radius:12px;
  color:#FCF7F8;
  padding:8% 8%;
  margin-bottom:4%;
  background-color: transparent;
}

input[type="text"] {
  margin: 0 auto;
}


label:hover{
    border-color:#5a7fff;
    color:#5a7fff;
}


input[type="submit"], button, a.button {
  display:block;
  width:100%;
  border-radius:12px;
  border:0px;
  color:#FCF7F8;
  font-size:16px;
  background-color:#5a7fff;
  padding:8% 0;
  margin-bottom:4%;
  text-decoration: none;
  opacity:0.95;
  transition:all ease 0.5s;
}


input[type="submit"]:hover, button:hover, a.button:hover {
	opacity:1;
}


.neuaufnehmen {
	font-size:75%!important;
	background-color:rgba(0,0,0,0)!important;
	/*border-bottom:2px solid white!important;*/
	border-radius:0px!important;
	padding:0!important; 
	width:100%!important;
	color:#FFF;
	
}



.loader {
  position: relative;
  display: inline-block;
  margin: 0 12.5% 100px;
  width: 40px;
  height: 40px;
  border: 2px solid #0cf;
  border-radius: 50%;
  -webkit-animation: rotation 0.75s infinite linear;
  animation: spin 0.75s infinite linear;
}
.loader::before,
.loader::after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}


/*
 * LOADER 5
 */
.loader-5,
.loader-5::before {
  display: inline-block;
  border-color: transparent;
  border-top-color: #0cf;
}
.loader-5::before {
  animation: spin 1.5s infinite ease;
}




.loader {
  position: relative;
  display: inline-block;
  margin: 0 12.5% 100px;
  width: 40px;
  height: 40px;
  border: 2px solid #0cf;
  border-radius: 50%;
  -webkit-animation: rotation 0.75s infinite linear;
  animation: spin 0.75s infinite linear;
}
.loader::before,
.loader::after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}


/*
 * LOADER 5
 */
.loader-5,
.loader-5::before {
  display: inline-block;
  border-color: transparent;
  border-top-color: #0cf;
}
.loader-5::before {
  animation: spin 1.5s infinite ease;
}




@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
}
}

            @-webkit-keyframes spin {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(360deg);
          }
        }



        button:disabled {
            display:none;
          }

          ol{
              list-style: none;
              margin:0;
              padding: 0;
          }

          audio {
            width: 100%;
            margin: 5% 0;
        }


        div#ladebalken  {height:30px; width:100%; margin-top:10px; border:1px solid #0cf;}
div#fortschritt {height:30px; width:1%; background-color:#0cf; border:none}

button.green-button {
  background-color: #1abf3f;
}