car-reaction.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}
@font-face {
  font-family: hemi;
  src: url(./assets/hemi\ head\ bd\ it.otf);
}
@font-face {
  font-family: contra;
  src: url(./assets/ContrailOne-Regular.ttf);
}
@font-face {
  font-family: dash;
  src: url(./assets/Dashhorizon-eZ5wg.otf);
}
#sky {
  height: 100vh;
  width: 100%;
  /* Sky image background */
  background-image: url(./assets/sky.jpg);
  background-size: cover;
  /* Center image horizontally and vertically */
  background-position: center;
  /* Enable positioning */
  position: relative;
  /* Hide overflow content */
  overflow-x: hidden;
  overflow-y: hidden;
  /* visibility: hidden; */
}

/* define road properties */
#road {
  height: 200px;
  width: 500%;
  display: block;
  background-image: url(./assets/road.jpg);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-repeat: repeat-x;
  animation: road 5s linear infinite;
}

/* Start keyframes for road animation */
@keyframes road {
  100% {
    transform: translateX(-3400px);
  }
}

/* adjusting the height and position of buildings */
#buildings {
  height: 250px;
  width: 500%;
  background-image: url(./assets/city.png);
  position: absolute;
  bottom: 200px;
  left: 0;
  right: 0;
  display: block;
  z-index: 1;
  background-repeat: repeat-x;
  animation: buildings 20s linear infinite;
}
/* buildings animation */
@keyframes buildings {
  100% {
    transform: translateX(-1400px);
  }
}
#car {
  width: 400px;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  position: absolute;
  z-index: 2;
}
#car img {
  width: 100%;
  animation: car 1s linear infinite;
}
@keyframes car {
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(1px);
  }
  0% {
    transform: translateY(-1px);
  }
}
#wheel {
  left: 50%;
  bottom: 178px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}
#wheel img {
  width: 72px;
  height: 72px;
  animation: wheel 1s linear infinite;
}
.back {
  position: absolute;
  left: -165px;
}
.front {
  position: absolute;
  left: 80px;
}
@keyframes wheel {
  100% {
    transform: rotate(360deg);
  }
}
#stop {
  position: absolute;
  /* top: 20%; */
  left: 30%;
  z-index: 3;
  visibility: hidden;
}
#stop img {
  width: 600px;
}
#reaction-time-box {
  position: absolute;
  top: 35%;
  left: 28%;
  font-size: 60px;
  color: purple;
  font-family: hemi;
  visibility: hidden;
  z-index: 3;
}
#gameplay {
  visibility: hidden;
}
#instructions {
  background: rgba(30, 161, 255, 0.6);
  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 70%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.7vh;
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;
  /* line-height: 28px; */
}
#heading {
  font-family: dash;
  font-size: 60px;
  text-decoration: underline;
  /* -webkit-text-stroke: 1px black; */
}
#text {
  font-family: contra;
  font-size: 18px;
  /* -webkit-text-stroke: 0.3px black; */
}
#highlight {
  color: yellow;
  font-weight: 500;
  /* -webkit-text-stroke: 0.1px black; */
}
#button {
  margin-top: 3vh;
  font-size: 18px;
  font-family: hemi;
  font-weight: 900;
  width: 190px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#button:hover {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  color: yellow;
}
#button:active {
  background-color: red;
}
#endBtn {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 60px;
  height: 60px;
  font-family: hemi;
  font-size: 16px;
  background: rgba(20, 153, 194, 0.5);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#endBtn:hover {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  color: yellow;
}
#endBtn:active {
  background-color: red;
}
#scoreDiv {
  background: rgba(30, 161, 255, 0.6);
  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 60%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5vh;
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;
  visibility: hidden;
}

#scoreBox {
  margin-top: 4vh;
  font-size: 35px;
  font-family: hemi;
}
#again {
  margin-top: 2vh;
  font-size: 18px;
  font-family: hemi;
  font-weight: 900;
  width: 190px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#again:hover {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  color: yellow;
}
#again:active {
  background-color: red;
}
@media (max-width: 450px) {
  #heading {
    font-size: 18px;
  }
  #text {
    font-size: 12px;
  }
  #instructions {
    padding-left: 10px;
    padding-right: 10px;
  }
  #road {
    height: 100px;
  }
  @keyframes road {
    100% {
      transform: translateX(-800px);
    }
  }
  #buildings {
    /* height: 200px; */
    bottom: 100px;
  }
  #car {
    width: 200px;
    bottom: 50px;
  }
  #wheel {
    bottom: 90px;
  }
  #wheel img {
    width: 36px;
    height: 36px;
  }
  .back {
    left: -82.5px;
  }
  .front {
    left: 40px;
  }
  #stop {
    top: 20%;
    left: 18%;
  }
  #stop img {
    width: 300px;
  }
  #scoreBox {
    font-size: 16px;
  }
  #reaction-time-box {
    font-size: 30px;
  }
}
@media (min-width: 450px) and (max-width: 750px) {
  #heading {
    font-size: 22px;
  }
  #text {
    font-size: 15px;
  }
  #instructions {
    padding-left: 10px;
    padding-right: 10px;
  }
  #road {
    height: 100px;
  }
  @keyframes road {
    100% {
      transform: translateX(-800px);
    }
  }
  #buildings {
    /* height: 200px; */
    bottom: 100px;
  }
  #car {
    width: 200px;
    bottom: 50px;
  }
  #wheel {
    bottom: 90px;
  }
  #wheel img {
    width: 36px;
    height: 36px;
  }
  .back {
    left: -82.5px;
  }
  .front {
    left: 40px;
  }
  #stop {
    top: 15%;
    left: 10%;
  }
  #stop img {
    width: 400px;
  }
  #scoreBox {
    font-size: 16px;
  }
  #reaction-time-box {
    font-size: 35px;
  }
}
@media (min-width: 750px) and (max-width: 1140px) {
  #heading {
    font-size: 30px;
  }
  #text {
    font-size: 20px;
  }
  #instructions {
    padding-left: 10px;
    padding-right: 10px;
  }
  #road {
    height: 100px;
  }
  @keyframes road {
    100% {
      transform: translateX(-800px);
    }
  }
  #buildings {
    /* height: 200px; */
    bottom: 100px;
  }
  #car {
    width: 200px;
    bottom: 50px;
  }
  #wheel {
    bottom: 90px;
  }
  #wheel img {
    width: 36px;
    height: 36px;
  }
  .back {
    left: -82.5px;
  }
  .front {
    left: 40px;
  }
  #stop {
    top: 15%;
    left: 25%;
  }
  #stop img {
    width: 500px;
  }
  #scoreBox {
    font-size: 18px;
  }
  #reaction-time-box {
    font-size: 40px;
  }
}