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

body {
  height: 100vh;
}

img {
  width: 100%;
  height: calc(100vh - 132px);
  object-position: center;
}

.icon-nav {
  border-radius: 50%;
}
.case {
  display: none;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    101deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9734023876404494) 22%,
    rgba(86, 60, 126, 1) 77%,
    rgba(0, 7, 65, 1) 100%
  );
}

.monitor {
  display: none;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    101deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9734023876404494) 22%,
    rgba(86, 60, 126, 1) 77%,
    rgba(0, 7, 65, 1) 100%
  );
}

/*! Navbar */

.navbar {
  background: rgb(255, 0, 71);
  background: linear-gradient(
    101deg,
    rgba(255, 0, 71, 1) 0%,
    rgba(95, 198, 19, 0.9734023876404494) 0%,
    rgba(3, 0, 110, 1) 85%
  );
}

.renk1 {
  color: rgba(255, 255, 255, 0.945);
}

.renk1:hover {
  color: red;
}

.renk2 {
  color: rgba(255, 255, 255, 0.774);
}
.renk2:hover {
  color: red;
}
.renk3 {
  color: rgba(255, 255, 255, 0.699);
}
.renk3:hover {
  color: red;
}
.renk4 {
  color: rgba(255, 255, 255, 0.623);
}
.renk4:hover {
  color: red;
}
.renk5 {
  color: rgba(255, 255, 255, 0.548);
}
.renk5:hover {
  color: red;
}

/* ! MAİN */

