@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');



/* @import url('https://assets.gumroad.com/packs/static/19db990205089207b039.woff2'); */

:root {
  --sd-darkblue : #20124D;
  --sd-red : #E6354D;
}

* {
  cursor: none;
  user-select: none;
  overflow: hidden;
}

/* ———— HOME ———— */

.home-elements-container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#home-explanation-title {
  margin: 20px;
  font-family: 'IBM Plex Mono', monospace;
  /* background-color: black; */
  font-size: 3rem;
  height: auto;
  width: 40%;
  color: var(--sd-red);
  line-height: 4.6rem;
  text-align: center;
}

#link-to-game {
  margin: 20px;
  font-family: 'IBM Plex Mono', monospace;
  /* background-color: black; */
  color: white;
  padding: 3rem;
  font-size: 2.5rem;
  height: auto;
  background-color: var(--sd-red);
  border-radius: 2rem;
  text-decoration: none;
}

/* ———— GAME ———— */

body {
  width : 100vw;
  height: 100vh;

  background : url("../assets/space-background.gif") no-repeat center center / cover;
  background-color: #20124D;

}

main {
  display: flex;
}


#cursor {
  height: 50px;
  width: 50px;

  overflow: hidden;

  background : url("../assets/target-blue.png") no-repeat center center / cover !important;

  border-radius: 35%;

  position: absolute;

  top: 0;
  left: 0;
  z-index: 100;
}

.targeted {
  background : url("../assets/space-target.png") no-repeat center center / cover !important;
}

.pointThis {
  position:   absolute;
  width: 40px;
  height: 80px;

  /* background-color: green; */
  /* background-image: url("../assets/asteroid-animation.gif"); */
  background : url("../assets/asteroid-animation.gif") no-repeat center center / cover;
  transform-origin: center;
  z-index: 80;
}

.tasperdu {
  position: absolute;
  font-size: 8rem;
  margin: 100px;
  font-family: 'IBM Plex Mono', monospace;

  background-color: black;
  color: white;
}

.tasgagne {
  position: absolute;
  font-size: 8rem;
  margin: 100px;
  font-family: 'IBM Plex Mono', monospace;

  background-color: black;
  color: white;
}

.explosion {
  position: absolute;
  height: 100px;
  width: 100px;
  background : url("../assets/explosion.gif") no-repeat center center / cover;
  z-index: 95;

}

.displayNone {
  display: none !important;
}

#earth {
  transform-origin: 50%;
  width: 250px;
  height: 250Px;

  background-color: lime;
  border-radius: 50%;

  position: absolute;
  left: calc(50% - 125px);
  top: calc(90% - 125px);

  z-index: 90;
  background : url("../assets/earth.png") no-repeat center center / cover;
  z-index: 50;
}

#destroyedAsteroids {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2rem;
  color: var(--sd-red);
  z-index: 55;

}

/*  end-tab  */

#end-tab {
  width: 100%;
  height: 75vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.end-text{
  margin: 20px;
  font-family: 'IBM Plex Mono', monospace;
  /* background-color: black; */
  font-size: 4rem;
  height: auto;
  width: 40%;
  color: var(--sd-red);
  line-height: 4.6rem;
  text-align: center;


  z-index: 100;
}

#retry-button {
  margin: 20px;
  font-family: 'IBM Plex Mono', monospace;
  /* background-color: black; */
  color: white;
  padding: 3rem;
  font-size: 2.5rem;
  height: auto;
  background-color: var(--sd-red);
  border-radius: 2rem;
  text-decoration: none;

  z-index: 100;
}