/*THIS PART APPLIES TO THE WHOLE SITE

      Red
      #BC0000
      #A50000
      #640000
      #510000

      Blue
      #3A33AD
      #2119A4
      #120D63

      Grey
      #FBFBFB
      #D3D3D3
      #9C9C9C
      #696969*/

.topbar{
  background-color: #fbfbfb;
  width: 100%;
  height: auto;
  margin-top: -45px;
  padding-top: 20px;
}

body {
  background: none;
}

.container{
  text-align: center;
  width: 80%;
  font-weight: bold;
  background-color: #fbfbfb;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: 30px auto;
  padding: 10px 0;
  color: #120D63;
  box-shadow: -5px -5px 5px #120D63, 5px 5px 5px #3A33AD;
  border-radius: 10px;
  padding: 5px;
}

.title {
  text-align: center;
  text-shadow: 2px 2px 4px #696969;
  font-size: 400%;
  font-family: 'Berkshire Swash', serif;
  color: #A50000;
}

#menubar {
  margin-top: 10px;
  padding: 7px 0;
  background-color: #120D63;
  height: auto;
  width: 100%;
  color: #D3D3D3;
  font-size: 30px;
  text-align: center;
  font-family: 'Adamina', serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
  padding: 20px;
}

a {
  text-decoration: none;
  color: #D3D3D3;
  transition: 0.5s;
}

a:hover {
  color: #BC0000;
  transition: 0.5s;
}

.news {
  width: 75%;
  height: auto;
  margin: 50px 12.5%;
  text-align: left;
  position: relative;
  float: left;
}

h1 {
  font-size: 200%;
  text-align: center;
  text-shadow: 2px 2px 4px #696969;
  font-family: 'Berkshire Swash', serif;
  color: #A50000;
}

h2 {
  font-family: adamina, serif;
  font-size: 120%;
  padding-top: 5px;
  margin-top: 0;
}


p {
  font-family: 'antic', sans-serif;
}

.about {
  width: 75%;
  height: auto;
  margin: 50px 12.5%;
  font-size: 130%;
}

.faq {
  width: 80%;
  height: auto;
  margin: 50px auto;
  font-size: 130%;
}

#accordion {
  display: inline-block;
  width: 100%;
  margin: 30px auto;
  position: relative;
}

#accordion .ui-accordion-header {
  background-color: #120D63;
  color: #fbfbfb;
  font-weight: bold;
}

.dept {
  width: 250px;
  height: 250px;
  border-style: none;
  border-radius: 5px;
  box-shadow: 3px 3px 3px #696969, -3px -3px 3px #FBFBFB;
  background-color: #A50000;
  margin: 50px;
  transition: 0.7s;
  position: relative;
  display: inline-block;
  align-items: center;
  justify-content: center;
  flex-flow: wrap;
  margin: 10px 4%;
}

img{
  width: 225px;
  height: 225px;
  margin: 10px;
  background-color: #fbfbfb;
}

.dept-content {
  position: absolute;
  bottom: 0;
  height: 35px;
  width: 220px;
  margin: 15px 13px;
  background-color: #fbfbfb;
  overflow: hidden;
  transition: 0.7s;
  text-align: center;
  /* float: left; */
}

.dept-content:hover {
  height: 225px;
  transition: 0.7s;
  /* margin: 10px; */
}

.episodes {
  width: 320px;
  height: auto;
  margin: 25px;
  padding: 0 25px;
  position: relative;
  float: left;
  font-family: antic, sans-serif;
  display: flex;
  flex-flow: wrap;
  align-items: center;
}

.episodes audio {
  width: 320px;
  align-items: center;
}

.episodes p {
  width: 320px;
  height: auto;
  text-align: center;
}

#game {
  width: 80%;
  margin: auto;
  font-weight: bolder !important;
  font-size: 150%;
  text-align: center;
}

#stats {
  width: 25%;
  position: relative;
  float: left;
  margin: 50px 50px;
  vertical-align: middle;

}

#shape {
  width: 75%;
  position: relative;
  float: left;
}

#hide {
  display: none;
}

#shape {
  width:200px;
  height: 200px;
  background-color: cornflowerblue;
  background-image: url("game/ants.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  left: 0;
  top: 0;
  border-radius: 0;
  display: none;
}

#press {
  background-color: #120D63;
  color: #D3D3D3;
  border-radius: 5px;
}

#press:hover {
  background-color: #D3D3D3;
  color:#120D63;
}

.btn {
  margin: 10px;
}

.height {
  height: 200px;
}

.form-group {
  margin: 5px;
  padding: 5px;
  border: none;
}

.btn {
  width: 100px;
  height: 40px;
  background-color: #120D63;
  color: #fbfbfb;
  margin: 10px 0 0 0;
  border-radius: 5px;
  font-weight: bold;
  }

.btn:hover {
  background-color: #fbfbfb;
  color: #120D63;
  font-weight: bold;
}