/* 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 {
  background-color: #f5eee4;
  color: black;
  font-size: 13px;
}

.monofont {
  font-family: "PT Mono", monospace;
}

.post-image {
  width: 600px;
}

.content { 
  padding: 10px;
  border: dashed black 1px;
}

@media (min-width: 800px) {
  .content {
    width: 600px;
  }
  
  .rwd-break {
    display: none;
  }

  .last-updated {
    width: 90%;
  }

  .only-on-mobile {
    display: none;
  }
}

.last-updated {
  border: solid 1px coral;
  display: inline-block;
  text-align: left;
}

img {
  max-width: 100%;
}

.highlighter-rouge {
  background: #f7c379;
}

.div-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 5px 3px 5px #00000070;
}

@media (min-width: 900px) {
  .div-center {
    width: 650px;
  }
}

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

.grasslands {
  background-image:url(./figures/grass.png);
  background-repeat: repeat"
}

.antique-frame {
  background-color: antiquewhite;
}

.image-frame {
  border: dotted 1px black;
}

.span-highlight {
  color: rgb(255, 0, 179)
}

/* games */

@media (min-width: 800px) {
  .game-frame {
    display: flex; 
    overflow: auto; 
    border: dashed 1px #2e0f08; 
    border-radius: 2px; 
    padding: 5px; 
    margin-right: 20px; 
    margin-left: 20px;
    background: #7777772b;
  }

  .game-frame-2-1 {
    width: 20%; 
    float: left;
    display: flex;
    align-items: center;
  }
  
  .game-frame-2-1 img {
    height: 100%;
    object-fit: cover;
  }
  
  .game-frame-2-2 {
    width: 70%;
    padding-left: 10px;
    float: left;
    text-align: left;
  }
}

@media (max-width: 800px) {
  .game-frame {
    overflow: auto; 
    border: dashed 1px #2e0f08; 
    border-radius: 2px; 
    padding: 5px; 
    margin-right: 20px; 
    margin-left: 20px;
    background: #7777772b;
  }
  
  .game-frame-2-1 img {
    width: 100%;
    object-fit: cover;
  }
}

/* graveyard */

.tombstone {
  border: dashed 1px black;
  width: max-content;
  padding: 0.5em;
  margin-right: 0.5em;
  margin-top: 0.5em;
  float: left;
}

.tombstone_inscription {
  float: left;
  margin-left: 1em;
  width: 400px;
  display: none;
}

.tombstone_videos {
  width: 100%;
  float: left;
  margin: auto;
  background: #0000002b;
  padding-top: 0.5em;
  /* padding-bottom: 0.5em; */
  border: solid 1px grey;
}

.tombstone_videos img {
  height: 100px;
}

.center-textdiv {
  margin: 0 auto;
}

@media (min-width: 800px) {
  .fez_container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .fez_content {
    width: 600px;
  }
}


.project {
  /*width: 30%;*/
  /*margin-left: 1em;*/
  /*padding-bottom: 1em;*/
  margin-bottom: 0.8em;
  border: solid 1px black;
  font-size: 0.9em;
  width: 190px;
  /*float: left;*/
}

.project h1 {
  font-size: 1.5em;
  background-color: rgb(140, 240, 200);
  padding: 0.3em;
  margin-top: 0;
}

.project .date {
  color: grey;
}

.project img {
  height: 150px;
  object-fit: cover;
}

.project .description {
  padding: 0.5em;
}

figcaption {
  font-style: italic;
  text-align: center;
}

.quoting {
  padding-left: 2em;
  padding-right: 2em;
}

/*a {*/
  /*color: crimson;*/
/*  color: mediumvioletred;*/
/*  text-decoration: none;*/
/*}*/
    
a:hover {
  background: yellow;
}

.no-hover:hover  {
  background: none;
}

.no-collapse {
  display: inline-block;
}

.fake-link:hover {
    color: red;
}
.fake-link {
    cursor: pointer;
    text-decoration: underline;
    color: brown;
}

.main-div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*box-shadow: 0px 5px 3px 5px #00000070;*/
}

@media (min-width: 900px) {
  .main-div {
    width: 650px;
  }
}

.caption {
  text-align: center;
  color: grey;
  font-size: small;
  width: 100%;
  display: block; 
}