@font-face { 
  font-family: 'pokemon';
  src: url(pokefont2.ttf);
}

body {
  margin: 0;
  color: white;
  font-family: 'pokemon', Arial, Helvetica, sans-serif;
 
  background-image: url("/images/smash_symbols_background.png");
  background-color: black;
  background-repeat: repeat;
  background-size: 100%;
}

a {
  color: #FFFFFF;
  text-decoration: underline springgreen;
}

a:hover {
  color: #F2D1D1;
}

p {
 line-height: 1.5; 
}

h2 { 
  line-height: 1.5;
}

img {
  margin: 30px;
}

aside {
  background-color: #2D2D2D;
}

hr {
  border-width: 4px;
  border-style: dashed;
}

* {box-sizing:border-box}

#linksidebar {
  order: 1;
  background: rgba(45,45,45,.6);
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 20px;
  margin-top: 150px;
  margin-left: 50px;
  border-color: rgba(255,255,2555,.6);
  border-radius: 10px;
  border-style: solid;
}
#linksidebar p {
  font-size: 25px;
}

#linksidebar ul {
  list-style-type: none;

}

#linksidebar li {
  line-height: 1.5;
}

#linksidebar li a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
}

#linksidebar li a:hover {
  color: #F2D1D1;
  display: inline-block;
  font-size: 14px;
  animation: sway 1.5s infinite;
  -webkit-animation: sway 1.5s infinite;
}

#menu {
  height: 60px;
  margin-bottom: 20px;
  background-color: #2D2D2D;
  background: rgba(45,45,45,.6);
  border-bottom-color: rgba(255,50,50,1);
  border-bottom-style: solid;
  order: 2;
  flex-wrap: wrap;
}

#menu ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#menu li {
  padding-top: 20px;
}

#menu li a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 25px;
}

#menu li a:hover {
  color: #F2D1D1;
  display: inline-block;
  animation: bounce 1.5s infinite;
  -webkit-animation: bounce 1.5s infinite;
}
  
main {
  border-radius: 5px;
  flex: 1;
  padding: 20px;
  min-height: 1080px;
  justify-content: center;
}  

#contentbox {
  border-radius: 10px;
  background-color: #2D2D2D;
  display: flex;
  max-width: 1200px;
  margin: 50px auto;
  border-style: solid;
  border-color: rgba(255,255,255,.6);
  border-width: 6px;
  padding: 1px;
  flex-wrap: wrap;
}

.indent {
  text-indent: 40px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#footspace {
  display: flex;
  background-color: #666666;
  border-top-color: rgba(255,255,255,.6);
  border-top-style: solid;
  justify-content: space-evenly;
  vertical-align: center;
  align-items: center;
  padding: 15px;
  width: 100%;
  flex-wrap: wrap;
}

#footspace img {
 margin: 10px auto;
} 

/* ALBUMS */

.centershrink {
  max-width: 200%;
  max-height: 300px;
  margin-left:auto;
  margin-right:auto;
  display: block;
}
  
.album {
  display: grid;
  align-items: flex-start; 
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
}

.albumartwork {
  display: inline-block;
  width:400px;
  vertical-align: middle;
}

.albumartworksmall {
  display: inline-block;
  width: 200px;
  vertical-align: middle;
}

.albuminfo {
  display: inline-block; 
  line-height: 1.5;
  width: 600px;
}

.albuminfo p {
 font-size: 12px; 
}

/* ANIMATIONS */

@keyframes bounce {
    0%,  
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@-webkit-keyframes bounce {
    0%,  
    100% {
       -webkit-transform: translateX(0);
    } 
    50% {
        -webkit-transform: translateX(-5px);
    }
}
    
@keyframes sway {
    0%,  
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}

@-webkit-keyframes sway {
    0%,  
    100% {
       -webkit-transform: translateX(0);
    } 
    50% {
        -webkit-transform: translateX(-5px);
    }
}

/* POKEMON PARTY */

.pokemonParty {
  margin: 20px auto;
  display: table;
  padding: 5px;
  table-layout: fixed;
}

p[name="pokemonVersion"]{
  margin-top: 40px;
  display: block;
  text-align: left;
  font-size: 25px;
}

.pokemonInfoBox {
  padding: 1px;
  font-size: 10px;
  display: table-cell;
  width: 250px;
}
  
/* POKESURVEY FORM */

section {
  justify-content: space-evenly;
}

input {
  display: inline-block;
  margin: 15px 0;
}

label {
  display: inline;
  margin-right: 5px;
}

legend {
 margin-top: 20px;
 margin-bottom: 10px;
 padding-top: 20px;
}

label[id="genderB"] {
 color: blue;
}

label[id="typen"] {
 color: silver; 
}

label[id="typeg"] {
 color: springgreen; 
}

label[id="typef"] {
 color: orange; 
}