* {
      box-sizing: border-box;
      font-family: "Roboto", sans-serif;
      -webkit-tap-highlight-color: transparent;
}

:root {
      --main-color: #F1D651;
      --main-color-2: #00DEAA;
      --main-color-3: #D7D7D7;
      --color-document: #ffffff;
      --color-document-2: #000000;

      --main-color-hover: #eedd85;
      --main-color-hover-2: #61d7bb;
      --main-color-hover-3: #c2c2c2;
}

body {
      background-color: var(--bg-document);
      color: var(--color-2-document);
      min-height: 100vh;
}

.body-container {
      display: flex; 
      flex-direction: column; 
      height: 100vh;
}

.header {
      background-color: #F1D651;
      height: 80px;
      padding: 0 5%;
      position: relative;
      z-index: 4;
}

.header-container {
      height: 100%;
      display: flex;
      align-items: center;
}

.logo a {
      color: var(--color-document);
      font-size: 40px;
      font-weight: bold;
      user-select: none;
      text-decoration: none;
}

/* main */

.main {
      display: flex;
      justify-content: center;
      width: 100%;
}

.div-history {
      margin: 1% 3%;
      width: 1500px;
}

.div-block-history {
      height: 100%;
      width: 100%;
}

.block-history {
      height: 450px;
      width: 100%;
      max-width: 1500px;
      background-color: var(--main-color-3);
      border-radius: 10px;
      text-align: right;
      padding: 10px;
      font-size: clamp(16px, 20px, 24px);
      overflow: auto;
}

.block-history::-webkit-scrollbar {
      width: 15px;
}

.block-history::-webkit-scrollbar-track {
      background-color: var(--main-color);
      border-radius: 0 10px 10px 0;
}

.block-history::-webkit-scrollbar-thumb {
      background-color: var(--main-color-2);
      border-radius: 10px;
}

.block-history::-webkit-scrollbar-thumb:hover {
      background-color: var(--main-color-hover-2);
}

.block-history h2 {
      color: var(--color-document-2);
      font-size: 24px;
      font-weight: bold;
      text-align: center;
}

.block-history p {

}

.block-history span {
      color: var(--main-color-2);
}

.block-history hr {
      border-color: var(--color-document-2);
}

.div-button-clear-history {
      display: flex;
      justify-content: center;
}

.button-clear-history {
      background-color: #FF3A3A;
      color: var(--color-document);
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 10px;
      font-size: clamp(20px, 24px, 28px);
      font-weight: bold;
      border: none;
      cursor: pointer;
      transition: background-color .3s ease;
}

.button-clear-history:hover {
      background-color: #ff6464;
}