body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   /* display: flex; */
   /* flex-direction: column; */
   align-items: center;
   margin-top: 1rem;
 }

 .app {
   /* min-width: 300px;
      max-width: 700px; */
   border-radius: 2px;
   padding: 20px;
   font-size: 1.125rem;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
     0 6px 6px rgba(0, 0, 0, 0.23);
 }

 h1 {
   font-size: 1.5rem;
 }


 .input-interval {
   width: 2em;
 }

 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
 }

 button {
   height: 32px;
   padding: 0 10px;
   background: #3182ce;
   color: white;
   border: none;
   transition: all 0.3s;
 }

 button:hover {
   background: #2a4365;
   transition: all 0.3s;
 }

 select {
   flex-grow: 1;
   padding: 4px 15px;
   /* Adds space inside */
   font-size: 16px;
   /* border: 2px solid #ccc; */
   /* border-radius: 5px; */
   /* Rounded corners */
   background-color: #f9f9f9;
   color: #333;
   cursor: pointer;
 }

 .settings {
   margin-bottom: 16px;

   &>* {
     display: flex;
     margin-top: 8px;
     gap: 8px;

     input {
       flex: 1;
       padding: 0.4rem;
       padding-left: 0.5rem;
       min-width: 0;
     }
   }
 }

 .row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 8px;

   list-style: none;
   padding: 0.5rem;
   border-radius: 2px;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

   &:not(.header):hover {
     cursor: pointer;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
       0 3px 6px rgba(0, 0, 0, 0.23);
   }

   &.header {
     background-color: gainsboro;
   }

   >*:first-child {
     word-break: break-all;
   }
 }

 .button-group {
   margin-top: 16px;
 }