/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body,html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url("../assets/homepage/homepagebg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-color: rgb(91, 43, 24);
  color: white;
  font-family: 'Nanum Myeongjo', sans-serif;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: blur(1px);
}

main {
  position: relative;
  margin: 25px auto;   /* centers horizontally */
  width: 90%;
  height: auto;
  display: flex;
  gap: 20px;
  background-color: rgba(88, 47, 31, 0.342);
  padding: 10px;
  border-radius: 10px;
}

/* 1/4 of main */
.leftcol {
  flex: 1;
  background-color: #4d20069d;
  padding: 10px;
}

.menuheader {
  background-image: url("../assets/homepage/menubg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

.menuheader h2 {
  padding-left: 30px;
  text-align: left;
  color: white;
  text-shadow: #ff5e009d 1px 0 10px;
  font-family: 'Nanum Myeongjo', sans-serif;
  font-size: 28px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-transform: capitalize;
  /* position text a bit lower */
}

.sidebarnav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  box-shadow: 0 0 10px #ff5e009d;
  margin: 10px;
}

.sidebarnav a {
  padding-left: 30px;
  background-color: transparent;
  border: none;
  font-family: 'Nanum Myeongjo', sans-serif;
  color: rgba(255, 255, 255, 0.499);
  text-shadow: #ff5e009d 1px 0 10px;
  font-size: 22px;
  text-transform: capitalize;
  font-weight: bolder;
}

.sidebarnav a:hover {
  cursor: pointer;
  font-family: 'Nanum Myeongjo', sans-serif;
  color: white;
  text-shadow: #ff5e00 1px 0 10px;
  font-style: italic;
}

.galleryRedirect {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin: 10px;
}

.galleryContainer {
  justify-content: center;
  align-items: center;
  width: 100%;
  box-shadow: 0 0 10px #ff5e009d;
}

.galleryContainer img:hover {
  cursor: pointer;
  transform: scale(1.05);
  transition: transform 0.3s;
}

.stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 2/4 of main */
.maincol {
  flex: 2;
}

.maincol img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.web-deck-player {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

/* 1/4 of main */
.rightcol {
  flex: 1;
  background-color: #4d20069d;
  padding: 10px;
}

.mediastatus {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin: 10px;

}

.gamestatus {
  width: 100%;
  box-shadow: 0 0 10px #ff5e009d;
  background-color: #3D3D3D;
}

.gamestatus img{
  display: block;
  width: 100%;
  object-fit: cover;
}

.moviestatus p {
  font-family: 'Nanum Myeongjo', sans-serif;
  color: rgb(255, 255, 255);
  text-shadow: #ff5e009d 1px 0 10px;
  padding: 10px;
}

.guestbook {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin: 10px;
}

.guestbook iframe {
  width: 100%;
  height: 300px;
  border: none;
  box-shadow: 0 0 10px #ff5e009d;
}

.journalRedirect {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin: 10px;
}

.journalContainer {
  justify-content: center;
  align-items: center;
  width: 100%;
  box-shadow: 0 0 10px #ff5e009d;
}

.journalContainer img {
  display: block;
  width: 50%;
}

.journalContainer img:hover {
  cursor: pointer;
  transform: scale(1.05);
  transition: transform 0.3s;
}

.updateslog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.updateslog h2{
  font-family: 'Nanum Myeongjo', sans-serif;
  color: rgb(255, 255, 255);
  text-shadow: #ff5e009d 1px 0 10px;
}

.updateslog ul{
  font-family: 'Nanum Myeongjo', sans-serif;
  color: rgb(255, 255, 255);
  text-shadow: #ff5e009d 1px 0 10px;
}