/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */

:root {
  --bg: #0b1529;
  --bgSoft: #1f3050;
  --text: #dee4eb;
  --textSoft: #cbd2d9;
}
* {
  margin: 0px;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* convert 1rem => 10px, instead of using 16px */
}

a {
  color: inherit;
}

body {
  font-size: 1.6rem; /* and now set default font-size to 16px */
  color: var(--text);
  background-color: var(--bg);
  font-family: "Lora", "Playfair Display","Roboto", "serif";
}

body.light {
  --bg: #dee4eb;
  --text: #0b1529;
  --bgSoft: #cbd2d9;
  --textSoft: #1f3050;
}

h1, h2, h3 {
  font-family: "Pirata one";
}

.container {
  max-width: 1366px;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  min-height: 100vh;
  /* background-color: darkslateblue; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 1536px) {
  .container{
    max-width: 1366px;
  }
}

@media (max-width: 1366px) {
  .container{
    max-width: 1280px;
  }
}

@media (max-width: 1280px) {
  .container{
    max-width: 1025px;
  }
}

@media (max-width: 1025px) {
  .container{
    max-width: 768px;
  }
}

@media (max-width: 768px) {
  /* mobile screen */
  .container{
    max-width: 640px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 640px) {
  /* mobile screen */
  .container{
    max-width: 475px;
    padding-right: 10px;
    padding-left: 10px;
  }
}