html {
  overflow-X:hidden;
}
.welcome {
  width:100%;
  height:30em;
}
.hero {
  position:relative;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0.9;
}
#row__intro {
  background-color:#ccc;
}
#col__intro {
  max-width:80vw;
  display:flex;
  align-items:center;
  padding:0 4em;
  margin:auto;
}
#col__intro p {
  padding-right:3em;
}

.scene {
  perspective:100em;
  width:100%;
  margin:0 auto;
}
#welcome_header {
  font-size:3em;
  color:white;
  position:absolute;
  top:300px;
  left:10%;
  width:80%;
  text-align: center;
  text-shadow:0 0 10px black;
}

.box_wrapper {
  position:relative;
  margin:5em auto;
  width:16em;
  height:16em;
  transform-style:preserve-3d;
  animation-duration:10s;
  animation-name: spin;
  animation-iteration-count:infinite;
}

.front, .right, .back, .left{
  position:absolute;
  width:100%;
  height:100%;
  border:1px solid #dad9d9;
  background-color: white;
  box-shadow:inset 0 0 10px 5px #efeded7d;
}

.front {
  transform: translateZ(8em);
}
.back {
  transform:translateZ(-8em) rotateY(180deg);
}
.right {
  transform:rotateY(90deg) translateZ(8em);
}
.left {
  transform:rotateY(-90deg) translateZ(8em);
}

@keyframes spin {
  25% {
    transform:rotateY(-90deg);
  }
  50% {
    transform:rotateY(-180deg);
  }
  75% {
    transform:rotateY(-270deg);
  }
  100% {
    transform:rotateY(-360deg);
  }
}

.centerpad {
  text-align: center;
  padding: 10px;
}

.linktext{
  font-size: 20px;
  color: #88765c;
}

.linktext:hover{
  color: #292929;
}

.listmargin{
  margin-left: 2em; 
  margin-right: 2em;
}

.spanbold{
  font-size: 18px; 
  font-weight: bold;
}

.outerlist{
  text-align: left; 
  list-style-position: inside; 
  list-style-type: disc;
}

.innerlist{
  list-style-type: circle;
}

.headercolor{
  color: #292929;
}

.headercolor:hover{
  color: #88765c;
}
#startHeader, #outsideHeader {
  font-size: 1.2em;
}