* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

@font-face {
  font-family: "cwTeXKai";
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot?#iefix)
      format("embedded-opentype"),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff2)
      format("woff2"),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff) format("woff"),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf)
      format("truetype");
}

.hidden {
  display: none;
}

/* All pages */
main {
  padding-top: 100px;
  text-align: center;
  font-family: Georgia, "cwTeXKai";
  z-index: 5;
}

button {
  font-family: Georgia;
}

/* Title */
[id$="_title"] {
  font-size: 50px;
  color: white;
}

/* nav bar always on top */
[class$="_navbar"] {
  z-index: 10;
}

/* nav bar */
nav {
  position: fixed;
  height: 80px;
  width: 100%;
}

/* nav bar left */
.logo {
  color: white;
  font-size: 50px;
  font-weight: bold;
  line-height: 80px;
  padding: 0 25px;
  float: left;
}

/* nav bar right */
nav ul {
  float: right;
  list-style: none;
  margin-right: 15px;
  position: relative;
}

/* nav bar items */
nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

/* nav bar item */
nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 10px;
  border-radius: 10px;
}

/* hover effect */
nav ul li a:hover {
  transition: 0.5s;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  border-radius: 10px;
  border-top: 0;
}

@media (max-width: 950px) {
  .logo {
    font-size: 45px;
  }

  nav ul li a {
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .logo {
    font-size: 40px;
  }

  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 850px) {
  .logo {
    font-size: 35px;
  }

  nav ul li a {
    font-size: 14px;
  }
}

@media (max-width: 770px) {
  .logo {
    font-size: 30px;
  }

  nav ul li a {
    font-size: 12px;
  }
}

@media (max-width: 710px) {
  .logo {
    font-size: 25px;
  }

  nav ul li a {
    font-size: 10px;
  }
}

@media (max-width: 670px) {
  .logo {
    font-size: 20px;
  }

  nav ul li a {
    font-size: 8px;
  }
}

@media (max-width: 590px) {
  .logo {
    font-size: 15px;
  }

  nav ul li a {
    font-size: 6px;
  }
}

@media (max-width: 530px) {
  .logo {
    font-size: 10px;
  }

  nav ul li a {
    font-size: 4px;
  }
}

@media (max-width: 470px) {
  .logo {
    font-size: 5px;
  }

  nav ul li a {
    font-size: 2px;
  }
}

/* Home */
#home {
  background: url("/data/img/liz/background/home.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.home_navbar {
  background-color: hsl(195, 92%, 47%, 0.4);
}

.home_navbar ul li a:hover {
  background: #2f8bd6;
}

#home_title,
#home_logo,
.home_navbar ul li a,
#home_words,
marquee {
  text-shadow: 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111);
}

.version {
  z-index: 10;
  position: fixed;
  top: 90px;
  right: 10px;
  background-color: #f2f2f2;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

.home_btn {
  background-color: #2f8bd6;
  /* Blue */
  border: none;
  color: white;
  padding: 6px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 90px;
  transition-duration: 0.4s;
  font-weight: 500;
  opacity: 0.9;
  cursor: pointer;
}

.home_btn:hover {
  background-color: rgb(25, 79, 150);
  /* Blue */
  color: white;
}

.cycling {
  bottom: 50px;
}

.swimming,
.win,
.sleep,
.study_2 {
  bottom: 45px;
}

.yoga,
.study_1 {
  bottom: 40px;
}

.cycling,
.swimming,
.yoga,
.win,
.study_1,
.sleep,
.study_2 {
  display: inline-block;
  position: relative;
}

marquee {
  color: #ffffff;
  font-size: 25px;
}

#home_words {
  color: #ffffff;
  font-size: 20px;
}

.home_form {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Competitions */
#competitions {
  background: url("/data/img/liz/background/competitions.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.competitions_navbar {
  background-color: rgba(251, 239, 62, 0.411);
}

.competitions_navbar ul li a:hover {
  background-color: #807d2b;
}

#competitions_words,
#competitions_dialogue {
  color: #ffffff;
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
}

