body
{
  font-family: Trebuchet MS;

  background-size: 50px 50px;
  background-image:
    linear-gradient(rgba(27,5,42,0.27), rgba(103,59,133,0.15)),
    linear-gradient(to right, rgba(105,100,121,0.25) 1px, rgba(105,100,121,0.06) 4px, transparent 1px),
    linear-gradient(to bottom, rgba(85,82,97,0.25) 1px, rgba(85,82,97,0.06) 4px, transparent 1px);

  animation: shift 5s infinite;
  animation-timing-function: linear;
}

@keyframes shift {
  from {background-position: 0px 0px;}
  to {background-position: 50px 50px;}
}

p
{
  text-align: center;
  padding: 5px;
}

p.title
{
  font-size: 40px;
  font-weight: bold;
}

p.tab
{
  font-stretch: expanded;
}


.top
{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;

  border: 10px #262433 solid;
  border-bottom-width: 5px;
  
  background-color: #675c83;
  color: #dee3e7;
  
}

.bar
{
  font-size: 20px;
  box-sizing: border-box;
  float:left;
  width:22.5%;
  border: 5px #262433 solid;
  border-top-width: 0px;
  border-bottom-width: 10px;

  cursor: default;
  background-color: #eef1f2;
  color: #2c2136;
  
  transition: background-color 0.25s, color 0.25s;
}

#edgeL
  {
    margin-left: 5%;
    border-left-width: 10px;
  }

@media (max-width:700px) {
  .top
  {
    margin-left: 0%;
  margin-right: 0%;
    
  }
  .bar {
    font-size: 15px;
    width:25%;
  }
  
  #edgeL
  {
    margin-left: 0%;
  }
}

@media (max-width:500px) {
  .bar {
    font-size: 13px;
  }
}

.bar:hover {
  color: #e6e4ef;
  background-color: #2c2136;
  transition: background-color 0.5s, color 0.5s;
  cursor: pointer;
}


.bar1
{
  font-size: 20px;
  box-sizing: border-box;
  float:left;
  width:22.5%;
  border: 5px #262433 solid;
  border-top-width: 0px;
  border-bottom-width: 10px;
  margin-left: 5%;
  border-left-width: 10px;

  cursor: default;
  background-color: #eef1f2;
  color: #2c2136;
  
  transition: background-color 0.25s, color 0.25s;
}

.bar1:hover {
  color: #e6e4ef;
  background-color: #2c2136;
  transition: background-color 0.5s, color 0.5s;
  cursor: pointer;
}

.footer
{
  position: fixed;
  bottom: 20px;
  padding: 4px;
  left: 165px;
  margin-left: -145px;

  border: 5px #8E76B0 solid;
  background-color: #e3e1ec;
  box-shadow: 0px 1px 5px rgba(67, 58, 73, 0.6);
}

.footer img
{
  width: 50px;
  cursor:pointer;
}

@media (max-height:600px), (max-width:800px){
  .footer {
    display:none;
  }
}