@font-face {
  font-family: 'Nasa';
  src: url('./fonts/nasalization-rg.ttf') ; 
}
@font-face {
  font-family: 'Spantaran';
  src: url('./fonts/Spantaran (demo).ttf') ; 
}
@font-face {
  font-family: 'Race Sport';
  src: url('./fonts/Race Sport.ttf') ; 
}
* {
  margin: 0;padding: 0;
  font-family: "Roboto", sans-serif;
}
body {
  overflow-y: scroll;
}

body > * {
  overflow-y: visible;
}

html{scroll-behavior: smooth;}
.sidebar {
  width: 180px;position: fixed;top: 4vw;bottom:2vw;left:0;cursor: pointer;
  background-color: #111827;
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  align-items: center;transition: 1s;
}
.sidebar .collapsed{transform: translateX(-180px);}
.sidebar-top,
.sidebar-center,
.sidebar-bottom {
  display: flex;
  align-items: center;
  width: 80%;
  border-bottom: 1px solid #4b4b4b;
  padding: 10px 0;
  margin-bottom: 10px;
}

.sidebar-center {
  padding: 0;justify-content: center;
}
.sidebar-bottom {
  justify-content: center;
  border: none;
}

.logo {
  font-size: 24px;
 
  cursor: pointer;
  
}
.sidebar-top:nth-child(1){margin-left:16px;}
.brand {
  font-weight: bold;margin-left:12px;
  cursor: pointer;
}

.list {
  list-style: none;
  padding: 0;
  width: 100%;
}

.list-item {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}

.list-item>i {
 margin-right: 10px;;
  font-size: 20px;
}

.sidebar-top>i {
  margin-right: 0px;
  font-size: 20px;
}

.list-item.active,
.list-item:hover {
  background-color: #374151;
  color: white;
}

.color-box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #9ca3af;
  margin-right: 15px;
  cursor: pointer;
}

.dark {
  background-color: #111827;
}

.night {
  background-color: #312e81;
}

.light {
  background-color: #f3f4f6;
}

.sidebar.night {
  background-color: #312e81;
  color: #b4bbc7;
}

.list-item.night.active {
  background-color: #4338ca;
}

.sidebar.light {
  background-color: #f3f4f6;
  color: #111827;
}

.list-item.light.active {
  background-color: #d1d5db;
  color: #111827;
}

@media only screen and (max-width: 768px) {
  .sidebar {
    width: 50px;
  }
  .brand,
  .list-item-text {
    display: none;
  }
}


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

