@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --based-color: #000000;
  --based-text-color: #ffffff;
  --based-btn-color: #caab72;
  --based-btn-hover: #f0d39d;
  --based-err-color: #dc143c;
  --based-err-hover: #f1375c;
  --based-update-color: #0978b2;
  --based-update-hover: #128fd3;
  --based-success-color: #4caf50;
  --based-success-hover: #5cb85c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--based-color);
  color: var(--based-text-color);

  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

a,
span,
em {
  text-decoration: none;
}

li {
  list-style: none;
}

li:before {
  content: "·";
  font-size: 20px;
  display: inline-block;
  padding-left: 15px;
  margin-right: 12px;
}

input {
  border: none;
  outline: none;
  padding: 8px;
  border-radius: 4px;
}

button {
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}

table {
  table-layout: fixed;
  width: 100%;
}

td {
  word-wrap: break-word;
}

header {
  margin-bottom: 48px;
}

main {
  margin-bottom: 56px;
}

header h1 {
  margin-bottom: 24px;
}

header,
main,
footer {
  padding: 12px 16px;
}

footer {
  text-align: center;
  font-size: 12px;
}

.button--success {
  color: var(--based-text-color);
  background: var(--based-success-color);
}
.button--primary {
  color: var(--based-text-color);
  background: var(--based-update-color);
}
.button--delete {
  color: var(--based-text-color);
  background: var(--based-err-color);
}

.form--group .inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.form--row__group {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-evenly;
}

.form--row__group label,
.form--row__group input {
  width: 100%;
  max-width: 100%;
}

.is--left__screen,
.is--right__screen {
  flex: 1;
}

.is--right__screen {
  margin: 0 auto;
}

.is--right__screen table,
.is--right__screen table td {
  border: 1px solid #161616;
  border-collapse: collapse;
}

.is--right__screen table td,
.is--right__screen table th {
  padding: 8px;
}

.is--right__screen table td {
  width: 10%;
  text-align: center;
  background: #222831;
  font-size: 12px;
}

.form--row__btn {
  display: flex;
  align-items: end;
  justify-content: right;
  gap: 14px;
}

.is--right__screen table td button {
  display: block;
  width: 100%;
  font-size: 12px;
}

.is--right__screen table td button:nth-child(1) {
  margin-bottom: 12px;
}

@media (hover: hover) {
  button:hover {
    cursor: pointer;
  }

  .button--success:hover {
    background: var(--based-success-hover);
  }

  .button--primary:hover {
    background: var(--based-update-hover);
  }

  .button--delete:hover {
    background: var(--based-err-hover);
  }
}

@media (max-width: 950px) {
  .form--group .inner {
    flex-direction: column;
  }
}

@media (max-width: 510px) {
  body {
    min-width: 550px;
  }
}