@font-face {
  font-family: Inter;
  src: url(./fonts/Inter.woff2);
}
*{
font-family: Inter;
}
body{
display: flex;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.userInput{
margin-top: 75px;
margin-bottom: 150px;
}
#settings{
box-sizing: border-box;
align-items: center;
width: 100px;
height: 25px;
background-color: #5f5f5f;
color: white;
font-size: medium;
border: 0;
cursor: pointer;
}
#url{
box-sizing: border-box;
align-items: center;
width: 260px;
height: 35px;
border: 0;
outline: none;
background-color: #343434;
color: white;
font-size: large;
font: bold;
}
#url::placeholder{
color: white;
opacity: 0.7;
}
#url:hover{
background-color: #496bf2;
}
.urlThings{
display: flex;
flex-direction: row;
margin-bottom: 10px;
margin-top: 10px;
}
#submit{
box-sizing: border-box;
align-items: center;
width: 80px;
height: 35px;
background-color: #5f5f5f;
color: white;
font-size: large;
border: 0;
cursor: pointer;
}
#submit:hover, #settings:hover, .copyClipboard:hover{
background-color: #496bf2;
}
.upload{
display: flex;
align-items: center;
position: relative;
justify-content: center;
height: 140px;
width: 340px;
cursor: pointer;
background-color: #343434;
color: white;
font-size: x-large;
}
.upload:hover{
background-color: #496bf2;
}
#localFile{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1;
overflow: hidden;
}
#showResult{
position: absolute;
border: 2px solid black;
padding: 20px;
max-width: 300px;
overflow: hidden;
}
.copyClipboard{
box-sizing: border-box;
align-items: center;
width: 80px;
height: 25px;
background-color: #5f5f5f;
color: white;
font-size: medium;
border: 0;
cursor: pointer;
}


.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background:linear-gradient(90deg,#000 50%,#0000 0) right/200% 100%;
  animation: l21 1.5s infinite linear;
}
.resultThings{
padding-top: 60px;
}
.loader::before {
  content :"Loading...";
  color: #0000;
  padding: 0 5px;
  background: inherit;
  background-image: linear-gradient(90deg,#fff 50%,#000 0);
  -webkit-background-clip:text;
          background-clip:text;
}

@keyframes l21{
  100%{background-position: left}
}

.loadingEngin::after {
  content: '';
  animation: dots 2s steps(1, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}