* {
    margin: 0px;
    padding: 0px;
}

body {
  font-family: "Inter", sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: rgb(19, 23, 38);
}

.logo {
  font-size: 20px;
  color: white;
  margin-left: 50px;
  margin-top: 20px;
}

.logo a {
  text-decoration: none;
  color: var(--white);
}

.header .right-block {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  margin-right: 50px;
  color: var(--white);
  display: flex;
  justify-content: flex-end;
}

.hello-block{
  margin-top: 6px;
}

.header .right-block .hello-block{
  margin-right: 20px;
}

.authbtn:hover {
  border-color: var(--hover);
  transition: 0.5s ease;
  a {
      color: var(--hover);
      transition: 0.5s ease;
  }
}

.authbtn {
  margin-right: 20px;
}

.error{
background:#3a0d0d;
border:1px solid #ff4d4f;
padding:10px;
margin:10px 50px;
border-radius:8px;
color:#ff4d4f;
}

.authbtn, .regbtn {
  height: 30px;
  display: flex;
  justify-content: center;
  border: 1px solid var(--white);
  border-radius: 10px;
  margin-bottom: 8px;
}

.authbtn a, .regbtn a{
  padding: 5px;
  margin-bottom: 5px;
  color: var(--white);
  text-decoration: none;
}
.regbtn {
  background-color: var(--hover);
  border: 1px solid var(--hover);
}


.footer {
  margin-top: 30px;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: rgb(19, 23, 38);
}

.footer-content {
  margin-left: 50px;
  margin-right: 50px;

}

body {
    background-color: rgb(19, 23, 38);
}

.often-queries {
  display: flex;
  justify-content: center;
  margin-top: 30px;
    text-decoration: none;

}

.query:hover a {
  color: var(--hover);
  border-color: var(--accent);
  transition: 0.35s ease;
}

.query a {
  margin-left: 50px;
  margin-bottom: 20px;
  padding: 5px;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 10px;

  text-decoration: none;

}

#filters {
  margin-top: 15px;
  border-radius: 5px;
  margin-right: 50px;
  margin-left: 50px;
  color: var(--white);
}

#filters{
  display:flex;
  gap:10px;
  padding:12px;
  background:rgb(18,20,26);
  border-bottom:1px solid rgba(255,255,255,0.05);
}


/* INPUT */

#filters input{

  background:rgb(21,23,30);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--white);

  padding:8px 10px;
  border-radius:6px;

  font-size:14px;

  transition:all 0.2s ease;

}


/* SELECT */

#filters select{

  background:rgb(21,23,30);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--white);

  padding:8px 10px;
  border-radius:6px;

  font-size:14px;

  transition:all 0.2s ease;

}


/* HOVER */

#filters input:hover,
#filters select:hover{

  border-color:rgba(255,255,255,0.18);

}


/* FOCUS */

#filters input:focus,
#filters select:focus{

  outline:none;

  border-color:var(--hover);

  box-shadow:0 0 0 1px #3b82f6;

}


/* BUTTON */

#filters button{

  width: 200px;
  background: var(--blue);
  border:none;

  color:white;

  padding:8px 14px;

  border-radius:6px;

  font-weight:500;

  cursor:pointer;

  transition:all 0.2s ease;

}

#filters label {
  margin-top: 7px;
  margin-right: 5px;
}


#filters button:hover{

  background:var(--hover);

}


#filters button:active{

  transform:scale(0.96);

}


#items {
  margin-right: 50px;
  color: rgb(219, 226, 233);
  margin-left: 50px;
  padding-top: 20px;
}

.item {
  display: flex;
  justify-content: flex-start;
  height: 50px;
  background-color:oklab(0.280471 0.00125703 -0.0340394 / 0.9);
  margin-bottom: 20px;
  border-radius: 15px;
}

.item .item-info {
  margin-left: 15px;
  display: flex;
}

.item .item-info .price{
    font-size: 15px;
  margin-top: 15px;
  margin-right: 20px;
  width: 40px;
}

.item .item-info .title{
    font-size: 15px;
  margin-top: 15px;
}

.item .item-info a{
    font-size: 15px;
  margin-top: 15px;
  margin-right: 15px;
  text-decoration: none;
}

.item:hover .title{
  color: var(--hover);
  transition: 0.5s ease;
}

.item:hover{
  cursor: pointer;
}

.item .advantages {
  margin: 15px;

}

.advantage{
  font-size: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid rgb(219, 226, 233);
  margin-left: 15px;
}

.advantage-bad {
  font-size: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--danger);
  color: #CC0033;
  margin-left: 15px;
}

.advantage-good {
  font-size: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--good);
  color: var(--good);
  margin-left: 15px;
}

.advantage-warning {
  font-size: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--warning);
  color: var(--warning);
  margin-left: 15px;
}

.item .flag {
  padding-top: 11px;
  margin-right: 5px;
}

.item img {

  height: 25px;
  width: 25px;
}

.header .tabs {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

}

.rules-block {
  margin-top: 20px;
  background-color: var(--block);
  border-radius: 5px;
  padding: 5px;
}


.tabs span a{
  color: var(--white);
    margin-right: 15px;
    text-decoration: none;
}

.tabs span a:hover{
  color: var(--hover);
  transition: 0.3s ease;
}

.pagination {

  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 50px;
  color: white;
}

.pagination a {
  border-radius: 10px;
  padding: 7px;
    border: 2px solid var(--white);
  text-decoration: none;
  color: var(--white);
}

.pagination a:hover {
  color: var(--hover);
  transition: 0.3s ease;
  border: 2px solid var(--hover);
}