@import url("https://fonts.googleapis.com/css2?family=Crete+Round:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Teko&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");

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

body {
  background-color: rgb(34, 40, 49);
}

.navigation {
  display: flex;
  width: 100vw;
  height: 10vh;
  background-color: rgb(27, 32, 39);
  color: rgb(214, 90, 49);
  font-family: Crete Round;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}

.navigation:hover {
  box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 6px;
  transition: 0.4s;
}

.navigation .logo {
  margin-left: 30px;
  cursor: pointer;
  user-select: none;
  height: 4vh;
}

.button {
  align-items: center;
  appearance: none;
  background-color: #222831;
  border-radius: 20px;
  border-style: none;
  box-sizing: border-box;
  color: rgb(238, 238, 238);
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 2.6vh;
  height: 6vh;
  justify-content: center;
  letter-spacing: 0.25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 0px 4vh;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 15ms linear 30ms, background-color 0.3s,
    transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  user-select: none;
  touch-action: manipulation;
  width: auto;
  will-change: transform, opacity;
  z-index: 0;
  margin-left: auto;
  margin-right: 20px;
  transition: 0.5s;
}

.button:focus {
  background: rgb(14, 95, 28);
  color: rgb(238, 238, 238);
}

.button:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
    rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
  background-color: #2d3541;
  transition: 0.5s;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 90vh;
  padding: 10px;
}

.item,
.item-4 {
  display: flex;
  width: 32vw;
  height: calc(45vh - 20px);
  background-color: rgb(27, 32, 39);
  cursor: pointer;
  border-radius: 20px;
  transition: 0.5s;
}

.item-4 {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 2vh;
  cursor: default;
}

.item:hover,
.item-4:hover {
  box-shadow: #111015 0px 1.5vh 2px;
  transform: translateY(-1.5vh);
  transition: 0.5s;
}

#speedometer {
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 5px rgba(5, 5, 5, 0.543);
  background-image: url("./assets/speedometer-2.png");
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  position: relative;
}
#speedometer #needle {
  width: 3px;
  height: 8vh;
  border-radius: 5px;
  background-color: #1a1ab1;
  position: absolute;
  top: 25%;
  left: 50%;
  z-index: 111;
  transform-origin: bottom;
  transform: rotate(-134deg);
  transition: 1s;
}
#point {
  width: 2.5vh;
  height: 2.5vh;
  position: absolute;
  border-radius: 50%;
  bottom: -1vh;
  left: -1vh;
  background-color: #180285;
}

#speedometer-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.hız-mod2 {
  display: flex;
  width: 25vh;
  height: 25vh;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: Orbitron;
  font-style: italic;
  font-size: 5vh;
  color: white;
  background: radial-gradient(
    circle,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 121, 0.6) 35%,
    rgba(0, 81, 255, 0.5) 100%
  );
  box-shadow: 0px 0px 10px 5px rgba(9, 9, 121, 0.6);
  z-index: 1;
  animation: 0s vibrate linear infinite;
}

model-viewer {
  width: 100%;
  height: 100%;
}

model-viewer::part(default-progress-bar) {
  width: 0;
}

.item-4 .child-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222831;
  height: 16vh;
  border-radius: 5px;
  width: 14.5vw;
  cursor: pointer;
  transition: 0.5s;
}

.item-4 .child-item:hover {
  box-shadow: #111015 0px 1vh 2px;
  transform: translateY(-1vh);
  transition: 0.5s;
}

.battery_text {
  position: relative;
  top: -5vh;
  font-family: Anton;
  font-size: 3vh;
  padding: 5px 15px 5px 15px;
  border-radius: 10px;
  height: min-content;
}

.green {
  color: rgb(131, 255, 48);
}

.yellow {
  color: rgb(198, 255, 75);
}

.orange {
  color: rgb(255, 165, 75);
}

.red {
  color: rgb(255, 75, 75);
}

.bg-green {
  box-shadow: rgba(141, 255, 128, 0.618) 0px 30px 60px -12px inset,
    rgba(0, 255, 4, 0.3) 0px 18px 36px -18px inset;
}

