/* Course: SENG 513 */
/* Date: NOV 12, 2023 */
/* Assignment 3 */
/* Name: Yunfan Yang */
/* UCID: 30067857 */

:root {
  --log-loglay-bg-original-width: 276px;
  --log-loglay-bg-original-height: 340px;
  --log-loglay-bg-size-ratio: 1.8;
  --log-loglay-bg-width: calc(var(--log-loglay-bg-original-width) * var(--log-loglay-bg-size-ratio));
  --log-loglay-bg-height: calc(var(--log-loglay-bg-original-height) * var(--log-loglay-bg-size-ratio));
}

ul {
  padding-inline-start: 30px;
}

.logs-wrapper {
  background-image: url("assets/Scroll3.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 30;
  height: var(--log-loglay-bg-height);
  width: var(--log-loglay-bg-width);
  padding: 9rem 4rem 9rem 4rem;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.logs-wrapper .title {
  font-size: 1.6rem;
  font-weight: 600;
}

.logs-wrapper .logs {
  overflow-y: auto;
}

.logs-wrapper .buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 5.4rem;
}

.logs-wrapper .buttons button {
  padding: 0.5rem 0.8rem;
  background-color: #903B2F;
  border: #5B2934 0.32rem solid;
  border-radius: 1rem;
  font-size: 1.1rem;
  transition: all 0.2s ease-in-out;
  color: white;
}

@media (max-width: 960px) {
  :root {
      --log-loglay-bg-size-ratio: 1.4;
  }

  .logs-wrapper .title {
    margin-bottom: 0.1rem;
  }

  .logs-wrapper {
    padding: 7.4rem 3rem 7rem 3rem;
    gap: 0.2rem;
  }

  .logs-wrapper .buttons {
    bottom: 3.7rem;
  }

  .logs-wrapper .buttons button {
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  :root {
    --log-loglay-bg-size-ratio: 1.2;
  }

  .logs-wrapper {
    padding: 3.1rem 2rem 5rem 2rem;
    gap: 1.2rem;
    font-size: 0.8rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .logs-wrapper .title {
    font-size: 1.0rem;
  }

  .logs-wrapper .buttons {
    bottom: 3rem;
  }

  .logs-wrapper .buttons button {
    font-size: 0.7rem;
  }
}