body {
  color: black;
  font-family: "Recoleta-RegularDEMO";
  src: url('webFonts/RecoletaRegularDEMO/font.woff2') format('woff2'), url('webFonts/RecoletaRegularDEMO/font.woff') format('woff');
  background-image:url("https://media1.giphy.com/media/TxVVB6PfWMjE4/giphy.gif");
}

* {
  box-sizing: border-box;
}


h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
color:#9eabff
}

.nav{
  text-align: center;
  background-repeat: no-repeat;
 background-size: 100%;
 background-position: center;
  font-size: 55px;
  position:static;
  top:0px;
  left:0px;
  right:0px;
  width:100%;
  height:auto;
  padding:20px;
  z-index: 1;
}

.scrollbox {
  text-align:center;
  font-size:13px;
  color:black;
  background-image:url("https://media3.giphy.com/media/2seaKlqqoGglLcPH2Q/giphy.gif");
  background-size:100%;
  background-position:top;
  background-repeat:no-repeat;
  width:100%;
  overflow:auto;
  height:200px;
  padding-left:10px;
  padding-right:10px;
  font-family:'ThamesSerial';
  letter-spacing:0px;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  position:relative;
}

/* Left and right column */
.column.side {
  width: 20%;  
  font-family: "Recoleta-RegularDEMO";
  overflow:auto;
}

/* Middle column */
.column.middle {
  width: 60%;
  font-family: "Recoleta-RegularDEMO";
  overflow:auto;
  color:white;
  letter-spacing:1px;
  }

.row {
  background-image:url("https://media1.giphy.com/media/TxVVB6PfWMjE4/giphy.gif");
  font-family: "Recoleta-RegularDEMO";
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* inner content tables */
table, td, th {
  border: 1px solid black;
  text-align:center;
}


table {
  width: 100%;
  border-collapse: collapse;
}

a {
  color:white;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  opacity:0.4;
}
.list li {
  flex: 1;
}
.list li a {
  text-decoration: none;
  color: inherit;
  padding-top: 1rem;
  display: block;
  text-align: center;
  overflow: hidden;
  font-size: 40px;
}
.list li a span {
  display: block;
  background: rgba(0, 0, 0, 0);
  padding: 0.5rem;
  font-size: 17px;
  margin-top: 1rem;
}

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    opacity:1;
    transform: translateY(0);
  }
  .list li:nth-child(1) span {
    transition-delay: 0.0s;
  }
  .list li:nth-child(2) span {
    transition-delay: 0.1s;
  }
  .list li:nth-child(3) span {
    transition-delay: 0.2s;
  }
  .list li:nth-child(4) span {
    transition-delay: 0.3s;
  }
  .list li:nth-child(5) span {
    transition-delay: 0.4s;
  }
  .list li:nth-child(6) span {
    transition-delay: 0.5s;
  }
}







.list li:nth-child(1) {
  background-image: #90CAF9;
}
.list li:nth-child(2) {
  background: #80DEEA;
}
.list li:nth-child(3) {https://neocities.org/dashboard
  background: #A5D6A7;
}
.list li:nth-child(4) {
  background: #E6EE9C;
}
.list li:nth-child(5) {
  background: #FFF176;
}
.list li:nth-child(6)  {
  background: #FFD54F;
}




.footer {
  width:100%;
  text-align: center;
  color:pink;
  font-family:'Recoleta-RegularDEMO';
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: center;
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
  height:75px;
  z-index: 1;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
}