@import '../settings.scss';

.toplevel_page_blogon-quest {
  #wpcontent {
		background-size: cover;
    padding: 0;
	}
  #wpbody-content {
    padding: 0;
    height: 100%;
  }
  #wpbody {
    height: 100%;
  }
  &.blogon-pc {
    #wpcontent {
      border: 30px solid #000000;
      height: calc( 100vh - 60px - 32px );
      overflow-y: scroll;
    }
  }

  .hide-block {
		display: none !important;
	}
}

.blogon-quest-zone {
  font-family: 'PixelMplus';
  letter-spacing: 2px;
  padding: 0 10px 10px;
	h1, h2, h3, h4, h5, p, ul, li {
		margin: 0;
    line-height: 1;
	}

  .blogon-quest-title {
    margin-top: 24px;
  }

  .window-title {
    padding: 15px;
  }

  .strength-heading {
    @include bqItemHeading( $color: $strength-color, $stroke-width: 0.25px, $stroke-color: #ffffff, $font-size: 21px );
  }

  .defense-heading {
    @include bqItemHeading( $color: $defense-color, $stroke-width: 0.25px, $stroke-color: #ffffff, $font-size: 21px );
  }

  .agility-heading {
    @include bqItemHeading( $color: $agility-color, $stroke-width: 0.25px, $stroke-color: #ffffff, $font-size: 21px );
  }

  .free-text-window {
    box-sizing: border-box;
    margin-bottom: 10px;
    min-height: 200px;
    p {
      line-height: 1.3;
      padding: 15px;
    }
  }

  main {
		.main-top {
      display: flex;
      .main-block {
        display: flex;
        flex: 1;
      }
    }
	}

	.sidebar {
		.menu-window {
			min-width: 155px;
			li {
				.menu-button {
					color: #ffffff;
					text-decoration: none;
					opacity: 0.7;
					&.active {
						opacity: 1;
					}
					&:hover {
						opacity: 1;
					}
          &:focus {
            box-shadow: none;
          }
				}
			}
		}
	}

	.main-content {
		text-align: center;
	}

}

.blogon-pc {
  .sidebar {
    margin-right: 10px;
  }
}

.blogon-sp {
  .sidebar {
    width: 100%;
    margin: 0;
    text-align: center;
  }
  main {
    .main-top {
      flex-direction: column;
    }
    .main-block {
      flex-direction: column;
    }
  }
}

.blogon-quest-subtitle {
  font-size: 48px;
  text-align: center;
  color: #ffffff;
  -webkit-text-stroke: 2px #000000;
  letter-spacing: 8px;
  padding-top: 20px;
}

.bq-window {
  padding: 15px;
  margin-top: 24px;
  border-radius: 23px;
  border: 6px solid #ffffff;
  background: rgba(0, 0, 0, 0.75);
  h1, h2, h3, h4, h5, p, ul, li {
		color: #ffffff;
    font-size: 21px;
	}
  li {
    padding: 15px;
  }
  h4 {
    margin-right: 21px;
    font-weight: normal;
  }
}

.blogon-pc {
  .bq-window {
    h4 {
      margin-right: 21px;
    }
  }
}

.blogon-sp {
  .bq-window {
    h4 {
      font-weight: bold;
      padding-bottom: 15px;
    }
  }
}

.blogon-quest-title {
  text-align: center;
  letter-spacing: 10px;
  @include blogonQuestTitleFont();
}

.strength-heading {
  @include bqItemHeading( $color: $strength-color, $stroke-width: 0.25px, $stroke-color: #ffffff, $font-size: 21px );
}

.defense-heading {
  @include bqItemHeading( $color: $defense-color, $stroke-width: 0.25px, $stroke-color: #ffffff, $font-size: 21px );
}

.agility-heading {
  @include bqItemHeading( $color: $agility-color, $stroke-width: 0.25px, $stroke-color: #ffffff, $font-size: 21px );
}

.window-title {
  text-align: center;
  @include bqItemHeading();
}