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

html{
  font-size: 62.5%;
  font-family: 'Poppins', sans-serif;
}

body{
  background-color: #EAEAE4;
}

/*********** GENERAL/REUSABLE *************/

.body-container{
  max-width: 120rem;
  margin: 3rem auto;
  padding: 1rem 2rem;
  text-align: center;
}

.app-container{
  max-width: 60rem;
  margin: 0 auto;
}

.heading{
  font-size: 4.8rem;
}

.secondary-heading{
  font-size: 3rem;
}

/******************* HEADER **********************/

.header{
  margin-bottom: 4rem;
}

.heading span{
  color: #9E0B0F;
}

.header-description{
  font-size: 2rem;
  color: #535353;
  margin-top: 2rem;
}

.header-description span {
  font-weight: 600;
}

/******************** CHOOSE YOUR DICE SECTION ********************/


.dice-options{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 3rem;
  row-gap: 1rem;
  margin-top: 2rem;
}

.dice-image{
  width: 5rem;
  margin: 0 auto;
}

.dice-choice input{
  display: none;
}


.dice{
  background-color: #fff;
  width: 100%;
  padding: 4px 10px;
  font-size: 2rem;
  font-weight: 600;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: all 0.3s;
}

.dice-choice input:checked + .dice{
  background-color: #9E0B0F;
  color: #EAEAE4;
  transform: translate(5px, 5px);
}

.rolling-options{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3rem;
}

.modifier-options{
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
}

.modifier-counter{
  color:#9E0B0F;
}

.counter-buttons, .clear-log-button{
  padding: 2px 8px;
  background-color: #fff;
  font-size: 2rem;
  font-weight: 600;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: all 0.3s;
}

.counter-buttons:hover, .clear-log-button:hover{
  background-color: #9E0B0F;
  color: #EAEAE4;
  transform: translate(3px, 3px);
}

.adv-or-dis{
  text-align: left;
  font-size: 1.8rem;
}

/************** ROLLING SECTION *****************/

.rolling-results{
  margin-top: 3rem;
}

.rolling-button{
  margin-bottom: 2rem;
  padding: 1rem 5rem;
  background-color: #9E0B0F;
  color: #EAEAE4;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: all 0.2s;
}

.rolling-button:hover{
  transform: translate(3px, 3px);
}

.roll-result{
  font-size: 3rem;
  font-weight: 700;
  color: #9E0B0F;
}

.roll-result-info{
  font-size: 1.8rem;
}

.roll-adv-or-dis-info{
  font-size: 1.6rem;
}

.rolling-log-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}

.rolling-log-results{
  margin-top: 2rem;
  width: 100%;
  background-color: #fff;
  color: #000;
  font-size: 1.6rem;
  text-align: left;
  list-style: none;
  padding: 1rem 1rem;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 #000;
}

.rolling-log-results li {
  border-bottom: 1px solid #000;

}

.rolling-log-results img {
  width: 1.8rem;
  margin-right: 1rem;
  float: left;
}

.footer {
  margin: 4rem auto;
  max-width: 80%;
  font-size: 1.4rem;
  color: #535353;
}


/* Media query for screens with a maximum width of 768px (e.g., mobile devices) */
@media (max-width: 768px) {
  .body-container {
    padding: 1rem;
  }

  .heading {
    font-size: 3.2rem;
  }

  .secondary-heading {
    font-size: 2.4rem;
  }

  .dice-options {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0;
  }

  .dice-image {
    width: 3rem;
  }

  .dice-choice {
    font-size: 1.5rem;
  }

  .counter-buttons,
  .clear-log-button {
    padding: 4px 8px;
    font-size: 1.5rem;
  }

  .rolling-options{
  display: flex;
  flex-direction: column;
  gap:1.5rem;
  margin-top: 4.5rem;
}

.modifier-options{
  margin-bottom: 1.5rem;
}
}

/* Media query for screens with a minimum width of 769px (e.g., tablets and larger screens) */
@media (min-width: 769px) {
  .body-container {
    padding: 2rem;
  }

  .heading {
    font-size: 4.8rem;
  }

  .secondary-heading {
    font-size: 3rem;
  }

  .dice-options {
    grid-template-columns: repeat(6, 1fr);
  }

  .dice-image {
    width: 5rem;
  }

  .dice-choice {
    font-size: 2rem;
  }

  .counter-buttons,
  .clear-log-button {
    padding: 4px 8px;
    font-size: 2rem;
  }
}