@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root{
  --error:#ff0000;
  --success:#00c853;
  --warning:#ffeb3b;
  --white:#ffffff;
  --bg:#121212;
}

*{
  font-family:'Open Sans',sans-serif;
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--white);
}

.error{
  color:var(--error);
}

.success{
  color:var(--success);
}

.warning{
  color:var(--warning);
}

.alert{
  color:var(--error);
  background:linear-gradient(90deg,var(--error),var(--warning));
  padding:10px;
  border-radius:6px;
  animation:alertBlink 1s infinite;
}

@keyframes alertBlink{
  0%{opacity:1;}
  50%{opacity:0.4;}
  100%{opacity:1;}
}

input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height:6px;
  background:var(--white);
  border-radius:10px;
  outline:none;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  background:var(--white);
  border:2px solid var(--bg);
  border-radius:50%;
  cursor:pointer;
}

input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--white);
}

select{
  background:var(--white);
  color:var(--bg);
  border:none;
  padding:8px 12px;
  border-radius:6px;
  outline:none;
}

option{
  background:var(--white);
  color:var(--bg);
}

.button{
  background:var(--white);
  color:var(--bg);
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  transition:0.2s;
}

.button:hover{
  opacity:0.8;
}

.container{
  padding:20px;
}

.card{
  background:#1e1e1e;
  padding:16px;
  border-radius:10px;
  border:1px solid #333;
}

.text-white{
  color:var(--white);
}