.img-main {
  position: relative;
}
.main-icon1 {
  position: absolute;
  color: orange;
  right: 20%;
  top: 26%;
  font-size: 20px;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.main-icon1 i {
  position: relative;
}
.icon1-content {
  position: absolute;
  background-color: rgba(128, 128, 128, 0.418);
  left: -900%;
  height: 200px;
  display: none;
  overflow-y: scroll;
  text-align: center;
  border-radius: 25px;
  padding: 2px;
}
.icon1-content::-webkit-scrollbar {
  display: none;
}
.icon1-content li h2 {
  color: goldenrod;
}
.icon1-content li p {
  color: white;
  font-size: 13px;
}

.main-icon2 {
  position: absolute;
  color: orange;
  left: 49%;
  top: 26%;
  font-size: 20px;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.main-icon2 i {
  position: relative;
}
.icon2-content {
  position: absolute;
  background-color: rgba(128, 128, 128, 0.418);
  left: -450%;
  width: 200px;
  height: 200px;
  display: none;
  overflow-y: scroll;
  text-align: center;
  border-radius: 25px;
  padding: 2px;
}
.icon2-content::-webkit-scrollbar {
  display: none;
}
.icon2-content li h2 {
  color: goldenrod;
}
.icon2-content li p {
  color: white;
  font-size: 13px;
}

/* * MAİN */

/* !CASE */

.case-img {
  position: relative;
}
.ekrankarti {
  border: 3px solid green;
  width: 56%;
  height: 21%;
  position: absolute;
  left: 13%;
  top: 48%;
  opacity: 0;
  overflow-y: scroll;
  cursor: pointer;
  padding: 5px;
  transition: 1s ease all;
  animation: borderAnimation1 3s infinite alternate;
  border-radius: 5px;
}
.ekrankarti::-webkit-scrollbar {
  display: none;
}
.ekrankarti:hover {
  opacity: 1;
  box-shadow: 1px 1px 5px 1px green;
}
.ekrankarti p {
  display: none;
  color: white;
}
.ekrankarti span {
  color: red;
}

@keyframes borderAnimation1 {
  0% {
    border-color: rgb(0, 161, 0);
  }
  50% {
    border-color: rgb(2, 109, 2);
  }
  100% {
    border-color: rgb(1, 77, 1);
  }
}

.ram {
  border: 3px solid rgba(255, 255, 0, 0.616);
  width: 4.5%;
  height: 23%;
  position: absolute;
  left: 45%;
  top: 26%;
  opacity: 0;
  overflow-y: scroll;
  cursor: pointer;
  padding: 5px;
  transition: 1s ease all;
  animation: borderAnimation2 3s infinite alternate;
  border-radius: 5px;
}
.ram:hover {
  opacity: 1;
  box-shadow: 1px 1px 5px 1px yellow;
}
.ram::-webkit-scrollbar {
  display: none;
}

.ram span {
  color: red;
}

.ram p {
  display: none;
  color: white;
}

@keyframes borderAnimation2 {
  0% {
    border-color: rgba(255, 255, 0, 0.616);
  }
  50% {
    border-color: yellow;
  }
  100% {
    border-color: rgba(255, 255, 0, 0.616);
  }
}

.cpu {
  border: 3px solid rgba(255, 255, 0, 0.616);
  width: 15%;
  height: 19%;
  position: absolute;
  left: 27%;
  top: 26%;
  opacity: 0;
  overflow-y: scroll;
  cursor: pointer;
  padding: 5px;
  transition: 1s ease all;
  animation: borderAnimation5 3s infinite alternate;
  border-radius: 5px;
}
.cpu::-webkit-scrollbar {
  display: none;
}
.cpu:hover {
  opacity: 1;
  box-shadow: 1px 1px 5px 1px rgb(255, 51, 0);
}
.cpu p {
  display: none;
  color: white;
}
.cpu span {
  color: red;
}

@keyframes borderAnimation5 {
  0% {
    border-color: rgba(255, 60, 0, 0.616);
  }
  50% {
    border-color: rgb(255, 0, 0);
  }
  100% {
    border-color: rgba(255, 72, 0, 0.616);
  }
}

.fan {
  border: 3px solid rgba(255, 255, 0, 0.616);
  width: 64%;
  height: 8%;
  position: absolute;
  left: 15%;
  top: 14%;
  opacity: 0;
  overflow-y: scroll;
  cursor: pointer;
  padding: 5px;
  transition: 1s ease all;
  animation: borderAnimation4 3s infinite alternate;
}
.fan::-webkit-scrollbar {
  display: none;
}
.fan:hover {
  opacity: 1;
  box-shadow: 1px 1px 5px 1px rgb(68, 0, 255);
}
.fan p {
  display: none;
  color: white;
}
.fan span {
  color: red;
}

@keyframes borderAnimation4 {
  0% {
    border-color: rgba(38, 0, 255, 0.616);
  }
  50% {
    border-color: rgb(98, 0, 255);
  }
  100% {
    border-color: rgba(47, 0, 255, 0.616);
  }
}
.icon-nav {
  border-radius: 50%;
}

.psu {
  border: 3px solid rgba(255, 255, 0, 0.616);
  width: 22%;
  height: 12%;
  position: absolute;
  left: 13%;
  top: 77%;
  opacity: 0;
  overflow-y: scroll;
  cursor: pointer;
  padding: 5px;
  transition: 1s ease all;
  animation: borderAnimation3 3s infinite alternate;
}

.psu::-webkit-scrollbar {
  display: none;
}
.psu:hover {
  opacity: 1;
  box-shadow: 1px 1px 5px 1px rgb(0, 204, 255);
}
.psu p {
  display: none;
  color: white;
}
.psu span {
  color: red;
}

@keyframes borderAnimation3 {
  0% {
    border-color: rgba(0, 183, 255, 0.616);
  }
  50% {
    border-color: rgb(0, 119, 255);
  }
  100% {
    border-color: rgba(0, 195, 255, 0.616);
  }
}
.icon-nav {
  border-radius: 50%;
}

/*! MONİTOR */
.monitor-img {
  position: relative;
}

.mbtn1 {
  position: absolute;
  top: 13%;
  left: 5%;
  width: 25%;
}

.mbtn2 {
  position: absolute;
  top: 25%;
  left: 5%;
  width: 25%;
}
.mbtn3 {
  position: absolute;
  top: 37%;
  left: 5%;
  width: 25%;
}
.mbtn4 {
  position: absolute;
  top: 49%;
  left: 5%;
  width: 25%;
}
.mbtn5 {
  position: absolute;
  top: 61%;
  left: 5%;
  width: 25%;
}

.lcd-txt {
  display: none;
  position: absolute;
  width: 54%;
  height: 60.8%;
  top: 39%;
  left: 68.4%;
  transform: translate(-50%, -50%);
  color: white;
  overflow-y: scroll;
  text-align: center;
}

.lcd-txt span {
  color: red;
}

.lcd-txt::-webkit-scrollbar {
  display: none;
}

.led-txt {
  display: none;
  position: absolute;
  width: 54%;
  height: 60.8%;
  top: 39%;
  left: 68.4%;
  transform: translate(-50%, -50%);
  color: white;
  overflow-y: scroll;
  text-align: center;
}

.led-txt span {
  color: red;
}

.led-txt::-webkit-scrollbar {
  display: none;
}

.oled-txt {
  display: none;
  position: absolute;
  width: 54%;
  height: 60.8%;
  top: 39%;
  left: 68.4%;
  transform: translate(-50%, -50%);
  color: white;
  overflow-y: scroll;
  text-align: center;
}

.oled-txt span {
  color: red;
}

.oled-txt::-webkit-scrollbar {
  display: none;
}

.crt-txt {
  display: none;
  position: absolute;
  width: 54%;
  height: 60.8%;
  top: 39%;
  left: 68.4%;
  transform: translate(-50%, -50%);
  color: white;
  overflow-y: scroll;
  text-align: center;
}

.crt-txt span {
  color: red;
}

.crt-txt::-webkit-scrollbar {
  display: none;
}

.curved-txt {
  display: none;
  position: absolute;
  width: 54%;
  height: 60.8%;
  top: 39%;
  left: 68.4%;
  transform: translate(-50%, -50%);
  color: white;
  overflow-y: scroll;
  text-align: center;
}

.curved-txt span {
  color: red;
}

.curvet-txt::-webkit-scrollbar {
  display: none;
}

/*! MONİTOR */

/* !footer */

.footer {
  background: rgb(255, 0, 71);
  background: linear-gradient(
    101deg,
    rgba(255, 0, 71, 1) 0%,
    rgba(3, 0, 110, 1) 0%,
    rgba(14, 24, 99, 1) 45%,
    rgba(95, 198, 19, 0.9734023876404494) 100%
  );
}