minnan-tv/src/assets/scss/main.scss

html, body {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

:root {
  --color-primary: #8e6c4f;
  --color-primary2: #aa560d;
  --color-secondary: #9d613d;
  --color-light-bg: #f8efe1;
  --color-header1: rgba(142, 108, 79, 0);
  --color-header2: rgba(142, 108, 79, 0.7);
  --color-header3: rgba(142, 108, 79, 1);
  --color-border: #000;
  --color-text: #333;
  --color-text-light: #fff;
  --color-text-primary: #9d613d;
  --color-text-second: #563530;
  --color-divider: #ddd0c4;
}

main {
  width: 100%;
  height: 100vh;
  background-color: var(--color-light-bg);

  button {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    margin: auto;
    cursor: pointer;
    background-color: var(--color-light-bg);
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    outline: 8px solid var(--color-light-bg);
    color: var(--color-secondary);

    &:focus {
      outline: 8px solid var(--color-primary2);
    }
  }
  .carousel__next, .carousel__prev, .carousel__pagination-button {
    outline: none;
  }
}

.main-bg {
  background-size: cover;
  background-position: center;

  &.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;

    img {
      width: 100vw;
      height: 100vh;
      object-fit: cover;
    }
  }

  &1 {
    background-image: url('@/assets/images/Home/Background/1.jpg');
  }
  &2 {
    background-image: url('@/assets/images/Home/Background/2.jpg');
  }
  &3 {
    background-image: url('@/assets/images/Home/Background/3.jpg');
  }
  &4 {
    background-image: url('@/assets/images/Home/Background/4.jpg');
  }
  &5 {
    background-image: url('@/assets/images/Home/Background/5.jpg');
  }
  &6 {
    background-image: url('@/assets/images/Home/Background/6.jpg');
  }
}
.main-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .inner {
    position: relative;
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 6%;
    padding-bottom: 6%;

    &.fill {
      flex: 1 1 100%;
    }
  }
  &.absolute, .content.absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
}

.main-card {
  position: relative;
  background-size: cover;
  background-position: center;

  &.round {
    border-radius: 10px;
  }
  &.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-primary);
  
  &:hover, &:focus {
    transform: scale(1.05);
    z-index: 1;
  }

  &:focus {
    outline: 4px solid var(--color-primary);
  }
}
.main-any-button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  &:hover, &:focus {
    transform: scale(1.05);
    z-index: 1;
  }
  &:focus {
    outline: 4px solid var(--color-primary);
  }
}

.main-image-button {
  -webkit-user-select: none;
  user-select: none;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border-radius: 50%;

  &:active, &:focus {
    transform: scale(0.8);
  }
  &:focus {
    outline: 4px solid var(--color-primary);
  }
}

.main-map-maker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  span {
    padding: 0.1rem;
    font-size: 0.6rem;
    border-radius: 0.2rem;
    background-color: var(--color-light-bg);
    white-space: nowrap;

  }
}
.main-round-box {

  &.flat {
    padding: 0;
  }

  padding: 1vw;
  border-radius: 1vw;
  box-sizing: border-box;
  border: var(--color-primary) solid 3px;
  overflow: hidden;
}

hr {
  border-color: var(--color-divider);
  border-width: 1px;
}
h1, h2, h3, h4, h5 {
  margin-top: 0;
}



@media (max-width: 800px) {
  .main-content .inner {
    padding-left: 3%;
    padding-right: 3%;
  }
}
@media (max-height: 600px) {
  .main-content .inner {
    padding-top: 2%;
    padding-bottom: 2%;
  }
}