body {
  font-size: 3vmin;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  margin:0;
  overflow-x: hidden;
  background-image: url("images/skyline_blue.jpg");
  background-repeat: repeat-x;
  background-position-y: 250px;
  background-position-x: -150px;
  height: 100%;
  width: 100%;
  position: absolute;
}

body::after {
  content: '';
  display: block;
  height: 30px; /* Set same as footer's height */
}

pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  overflow-y: auto;
 }

#header {
  padding: 5px;
  padding-left: 40px;
  text-align: left;
  background-color: #1c151e;
  border-bottom: 1px solid lightgrey;
  display: flex;
  justify-content: space-between;
}

#navigation {
  font-size: 24px;
  color: #F8F3F2;
  padding: 30px 20px 0px 0px;
}

#navigation > a {
  padding-left: 15px;
  color: white;
}

a:link {
  text-decoration: none;
}

.contents {
  padding: 50px;
  display: flex;
  flex-direction: column;
}

h2 {
  clear:both;
}

h3 {
  text-align: left;
  font-weight: bold;
  font-size: 30px;
  margin: 0;
}

#info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;
  padding: 50px;
}

#info > div {
  padding: 50px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  background-color: ghostwhite;
  box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 1px #1655be,
             0.3em 0.3em 1em rgba(0,0,0,0.3);
  border: 1px solid #3e3148;
  opacity: 0.9;
  height: fit-content;
  height: -moz-fit-content;
}

#description {
  width: 50%;
  min-width: 300px;
  max-width: 850px;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
}

.current {
  font-weight: bold;
}

#links {
  width: 10%;
  min-width: 200px;
  max-width: 300px;
  margin-left: 3%;
}

#links > span {
  text-align: left;
  color: #1655be;
  margin: 5px;
  font-size: 20px;
}

#links > span > a {
  color: #1655be;
  text-transform: none;
}

#info > div > p, #info > div > ul {
  font-size: 20px;
}

#info > div > h4 {
  margin-bottom: 10px;
  font-size: 24px;
}

#carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 60%;
  margin: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

#carousel .app {
  min-height: 800px;
  max-height: 900px;
  min-width: 660px;
  position: relative;
  z-index: 1;
  -webkit-transform: scale(0.6) translateY(-2rem);
  transform: scale(0.6) translateY(-2rem);
  opacity: 0.6;
  cursor: pointer;
  pointer-events: none;
  background: #1655be;
  color: ghostwhite;
  transition: 1s;
  /* box-shadow: 0 0 40px rgb(146, 211, 248); */
  font-size: 16px;
  padding: 16px;
  overflow-y: hidden;
  overflow-x: hidden;
}

#announce {
  width: 100%;
  text-align: center;
  font-size: 3.5vmin;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0em;
  padding-bottom: 0em;
}

.title {
  display: flex;
  justify-content: space-between;
}

.app > hr {
  border-style: dashed;
}

#carousel .app:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 100%;
  background-color: rgba(0,0,0,0.3);
  bottom: -5rem;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

#carousel .app.active {
  z-index: 3;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}

#carousel .app.prev, #carousel .app.next {
  z-index: 2;
  -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
  transform: scale(0.8) translateY(-1rem) translateX(0);
  opacity: 0.6;
  pointer-events: auto;
  transition: 1s;
}

#carousel .app:nth-child(0):before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

#carousel .app:nth-child(1):before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

#carousel .app:nth-child(2):before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
}

.glow {
  font-size: 36px;
  -webkit-animation: glow 2.65s ease-in-out infinite alternate;
  -moz-animation: glow 2.65s ease-in-out infinite alternate;
  animation: glow 2.65s ease-in-out infinite alternate;
}

.glow > a {
  color: #fff;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #ddd, 0 0 10px #ddd, 0 0 15px #4C70CF, 0 0 20px #4C70CF, 0 0 25px #4C70CF, 0 0 30px #4C70CF, 0 0 35px #4C70CF;
  }
  to {
    text-shadow: 0 0 10px #ddd, 0 0 15px #5a3e6e, 0 0 20px #5a3e6e, 0 0 25px #5a3e6e, 0 0 30px #5a3e6e, 0 0 35px #5a3e6e, 0 0 40px #5a3e6e;
  }
}

.meta {
  display: flex;
  flex-direction: column;
  text-align: right;
}

@media screen and (max-width: 700px) {
  #navigation {
    display: none;
  }
  #carousel {
    display: none;
  }
  body {
    width: unset;
    background-image: unset;
  }
  .app:not(.active) {
    display: none;
  }
  .contents {
    padding: 0;
  }
  #info {
    padding: 0;
  }
  #links {
    width: 50%;
    margin-left: 0;
    margin-top: 30px;
  }
  #info {
    flex-direction: column;
  }
  #info > div {
    box-shadow: unset;
    border: unset;
    background-color: unset;
  }
}