#competitions_title,
#competitions_logo,
#competitions_words,
#competitions_dialogue,
.competitions_navbar ul li a {
  text-shadow: 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33);
}

.competitions_btn {
  background-color: #898e34;
  /* Yellow */
  border: none;
  color: white;
  padding: 6px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 90px;
  transition-duration: 0.4s;
  font-weight: 500;
  opacity: 0.9;
  cursor: pointer;
}

.competitions_btn:hover {
  background-color: rgb(82, 82, 13);
  /* Yellow */
  color: white;
}

#competitions_mahjong_table,
#competitions_big_two_table,
#competitions_singing_contest_table {
  background-color: rgb(252, 245, 164);
  opacity: 0.8;
  
/* For singing contest */
  display: inline-block;
  border-top: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* For singing contest */
.table-header:first-child {
  border-top-left-radius: 10px;
}
.table-header:last-child {
  border-top-right-radius: 10px;
}

#left_header {
  border-top: 0;
  border-top-left-radius: 10px;
}

#right_header {
  border-top: 0;
  border-top-right-radius: 10px;
}

td,
th {
  padding: 10px;
  text-align: center;
  border: 1px solid white;
  border-top: 0;
}

table tr:first-child th {
  border-top: 0;
}

table tr:last-child td {
  border-bottom: 0;
}

table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}

table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

.competitions_highlight_header {
  background-color: hsl(66, 37%, 23%);
  color: white;
  border-top: 0;
}

.competitions_highlight_total {
  background-color: hsl(66, 37%, 23%);
  color: white;
  border-top: 0;
}

#left_total {
  border-bottom: 0;
  border-bottom-left-radius: 10px;
}

#right_total {
  border-bottom: 0;
  border-bottom-right-radius: 10px;
}

#JLN {
  background-color: rgb(252, 245, 164);
  border-radius: 20px;
  padding: 10px;
  display: none;
  opacity: 0.8;
}

#JLN_Rules {
  text-align: left;
  line-height: 1.5;
  margin-left: 20px;
  margin-right: 20px;
}

/* Music */
#music {
  background: url("/data/img/liz/background/music.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.music_navbar {
  background-color: hsl(195, 92%, 47%, 0.4);
}

.music_navbar ul li a:hover {
  background: #2f8bd6;
}

#music_title,
#music_logo,
.music_navbar ul li a,
#music_words {
  text-shadow: 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111), 0 0 4px rgb(12, 73, 111),
    0 0 4px rgb(12, 73, 111);
}

.music_btn {
  background-color: #2f8bd6;
  /* Blue */
  border: none;
  color: white;
  padding: 6px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 90px;
  transition-duration: 0.4s;
  font-weight: 500;
  opacity: 0.9;
  cursor: pointer;
}

.music_btn:hover {
  background-color: rgb(25, 79, 150);
  /* Blue */
  color: white;
}

#music_words {
  color: #ffffff;
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
}

/* Music_lyrics_quotes */
#first_lyrics,
#second_lyrics {
  margin: 0 auto;
  display: table;
  padding: 5px 20px;
  font-size: 30px;
  background-color: hsl(211, 66%, 57%);
  border-radius: 30px;
  text-align: center;
}

#song_name,
#singer_name {
  margin: 0 auto;
  display: table;
  padding: 5px 20px;
  font-size: 20px;
  background-color: hsl(211, 66%, 57%);
  border-radius: 30px;
  text-align: center;
}

#music_lyrics_table {
  background-color: rgb(190, 240, 248);
  width: 80%;
}

.music_lyrics_highlight_header {
  background-color: hsl(211, 63%, 30%);
  color: white;
  border-top: 0;
}

.music_lyrics_btn {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}

/* Music_lyrics_writing */
.song_title {
  text-align: center;
  font-size: 25px;
}

.music_lyrics_box {
  margin: auto;
  width: 80%;
  padding: 10px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 30px;
}

.johnny_part {
  color: rgb(22, 70, 142);
}

