@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background-color: whitesmoke;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

#toggleSwitch {
  appearance: none;
  width: 40px;
  height: 20px;
  background: #ddd;
  border-radius: 20px;
  position: relative;
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}

#toggleSwitch:checked {
  background: #2196f3;
}

#toggleSwitch:before {
  content: "";
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.2s ease;
}

#toggleSwitch:checked:before {
  left: 21px;
}

label[for="toggleSwitch"] {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.checkContainer {
  display:flex;
  padding-top: 10px;
}

#link {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 14px;
  width: 65%;
  margin-bottom: 10px;
}

#submit {
  background-color: #2196f3;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.copy {
  color: rgb(205, 14, 14);
  font-weight: 500;
}