:root {
  --primary-color: #128fff;
  --secondary-color: #ff9500;
}

#clipboard-container,
#paste-action {
  display: none;
}

body {
  font-family: "Calibri", "Arial", "Helvetica", "Segoe UI", sans-serif;
}

p {
  overflow-x: auto;
}
main {
  margin: 0 auto;
  width: 90%;
}

button {
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  transition: background-color 1s ease-in;
  border-width: 0px;
}

button:hover {
  background-color: var(--secondary-color);
}

input[type="url"],
button {
  display: block;
  width: 100%;
}

label,
input[type="url"],
button,
p.result {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

input[type="url"],
button,
p.result {
  padding: 1rem;
  border-style: solid;
  border-color: var(--primary-color);
  border-radius: 0.5rem;
}

p.info {
  border: 1px solid grey;
  background-color: #eee;
  padding: 0.5rem;
}

p#message {
  font-weight: bold;
}

input[type="url"] {
  border-color: var(--secondary-color);
}

@media (min-width: 800px) {
  main {
    max-width: 800px;
  }
}