@charset "utf-8";

/* ======= Showcase Rules ======= */

section {
  padding: 10% 5%;
  width: auto;
}
section.graphics:last-of-type, 
section.web {
  padding: 10% 5% 0px 5%;
}
section > div.textBlock > h1 {
  color: var(--primary);
  padding: 0px 0px 0px 3%;
  margin: 0px;
  font-family: 'blackout';
  font-size: 3.5vw;
  line-height: 3.5vw;
}
body[data-mode="dark"] section > div.textBlock > h1 { 
  color: var(--primary-light);
}
section h3 {
  width: 100%;
  text-align: center;
}
div.textBlock {
  width: 80%;
  margin: 0px auto;
  max-width: 1400px;
}
div.showcase h2, 
div.showcase h3 {
  text-align: center;
  margin: 5px 0px auto 0px;
}
@media screen and (min-width: 1601px) {
  section.graphics, 
  section.web {
    padding: 160px 80px;
  }
  section.graphics:last-of-type, 
  section.web {
    padding: 160px 80px 0px 80px;
  }
  section > div.textBlock > h1 {
    padding: 0px 0px 0px 23px;
    font-size: 56.5px;
    line-height: 56.5px;
  }
}


/* ======= Graphics Showcase ======= */

div.showcase {
  width: 100%;
  max-width: 1400px;
  margin: 10px auto;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
div.showcase > div {
  position: relative;
  display: inline-block;
  -webkit-order: 0;
  order: 0;
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  -webkit-align-self: auto;
  align-self: auto;
}
div.showcase[data-hash="wbc"] > div {
	margin: 2.5% 0px 0px 0px;
}
div.showcase > div > a.landscape {
  padding: 75% 0px 0px 0px;
}
div.showcase > div > a {
  position: relative;
  display: block;
  width: 100%;
  padding: 100% 0px 0px 0px;
}
div.showcase > div > a.web {
  padding: 90% 0px 0px 0px;
}
div.showcase > div > a > img {
  bottom: auto;
  height: 100%;
  width: 100%;
  transform: scale(90%);
  object-fit: contain;
  transition: 0.25s;
}
div.showcase > div > a:hover {
  background-color: var(--primary-light);
}
body[data-mode="dark"] div.showcase > div > a:hover { 
  background-color: var(--primary-dark);
}
div.showcase > div > a:hover > img {
  transform: scale(95%);
}
div.showcase > div > span {
  display: inline-block;
  width: 90%;
  margin: 5%;
  font-size: 0.8em;
  color: var(--primary-darker);
  font-style: italic;
}
body[data-mode="dark"] div.showcase > div > span { 
  color: var(--primary-lighter);
}
a.imagelink {
  position: relative;
  top: -5px;
  border-radius: 20px;
  cursor: pointer;
  width: 70%;
  margin: 0px auto 5px auto;
  overflow: hidden;
  display: block;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 0px #000000;
  background-color: var(--primary-dark); 
  color: #ffffff !important;
  padding: 15px 10%; 
  font-size: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a.imagelink:hover {
	background-color: var(--primary);
}
a.imagelink:active {
  position: relative;
  background-color: var(--primary-darker);
}
div.showcase > div > span > a {
  color: var(--primary-dark);
}
body[data-mode="dark"] div.showcase > div > span > a { 
  color: var(--primary);
}
div.showcase > div > span > a:hover {
  color: var(--primary);
}
body[data-mode="dark"] div.showcase > div > span > a:hover {
  color: var(--primary-lighter);
}
div.showcase[data-cols="2"] > div { -webkit-flex: 0 1 50%; flex: 0 1 50%; }
div.showcase[data-cols="3"] > div { -webkit-flex: 0 1 33.33%; flex: 0 1 33.33%; }
div.showcase[data-cols="4"] > div { -webkit-flex: 0 1 25%; flex: 0 1 25%; }
div.showcase[data-cols="5"] > div { -webkit-flex: 0 1 20%; flex: 0 1 20%; }
div.showcase[data-cols="6"] > div { -webkit-flex: 0 1 16.66%; flex: 0 1 16.66%; }
div.showcase[data-cols="7"] > div { -webkit-flex: 0 1 14%; flex: 0 1 14%; }
div.showcase[data-cols="8"] > div { -webkit-flex: 0 1 12.5%; flex: 0 1 12.5%; }


/* ======= Top Link Button ======= */

div.topLink {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 1600px;
  padding: 10% 0px 0px 0px;
  margin: 2.5% auto;
}
section.web > div.topLink {
  margin: 2.5% 0px;
}
section:last-of-type > div.topLink {
  margin: 2.5% 0px 0px 0px;
}
div.topLink > a {
  left: 90%;
  text-decoration: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
div.topLink > a > div:nth-of-type(1), 
div.topLink > a > div:nth-of-type(2) {
  font-family: 'midnight';
  display: block;
  width: 100%;
  -webkit-order: 0;
  order: 0;
  -webkit-flex: 1 1 50%;
  flex: 1 1 50%;
  -webkit-align-self: auto;
  align-self: auto;
  text-align: center;
  font-size: 2em;
  line-height: 0.9em;
  color: var(--primary);
  z-index: 1;
}
div.topLink > a > div:nth-of-type(1) {
  background-image: url("../i/e/top.png");
  background-size: cover;
  background-position: center center;
}
body[data-mode="dark"] div.topLink > a > div:nth-of-type(1) {
  background-image: url("../i/e/d/top.png");
}
div.topLink > a > div:nth-of-type(2) {
  background-color: #FFFFFF;
}
body[data-mode="dark"] div.topLink > a > div:nth-of-type(2) {
  background-color: #1a1a1a;
}
div.topLink > a > div:nth-of-type(3) {
  background-color: var(--primary);
  z-index: 0;
  transform: scale(0.98);
}
div.topLink > a:hover > div:nth-of-type(3) {
  background-color: var(--primary-light);
}
div.topLink > a:hover > div {
  color: var(--primary-light);
}
body[data-mode="dark"] div.topLink > a:hover > div:nth-of-type(3) {
  background-color: var(--primary-light);
}
body[data-mode="dark"] div.topLink > a:hover > div {
  color: var(--primary-light);
}
@media screen and (min-width: 1601px) {
  div.topLink {
	display: block;
    padding: 144px 0px 0px 0px;
    margin: 36px auto;
  }
  section.web > div.topLink {
    margin: 36px auto;
  }
  section.web:last-of-type > div.topLink,
  section.web:last-of-type > div.topLink
	{
    margin: 36px auto 0px auto;
  }
div.topLink > a {
	width: 144px;
	height: 144px;
	left: auto;
}
  div.topLink > a > div:nth-of-type(1), 
  div.topLink > a > div:nth-of-type(2) {
    font-size: 40px;
    line-height: 36px;
  width: 144;
  }
}