@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Miranda+Sans:ital,wght@0,400..700;1,400..700&display=swap');


@import url(./reset.css);

:root {
  --text: #fff;
  --background: #111;
  --primary: rgb(44, 44, 176);
  --secondary: rgb(42, 42, 42);
  --text-secondary: rgb(126, 126, 126);
  --answer-green: rgb(0, 160, 0);
}


h1,h2,h3,h4,h5, .pts, .question {
  font-family: "Press Start 2P", system-ui;
}

body {

  background: var(--background);
  color: var(--text);

  font-family: "Miranda Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: 1px;
}

input[type=text], textarea, input[type=password], input[type=number], select {
  border: 2px solid var(--secondary);
  background: transparent;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  color: var(--text);
  outline: none;
  transition: 0.2s;
}

select {
  background: var(--background);
}


input[type=button], button {
  --btn-colour: var(--secondary);
  border: 2px solid var(--btn-colour);
  background: transparent;
  padding: 10px;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  transition: 0.2s;
}

input[type=button]:hover, button:hover {
  background: var(--btn-colour);
}

input[type=button]:disabled, button:disabled {
  --btn-colour: var(--secondary);
  cursor: not-allowed;
} 

input[type=text]:focus, input[type=number]:focus, textarea:focus, input[type=password]:focus {
  border-color: var(--primary);
}

input[type=text]:disabled , input[type=password]:disabled {
  border-color: var(--secondary);
  cursor: not-allowed;
}

input[type=text].correct, input[type=password].correct {
  border-color: var(--answer-green);
}

.basic-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border: 1px solid var(--secondary);
  padding: 100px;
  text-align: center;
  border-radius: 10px;

  width: 90%;
  z-index: 100;
  background: var(--background);

  box-shadow: 0 0 5px 1px black;
}

.bottom-left {
  position: absolute;
  left: 5px;
  bottom: 5px;
}

hr {
  margin: 10px 0px;
  border: none;
  height: 2px;
  background: var(--secondary)
}

.primary-btn {
  --btn-colour: var(--primary);
}

.click {
  cursor: pointer;
}
.inline-block {
  display: inline-block;
}