/* styles for the index page and design page */

.grayBox{
  /* background-color: rgba(41, 128, 185, 0.8); */
  background-color: rgba(50, 50, 50, 0.8);
  color: white;
}

.hoveredGrayBox{
  background-color: rgba(50, 50, 50, 1);
}

.grayText{
  color: rgba(50, 50, 50, 0.9);
}

.cipherLinkContainers{
  height: 120px;
}

.linkBox{
  font-size: 23px;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  float: left;
  width: 30%;
  margin: 0 1.6%;
  height: 120px;
  text-align: center;
  vertical-align: center;
  display: table;
  transition: 0.3s;
}
.linkBox:hover{
  cursor: pointer;
  color: rgba(50, 50, 50, 0.9);
}

.linkBoxText{
  display: table-cell;
  vertical-align: middle;
  padding: 20px;
}

@keyframes jumpInLinkBox {
    0%    { margin-top: 1300px;
            opacity: 0;}
    100%  { margin-top: 0px;
            opacity: 1;}
}

#generalBack{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -1;
  height: 100%;
  background: linear-gradient(to bottom right, #ffffff 0%, #f2f2f2 100%);
}

#topBoxHomePage {
  margin-bottom: 35px;
}

#linkBox1{
  animation: jumpInLinkBox 0.8s;
  background: linear-gradient(to bottom right, #e7ffd3 -100%, #bddb59 70%);
}

#linkBox2{
  animation: jumpInLinkBox 1s;
  background: linear-gradient(to bottom right, #fff8cc -100%, #ff7c66 70%);
}

#linkBox3{
  animation: jumpInLinkBox 1.2s;
  background: linear-gradient(to bottom right, #ccffff -100%, #6699ff 70%);
}