/* ---------------- BASE ---------------- */

html {
  width: 100%;
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;

  min-height: 100vh;

  background-color: black;
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* fixed pode não ir no Edge */
  background-attachment: scroll;

  overflow-x: hidden;
  overflow-y: auto;

  font-family:
    "MS Sans Serif",
    Tahoma,
    sans-serif;

  image-rendering: pixelated;
}

/* ---------------- DESKTOP ---------------- */

#desktop {
  width: 100%;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 20px;
}

/* ---------------- JANELAS ---------------- */

.window,
.main-window,
.archives-window,
.about-window {
  width: 700px;
  max-width: 100%;

  position: relative;
}

.post-window {
  width: 800px;
  max-width: 100%;

  position: relative;
}

.error-window {
  width: 350px;
  max-width: 100%;

  position: relative;
}

/* ---------------- TITLE BAR ---------------- */

.title-bar {
  user-select: none;
}

/* ---------------- CONTEÚDO ---------------- */

.window-body {
  min-height: 400px;

  display: flex;
  flex-direction: column;

  padding: 25px;
}

.post-window .window-body,
.archives-window .window-body,
.about-window .window-body {
  height: auto;
  min-height: 500px;
}

.about-window .window-body {
  min-height: 550px;
}

.error-window .window-body {
  height: auto;

  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ---------------- FONTES ---------------- */

h1,
h2,
h3,
.title-bar-text,
button,
input,
textarea {
  font-family:
    "MS Sans Serif",
    Tahoma,
    sans-serif !important;
}

/* ---------------- HOME ---------------- */

.window-body h1 {
  margin-top: 30px;
  margin-bottom: 0;

  text-align: center;

  font-size: 40px;
  font-weight: bold;
}

.window-body p {
  margin-top: 12px;
  margin-bottom: 20px;

  text-align: center;

  font-size: 13px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- LINHA ---------------- */

hr {
  width: 100%;

  margin-top: 10px;
  margin-bottom: 20px;
}

/* ---------------- BOTÕES ---------------- */

.home-buttons,
.archive-buttons,
.about-buttons,
.error-buttons {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;
}

.home-buttons {
  gap: 15px;

  margin-bottom: 20px;
}

.archive-buttons,
.about-buttons {
  margin-top: 20px;
}

.error-buttons {
  margin-top: 15px;
}

.home-buttons a,
.archive-buttons a,
.about-buttons a,
.error-buttons a {
  display: flex;
  justify-content: center;

  text-decoration: none;
}

.home-buttons button {
  min-width: 110px;
}

button:hover {
  cursor: pointer;
}

/* ---------------- RECENT POSTS ---------------- */

#recentpostlistdiv {
  width: 100%;

  font-size: 13px;

  font-family: Tahoma, sans-serif;
}

#recentpostlistdiv h2,
#recentpostlistdiv h3 {
  margin-top: 0;
  margin-bottom: 10px;

  font-size: 16px;

  font-family:
    "MS Sans Serif",
    Tahoma,
    sans-serif !important;
}

#recentpostlistdiv a {
  font-size: 13px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- POSTS ---------------- */

#postTitleH1 {
  margin-top: 0;
  margin-bottom: 10px;

  text-align: center;

  font-size: 32px;

  font-family:
    "MS Sans Serif",
    Tahoma,
    sans-serif !important;
}

#postDate {
  margin-top: 0;
  margin-bottom: 20px;

  text-align: center;

  font-size: 14px;
  font-weight: normal;

  font-family: Tahoma, sans-serif;
}

.post-window p {
  text-align: left;

  font-size: 16px;
  line-height: 1.6;

  font-family: Tahoma, sans-serif;
}

#nextprev {
  margin-top: 30px;

  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- 404 ---------------- */

.error-window p {
  margin: 5px 0;

  text-align: center;

  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- ARCHIVES ---------------- */

.archives-window h1 {
  margin-top: 0;

  text-align: center;

  font-size: 33px;
  font-weight: bold;

  font-family:
    "MS Sans Serif",
    Tahoma,
    sans-serif !important;
}

.archives-window p {
  text-align: center;

  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

#postlistdiv {
  width: 100%;

  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

#postlistdiv a {
  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- ABOUT ---------------- */

.about-intro {
  margin-bottom: 20px;

  text-align: center;

  font-size: 14px;
  line-height: 1.5;

  font-family: Tahoma, sans-serif;
}

.about-window h2 {
  margin-top: 10px;
  margin-bottom: 10px;

  font-size: 20px;

  font-family:
    "MS Sans Serif",
    Tahoma,
    sans-serif;
}

.about-window ul {
  margin-top: 0;
  margin-bottom: 20px;

  padding-left: 25px;

  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- SOCIAIS ---------------- */

.social-links {
  display: flex;
  gap: 15px;

  flex-wrap: wrap;
}

.social-links a {
  font-size: 14px;

  font-family: Tahoma, sans-serif;
}

/* ---------------- IMAGENS ---------------- */

img {
  max-width: 100%;
  height: auto;
}

/* ---------------- ÁUDIO ---------------- */

audio {
  display: none;
}

/* ---------------- RESPONSIVO ---------------- */

@media (max-width: 900px) {

  .window,
  .main-window,
  .archives-window,
  .about-window,
  .post-window {
    width: 100%;
  }

  .window-body {
    padding: 18px;
  }

  .window-body h1 {
    font-size: 30px;
  }

  #postTitleH1 {
    font-size: 26px;
  }

}

@media (max-width: 600px) {

  #desktop {
    padding: 10px;
  }

  .window-body {
    padding: 14px;
  }

  .window-body h1 {
    font-size: 25px;
  }

  .home-buttons {
    flex-direction: column;
  }

  .home-buttons button {
    width: 100%;
  }

}