.liz_part {
  color: rgb(210, 43, 196);
}

/* Mountains */
#mountains {
  background: url("/data/img/liz/background/mountains.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.mountains_navbar {
  background-color: rgb(19, 140, 19, 0.4);
}

.mountains_navbar ul li a:hover {
  background-color: #248035;
}

#mountains_title,
#mountains_logo,
.mountains_navbar ul li a,
#mountains_words {
  text-shadow: 0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41),
    0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41),
    0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41),
    0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41),
    0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41),
    0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41), 0 0 4px rgb(32, 79, 41),
    0 0 4px rgb(32, 79, 41);
}

.mountains_btn {
  background-color: #299328;
  /* Green */
  border: none;
  color: white;
  padding: 6px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 90px;
  transition-duration: 0.4s;
  font-weight: 500;
  opacity: 0.9;
  cursor: pointer;
}

.mountains_btn:hover {
  background-color: rgb(9, 69, 22);
  /* Yellow */
  color: white;
}

#mountain_journey_table,
#mountain_list_table {
  background-color: rgb(155, 215, 178);
  opacity: 0.7;
  width: 80%;
}

.mountains_highlight_header {
  background-color: hsl(111, 60%, 15%);
  color: white;
  border-top: 0;
}

.mountains_notes {
  text-align: left;
}

#mountains_words {
  color: #ffffff;
  font-size: 20px;
}

.completed_mountain {
  background-color: hsl(137, 79%, 57%);
}
/* Movies */
#movies {
  background: url("/data/img/liz/background/movies.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.movies_navbar {
  background-color: rgba(11, 11, 11, 0.4);
}

.movies_navbar ul li a:hover {
  background-color: #000000;
}

#movies_title,
#movies_logo,
.movies_navbar ul li a,
#movies_words {
  text-shadow: 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14);
}

#movies_words {
  color: #ffffff;
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
}

#movies_table {
  background-color: rgb(117, 117, 117);
  opacity: 0.85;
}

.movies_highlight_header {
  background-color: hsl(120, 11%, 5%);
  color: white;
  border-top: 0;
}

/* Food */
#food {
  background: url("/data/img/liz/background/food.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.food_navbar {
  background-color: rgba(251, 239, 62, 0.411);
}

.food_navbar ul li a:hover {
  background-color: #807d2b;
}

#food_words {
  color: #ffffff;
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
}

#food_title,
#food_logo,
.food_navbar ul li a,
#food_words {
  text-shadow: 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33), 0 0 4px rgb(88, 88, 33),
    0 0 4px rgb(88, 88, 33);
}

/* Workshop */
#workshop {
  background: url("/data/img/liz/background/workshop.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.workshop_navbar {
  background-color: rgba(235, 218, 241, 0.455);
}

.workshop_navbar ul li a:hover {
  background-color: #dba1ed;
}

#workshop_title,
#workshop_logo,
.workshop_navbar ul li a,
#workshop_words {
  text-shadow: 0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158),
    0 0 4px rgb(147, 125, 158), 0 0 4px rgb(147, 125, 158);
}

#workshop_words {
  color: #ffffff;
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
}

.workshop_btn {
  background-color: #f393e6;
  /* Pink */
  border: none;
  color: white;
  padding: 6px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 90px;
  transition-duration: 0.4s;
  font-weight: 500;
  opacity: 0.9;
  cursor: pointer;
}

.workshop_btn:hover {
  background-color: rgb(241, 102, 213);
  /* Pink */
  color: white;
}

.iframe-container {
  display: flex;
  justify-content: center;
}

.iframe-container iframe {
  border: none;
}

/* Videos */
#videos {
  background: url("/data/img/liz/background/videos.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.videos_navbar {
  background-color: rgba(11, 11, 11, 0.4);
}

.videos_navbar ul li a:hover {
  background-color: #000000;
}

#videos_title,
#videos_logo,
.videos_navbar ul li a {
  text-shadow: 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14), 0 0 4px rgb(14, 14, 14),
    0 0 4px rgb(14, 14, 14);
}