@font-face
{
  src: url('../fnt/Nunito.ttf');
  font-family: 'Nunito';
}

body
{
  background-color: #25262c;
  font-family: 'Nunito', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  text-shadow: #00000033 1px 1px;
}

h1
{
  color: #fff;
}

#wrapper
{
  width: 600px;
  margin: auto;
  margin-top: 50px;
}

#blog-content
{
  width: 800px;
  margin: auto;
  margin-top: 50px;
}

#blog-content img
{
  display: block;
  max-width: 500px;
  margin: auto;
  border-radius: 10px;
  text-align: center;
}

#blog-content video 
{
  display: block;
  max-width: 500px;
  margin: auto;
  border-radius: 10px;
  text-align: center;
}

#blog-content a
{
  color: #17c4c4;
  text-decoration: none;
}

#blog-content a:hover
{
  color: #1768c4;
  text-decoration: underline;
}

#blog-content code
{
  color: #11d8d8;
}

#blog-content pre
{
  padding: 15px;
  display: block;
  background-color: #111;
  border-radius: 10px;
}

#blog-content p:has(> img)
{
  text-align: center;
}

#blog-content p:has(> video)
{
  text-align: center;
}

#blog-content video+p:has(> em)
{
  text-align: center;
}

#blog-content img+em
{
  display: inline-block;
  margin-top: 10px;
}

#blog-content video+em
{
  display: inline-block;
  margin-top: 10px;
}

.devlog-list
{
  display: block;
  margin: auto;
}

.devlog-item
{
  display: block;
  margin-bottom: 10px;
}

.devlog-item a
{
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.devlog-item a:hover
{
  color: #0ecedb;
  text-decoration: underline;
}

.content
{
  color: #fff;
  margin-bottom: 10px;
  font-size: 18px;
}

.date
{
  display: inline-block;
  margin-right: 20px;
  color: #999;
}

.devlog-list .date 
{
  width: 8em;
}

@media all and (max-device-width: 450px)
{
  #wrapper
  {
    margin-left: 40px;
    width: 100%;
  }

  .devlog-list
  {
    width: 100%;
  }

  .devlog-list h1
  {
    font-size: 4em;
  }

  .devlog-item
  {
    font-size: 3em;
    margin-bottom: 1em;
  }

  .devlog-item div 
  {
    font-size: 0.75em;
    display: block;
  }

  #blog-content
  {
    font-size: 3em;
  }

  #blog-content img
  {
    display: block;
    max-width: 100%;
    margin: auto;
    border-radius: 10px;
    text-align: center;
  }

  #blog-content video 
  {
    display: block;
    max-width: 100%;
    margin: auto;
    border-radius: 10px;
    text-align: center;
  }
}