.bg-red {
  box-shadow: rgba(255, 128, 128, 0.618) 0px 30px 60px -12px inset,
    rgba(255, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.bg-yellow {
  box-shadow: rgba(242, 255, 128, 0.618) 0px 30px 60px -12px inset,
    rgba(183, 255, 0, 0.3) 0px 18px 36px -18px inset;
}

.bg-orange {
  box-shadow: rgba(255, 202, 128, 0.618) 0px 30px 60px -12px inset,
    rgba(255, 196, 0, 0.3) 0px 18px 36px -18px inset;
}

.item-4 .child-item img[src="./assets/volt.png"] {
  height: 50%;
  margin-left: 5px;
}

.item-4 .child-item img[src="./assets/termo.png"] {
  height: 50%;
  margin-left: 5px;
}

.item-4 .child-item img[src="./assets/route.png"] {
  height: 60%;
  margin-left: 10px;
}

.item-4 .child-item span {
  font-size: 5.5vh;
  font-family: Teko;
}

.item img[src="./assets/map.png"] {
  width: 40%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.coordinates {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 3.4vh;
  color: #f8e0d8;
  font-family: Anton;
}

#user-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#user {
  margin: 3vh;
  color: rgb(44, 44, 172);
  font-family: "Courier New", Courier, monospace;
}

#engine-temperature {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.item img[src="./assets/motor sıcaklığı.png"] {
  height: 50%;
}

#engine-temperature span {
  font-size: 8vh;
  font-family: Teko;
  color: #ff1e1e;
  margin-left: 3vh;
}

@media only screen and (max-width: 430px) {
  .navigation .logo {
    margin-left: 30px;
    cursor: pointer;
    user-select: none;
    height: 3vh;
  }
  .button {
    align-items: center;
    appearance: none;
    background-color: #222831;
    border-radius: 20px;
    border-style: none;
    box-sizing: border-box;
    color: rgb(238, 238, 238);
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 2vh;
    height: 6vh;
    justify-content: center;
    letter-spacing: 0.25px;
    line-height: normal;
    max-width: 100%;
    overflow: visible;
    padding: 0px 2vh;
    position: relative;
    text-align: center;
    text-transform: none;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 15ms linear 30ms, background-color 0.3s,
      transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    user-select: none;
    touch-action: manipulation;
    width: auto;
    will-change: transform, opacity;
    z-index: 0;
    margin-left: auto;
    margin-right: 20px;
    transition: 0.5s;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 90vh;
    padding: 5px;
    padding-top: 15px;
  }
  .item,
  .item-4 {
    display: flex;
    width: 90vw;
    height: 40vh;
    background-color: rgb(27, 32, 39);
    user-select: none;
    cursor: default;
    border-radius: 20px;
    margin-bottom: 20px;
    transition: 0.5s;
  }
  .item-4 {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    cursor: default;
  }
  .item-4 .child-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222831;
    height: 16vh;
    border-radius: 5px;
    width: 39vw;
    cursor: default;
    transition: 0.5s;
  }
  .item-4 .child-item img[src="./assets/volt.png"] {
    height: 40%;
    margin-left: 5px;
  }

  .item-4 .child-item img[src="./assets/termo.png"] {
    height: 40%;
  }

  .item-4 .child-item img[src="./assets/route.png"] {
    height: 40%;
    margin-left: 10px;
  }

  .item-4 .child-item span {
    font-size: 4vh;
    font-family: Teko;
  }
  .battery_text {
    position: relative;
    top: -5vh;
    font-family: Anton;
    font-size: 2.7vh;
    padding: 5px 15px 5px 15px;
    border-radius: 10px;
    height: min-content;
  }

  .item img[src="./assets/map.png"] {
    user-select: none;
    width: 35vw;
    content: url(./assets/map-2.png);
  }

  .coordinates {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 2.7vh;
    color: #f8e0d8;
    font-family: Anton;
  }
  #engine-temperature {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .item img[src="./assets/motor sıcaklığı.png"] {
    height: 40%;
  }

  #engine-temperature span {
    font-size: 7vh;
    font-family: Teko;
    color: #ff1e1e;
    margin-left: 3vh;
  }
}