/*************
* CALCULATOR
************/

#calculator {
  font-family: arial, sans-serif;
  border: 1px solid var(--mm-dark-brown);
  text-align: center;
  width: 100%;
}

.display {
  border: 1px solid var(--mm-dark-brown);
  padding: 10px;
}

.peach-display {
  background-color: var(--mm-peach);
  color: var(--mm-dark-brown);
}

.brown-display {
  background-color: var(--mm-dark-brown);
  color: #FECAE9;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.grid {
  display: grid;
}

.flex-left {
  display: flex;
  justify-content: left;
}

.flex-right {
  display: flex;
  justify-content: right;
}

.padding-top {
  padding-top: 10px;
}

.margin-top {
  margin-top: 5px;
}

select {
  background-color: var(--mm-blue);
  color: var(--mm-dark-brown);
  border: 1px solid var(--mm-dark-brown);
  border-radius: 5px;
  text-align: center;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
}

#calculator button {
  flex: 1 32.65%;
  padding: 15px;
  color: var(--mm-dark-brown);
  border: 1px solid var(--mm-dark-brown);
  border-radius: 0;
}

button:active {
  opacity: 80%;
}

.btn-blue {
  background-color: var(--mm-blue);
}

.btn-pink {
  background-color: var(--mm-pink);
}

button.back-btn {
  flex: 1 66%;
  background-color: var(--mm-peach);
}

.blinking_line {
  animation: blinker 1.5s steps(1,end) infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/*************
* GRAPHIC
************/

#graphic-container {
  font-size: 13px;
  font-family: Arial;
}

#graphic-container path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*************
* TABLE
************/

#table-container {
  overflow-x: scroll;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  border: 2px solid var(--mm-dark-brown);
  background-color: var(--mm-blue);
  color: var(--mm-yellow);
  text-align: center;
  margin: 0px auto;
  width: 100%;
}

table thead {
  background-color: var(--mm-light-brown);
}

table th,
table td {
  border: 2px solid var(--mm-dark-brown);
  padding: 8px;
}

table tr:nth-child(even) {
  background-color: var(--mm-pink);
  color: var(--mm-dark-brown);
}

.svg-container {
  display: inline-block;
}

/*************
* PIE CHART
************/

#piechart-container {
  /* center horizontally and vertically */
  text-align: center;
  align-content: center;
}

#piechart {
  width: 100%;
  aspect-ratio: 1/1;
}

svg > g > g.google-visualization-tooltip {
  pointer-events: none
}

/* tablets, landscape mobile -ish, and desktop */
@media only screen and (min-width: 600px) {

  /*************
  * CALCULATOR
  ************/

  #calculator,
  button {
    font-size: 2.3vw;
  }

  select {
    font-size: 1.8vw;
  }

  /*************
  * TABLE
  ************/

  table {
    font-size: 20px;
  } 
}

/* mobile -ish */
@media only screen and (max-width: 599px) {

  /*************
  * CALCULATOR
  ************/

  #calculator,
  button {
    font-size: 3.5vw;
  }

  select {
    font-size: 2.5vw;
  }

  /*************
  * TABLE
  ************/

  table {
    font-size: 14px;
  }
}