* {
  margin: 0;
  padding: 0;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  box-sizing: border-box;
}
a:link, a:visited {
    background-color: #f44336;
    border-radius: 20px;
    color: white;
    margin-top: 20px;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url(../images/background.png);
  background-position: center;
  background-size: cover;
  padding: 0 10%;
}

.background {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2%;
}

.gambar{
    max-width: 60%;
}
.content {
  position: absolute;
  text-align: center;
  display: flex;
  margin-top: -300px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.content-sponsor {
    position: absolute;
    text-align: center;
    display: flex;
    margin-top: 400px;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
  }
.content h1 {
  font-size: 80px;
  font-weight: 500;
}

.content h1 span {
  color: orangered;
}

.launch-timer {
  display: flex;
  gap: 25px;
  justify-content: center;
}
.launch-timer div {
  display: flex;
  flex-basis: 100px;
  flex-direction: column;
  align-items: left;
}
.launch-timer span {
  font-size: 20px;
}
.launch-timer p {
  font-size: 70px;
  margin-top: 15px;
}
.content button {
  background: transparent;
  border: 1.5px solid #fff;
  outline: none;
  padding: 12px 25px;
  color: #fff;
  display: flex;
  align-items: center;
  margin-top: 30px;
  font-size: 20px;
}
@media (max-width: 767px) {
  .content {
      width:85%;
  position: absolute;
  text-align: center;
  display: flex;
  margin-top: -300px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}  
.content h1 {
  font-size: 50px;
  font-weight: 600;
}
.launch-timer p {
  font-size: 50px;
  margin-top: 15px;
}
.gambar{
    max-width: 90%;
}
.content {
  position: absolute;
  text-align: center;
  display: flex;
  margin-top: -250px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.content-sponsor {
    position: absolute;
    text-align: center;
    display: flex;
    margin-top: 250px;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
  }
}
@media (max-width: 450px) {
  .content {
      width:85%;
  position: absolute;
  text-align: center;
  display: flex;
  margin-top: -300px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}  
.content h1 {
  font-size: 40px;
  font-weight: 600;
}
.launch-timer p {
  font-size: 40px;
  margin-top: 15px;
}
.gambar{
    max-width: 90%;
}
.content {
  position: absolute;
  text-align: center;
  display: flex;
  margin-top: -200px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.content-sponsor {
    position: absolute;
    text-align: center;
    display: flex;
    margin-top: 200px;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
  }
  
}