/* setup */
body {
  position:relative;
  margin:0;
  width:100vw;
  height:100vh;
  max-width:100vw;
  max-height:100vh;
  /* https://leaverou.github.io/css3patterns/#blueprint-grid */
  background-color:#115588;
  background-image: linear-gradient(rgb(150, 150, 150) 2px, transparent 2px),
                    linear-gradient(90deg, rgb(150, 150, 150) 2px, transparent 2px),
                    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

/* site container */
.site-container {
  width:100%;
  height:100%;
}

/* banner container */
.banner-container {
  position:fixed;
  width:100%;
  height:8vh;
  display:flex;
  background-color:rgb(40, 40, 40);
  z-index:10;
  box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* banner title */
.banner-title {
  flex-basis:15%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}
.banner-container a {
  text-decoration:none;
}
.title-img {
  position:relative;
  height:50%;
}
.title-text {
  font-family: "Roboto", san-serif;
  font-size:18pt;
  color:rgb(240, 240, 240);
  letter-spacing:1;
  font-weight:bold;
}

/* banner options */
.banner-options {
  flex-basis:85%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.banner-options a {
  flex-basis:10%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  font-family: "Roboto", sans-serif;
  font-size:12pt;
  font-weight:bold;
  letter-spacing:1;
  color:rgb(240, 240, 240);
  transition:color 0.2s;
}
.banner-options a:hover {
  color:rgb(0, 200, 255);
  transition:color 0.2s;
}

/* content container */
.content-container {
  width:100%;
  padding: 12vh 0 0 0;
  height:calc(100% - 12vh);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
}

/* preview boxes */
.preview-box {
  flex-basis:calc(100% / 2.1);
  margin:0 3vh 3vh 0;
  height:60%;
  color:rgb(150, 150, 150);
  display:flex;
  position:relative;
}

/* preview box title */
.preview-box-title {
  position:absolute;
  top:2%;
  left:2%;
  font-family:"Roboto", sans-serif;
  font-size:18pt;
  color:#00b6ff;
  z-index:2;
  opacity:0;
  transition:opacity 0.2s;
}
.preview-box:hover > .preview-box-title {
  opacity:1;
  transition:opacity 0.2s;
}

/* preview box background */
.preview-box-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.5s;
}
.preview-box-img {
  height:80%;
  max-width:95%;
  box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5);
}
.preview-box:hover > .preview-box-background {
  transform:scale(1.05);
  transition:transform 0.5s;
}

/* preview box content */
.preview-box-info {
  position:absolute;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background-color:rgba(0, 0, 0, 0.8);
  border-radius:5px;
  opacity:0;
  transition:opacity 0.5s;
}
.preview-box:hover > .preview-box-info {
  opacity:1;
  transition:opacity 0.5s;
}
.info-link img {
  height:20%;
}
.info-text {
  padding:20px;
  font-family:"Roboto", sans-serif;
  font-size:15pt;
  color:rgb(240, 240, 240);
}