.container {
  display: flex;transition: 2s;position: absolute;background:linear-gradient(to right, #bbb,#fff);top:4vw;
  width:260px;font-weight:bold;;;
  left:180px;flex-direction: column;padding:40px;z-index:1;position: relative;
}
.container input,label,select,input[type="range"]{display: block;}


.search{
  padding: 10px;
  width: 200px;
  border: 1px solid gray;
}

h1{
  font-size: 30px;
  color: #555;
  font-weight: 300;
}


.cats{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat{
  cursor: pointer;
  font-size: 20px;
  font-weight: 300;
  padding: 5px;
}
.sorting{position: fixed;top:4vw;left:520px;background:rgb(30, 0, 255);right:2.55vw;height: 2.5vw;
  display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;color:#ddd;
text-transform: uppercase;}
.sorting>div{transition: .2s;z-index:99;padding:.3em 1em;cursor: pointer;}
.sorting>div:hover{color:white;padding:.6em 1em;letter-spacing:4px; transform:scale(.8);background:rgb(22, 0, 192);}
.content {
  background:#fff;position: fixed;top:6.6vw;bottom: 2vw;;
  overflow: auto;transition: 2s;left:520px;width:fit-content
}
.notebook-grid {
  display: grid;gap:15px;
  grid-template-columns: repeat(3, 1fr); /* Adjust the number of columns as needed */
 /* Adjust the gap between items */
}
.notebook-item {
  display: grid;width: 200px;word-break: break-all;
  grid-template-columns: auto;
  grid-gap: 5px;
  border: 1px solid #eee;border-radius: 10px;box-shadow: 1px 1px 2px #ccc;
  padding: 10px;background: linear-gradient(white,white,#eee);
  border-top: 20px solid #eee;padding-bottom: 15px;
}

.property-name {
  font-weight: bold;opacity:.6;text-transform: uppercase;font-size: .8em;
}
.buy{font-weight: bold;;padding: .5em 1em;color:#ddd;margin-top: 10px;font-size: 1em;
  background: rgb(36, 91, 255);border-radius: .3em;text-align: center;cursor: pointer;z-index: 9;
transition: .3s;width:30%;margin:1em auto;margin-bottom: 0em;box-shadow: 0px 0px 16px 1px #3f6cff;}
  .buy:hover{background: rgb(0, 47, 188);color:white;box-shadow: 0px 0px 20px 3px #2457ff;}
  .buy:hover .fa-basket-shopping{color: white;}
.property-value {
  margin-left: 10px;
}
.notebook-property:first-child .property-value{display: none;}
.notebook-property:first-child .property-name{display: none;}
.notebook-property:first-child{z-index: 1;}
.notebook-image{margin-left: 20px;transform: scale(1.0);cursor: pointer;z-index: 1;margin-top: 0px;}
.notebook-property:nth-child(2) .property-name{display: none;}
.notebook-property:nth-child(2) .property-value{margin-left: 0px;font-weight: bold;
margin-bottom: 10px;color:rgb(0, 0, 130);z-index: 99;transition: .3s;}
.notebook-property:last-child{font-weight: bold;font-size: 1.3em;}
.notebook-property:nth-child(2) .property-value:hover{color:rgb(38, 0, 228)}
.notebook-property:last-child .property-value{font-weight: bold;font-size: 1.3em;color:red !important}
.products{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product{
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

img{
  width: 150px;
  height: 150px;
  object-fit: contain; transition: transform .5s;
}
img:hover{transform:scale(1.1) translateY(-3px)}
.name{
  font-weight: 300;
}
footer{
  width: 100vw;height: 2vw;background: black;bottom: 0;left: 0;position: fixed;
  display: flex;justify-content: center;align-items: center;z-index: 99;
}
footer p{color:white;font-size: .8em;opacity:.6;font-weight: 100;}
header{background: black;width: 100vw;height: 4vw;position: fixed;top:0;left: 0;z-index:99;
display: flex;justify-content:flex-start;align-items: center;color:white;font-size: 1.5em;
letter-spacing: 4px;cursor: pointer;overflow: hidden;
padding-left: 30px;}
.meters input,p{display: inline-block;}

.container input,select{margin-bottom:20px;font-size: 1em;font-weight: 500;}
.container input,.container select option{font-weight: 100 !important;}
#total{margin-top: 35px;}
#resultCount{margin-top: 8px;margin-bottom: 20px;}
#resultCount2{margin-left: 233px;position: absolute;margin-top:-32px;font-size: 1em;
  color:rgb(0, 52, 207);;width:60;height: 20px;position: fixed;display: inline-block;
vertical-align: middle;text-align: center;}
#info{margin-left: -25px;position: absolute;margin-top:-32px;font-size: .9em;
  color:rgb(0, 134, 2);;width:fit-content;height: fit-content; position: absolute;display: inline-block;
vertical-align: middle;text-align: left;opacity:1;text-align: left;margin-bottom: 20px;
line-break:auto;}
#infos{display: inline;font-size: .6em;text-align: left;margin-left: 30px;color:#aaa;
  animation: updown 28s linear infinite;}
@keyframes updown{
  from{transform: translateY(-90px);}
  to{transform: translateY(90px);}
}
.fa-basket-shopping{float: left;margin-right: 5px;color:#ddd}
.fa-basket-shopping:hover{float: left;margin-right: 5px;color:#fff}
.fa-star{display: inline-block;margin-bottom:.5em;color:rgb(255, 191, 0);
  z-index: 99;transition: .3s;}
.fa-star:hover{color:rgb(255, 234, 0);transform: scale(1.3);z-index: 99;}
.starsCount{margin-left: 5px;font-size: .9em;color:#999}

/* Style the track */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 30px;
  border-radius: 25px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Style the thumb */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 40px;
  border-radius: 5%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 40px;
  border-radius: 5%;
  background: #4CAF50;
  cursor: pointer;
}