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

html,
body {
  font-size: 10px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

::selection {
  background-color: #e60313;
  color: #ffff;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  background-color: #f3f3f3;
}

.app-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  background-color: #ffff;
  width: 100%;
  padding: 1rem;
  box-shadow: 0 0 1rem 1rem rgba(0, 0, 0, 0.071);
}

.logo {
  display: block;
  width: 22rem;
}

h1 {
  text-align: center;
  font-size: 4rem;
  font-weight: 300;
  margin-top: 10rem;
  margin-bottom: 2rem;
}

.container {
  padding: 0 3rem;
}

.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1em;
}

.scooter,
.total,
.total-scooter,.inokim-hol, .kimi-hol {
  font-size: 2rem;
  background-color: #ffff;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
  padding: 3rem;
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

h2 {
  font-size: 3rem;
  font-weight: 300;
}

p {
  color: #e60313;
  font-size: 2.2rem;
  font-weight: 500;
}

.kimi-hol{
  width: 50%;
}

.inokim-hol{
  width: 50%;
}

.text-red{
  font-weight: 500;
  color: #e60313;
}

.second_headline{
  text-align: center;
  margin: 2rem 0;
  font-size: 4rem;
  color: #e60313;
  font-weight: 500;
}

.section2{
  margin-bottom: 4rem;
}



/*********
MOBILE
**********/

@media(max-width: 600px){
  html,
body {
  font-size: 8px;
}
h1 {
font-size: 2.5rem;
  margin-top: 10rem;
  margin-bottom: 0rem;
}
.container{
  padding: 0;
}
.d-flex{
  flex-direction: column;
  width: 100%;
}
.scooter,
.total,
.total-scooter,.inokim-hol, .kimi-hol{
  width: 40rem;
}


}