body {
  background-color: black;
  color: white;
  font-family: Georgia;
  margin: 0;
}

p {
  margin: 0;
}

h1 {
  text-align: center;
  font-size: 60px;
}

hr {
    display: block;
    color: transparent;
    margin: 10px 0;
    height: 0;
    width: 100%;
    border: none;
    border-top: 1px solid white;
}


/* unvisited link */
a:link {
  color: #ff6666;
}

/* visited link */
a:visited {
  color: #aa3333;
}

/* mouse over link */
a:hover {
  color: #ff9999;
}

/* selected link */
a:active {
  color: #ffeeee;
} 


/* fonts */

.cinzelfont {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* colors!!! */

.black {
  color: black
}

.blood {
  color: #bb0000;
}

.swamp {
  color: #00bb00;
}

.metal {
  color: #ccccdd;
}

.brass {
  color: #996622;
}

.gun {
  color: #777777;
}


/* div displays */

.center-items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-column {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.center-text {
  text-align: center;
}

.part-width {
  width: 50%;
}

.full-width {
  width: 100%;
}

.shrink-on-hover {
    transition: all 0.2s ease 0s;
}

.shrink-on-hover:hover {
    transform: scale(0.9);
}

.flex-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}


.gridel {
  border: 1px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  max-width: 40%;
}




.bigmargin {
  margin: 0 5% 0 5%;
}



/* blog */

.blog-display{
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-image: url("./images/paper.png");
}

@media screen and (min-width: 1000px) {
    .blog-display {
        margin: 0 20%;
    }
}

@media screen and (max-width: 1000px) {
    .blog-display {
        margin: 0 10%;
    }
}

@media screen and (max-width: 600px) {
    .blog-display {
        margin: 0;
    }
}


.blog-entry {
  padding: 20px;
}


/* ids */

#cloudland {
  width: 100%;
  height: 300px;
  background-image: url("./images/cloudland-william-clement-ley.png");
}

#dictionnaire {
  width: 100%;
  height: 200px;
  background-image: url("./images/dictionnaire.png");
}