/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
padding-top:25px;
padding-bottom:8px;
background-color: #2c3e50;
color: #ecf0f1;
font-family: Roboto;
}

p{
  text-align:center;
  width: 80%;
  margin: auto;
  padding-top:25px;
  padding-bottom:8px;
  color: #ecf0f1;
  font-family: Roboto;
}

#center {
text-align:center;
}

a {
text-align:center;
color : #e74c3c;
}

a:hover {
text-align:center;
color : #c5d5d5;
}

a.articlelist {
text-align:center;
color : #e74c3c;
font-size : 1.25em;
font-family : monospace;
}

a.articlelist:hover {
text-align:center;
color : #c5d5d5;
}

a.sectionlink {
text-align:center;
color : #e74c3c;
font-size : 1.15em;
font-family : sans-serif;
font-weight : 700;
}

a.sectionlink:hover {
color : #e74c3c;
}

a.intable {
color : #aca4f6;
}

a.intable:hover {
color : #c5d5d5;
}

ul {
margin-left : 10px;
margin-right : 10px;
padding-right : 40px;
}

li {
margin-bottom : 3px;
list-style-position : inside;
}

img {
max-width : 100%;
}

img.inside {
display:block;
margin:auto;
}

img.vidya {
max-width:400px;
max-height:400px;
padding:10px;
}

img.link {
vertical-align : middle;
}

h2 {
text-align:center;
color : #e74c3c;
}

h3 {
text-align:center;
color : #95a5a6;
}

h4 {
text-align:center;
color : #aca4f6;
}

em {
font-weight : 700;
color : #C5D5D5;
}

em.hrec {
font-weight : 700;
font-style : italic;
color : lime;
}

em.rec {
font-weight : 700;
color : greenyellow;
font-style : normal;
}

em.srec {
font-weight : 500;
color : yellow;
font-style : normal;
}

em.nrec {
font-weight : 400;
color : orange;
font-style : normal;
}

em.avoid {
font-weight : 700;
color : red;
font-style : italic;
}

q, blockquote {
font-style : italic;
color : #C5D5D5;
}

#articlelist {
margin-top : 20px;
font-family : Sans;
text-align : center;
padding : 5px;
}

table {
border : #f8f8f8 solid 1px;
}

td {
border : #f8f8f8 solid 1px;
padding-left : 8px;
padding-right : 8px;
padding-top : 0;
padding-bottom : 0;
background-color : #313131;
color : #f8f8f8;
}

.toprow {
background-color : #101010;
color : #f8f8f8;
}

.waves-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    background: url("wave.png");
        background-size: auto;
    background-size: 100px;
    opacity: 0.09;
    z-index: -1;
}

.dots-background {
    background-image: url('dots.png');
    opacity: 0.05;
    background-size: 8px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.parallax {
  /* The image used */
  background-image: url("https://assets.pokemon.com/assets//cms2/img/video-games/_downloads/xy/xy_wallpaper6_1440x900.jpg");

  /* Set a specific height */
  height: 550px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

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