/* Default / common styling */

/* Reset CSS */
html,body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: scroll;
}

/* Default Body Style */
body {
  background: url("../resources/intro.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: vertical;
  background-attachment: fixed;
}

/* Default Page Grid Layout */
.page {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "left-sidebar navbar right-sidebar" "left-sidebar content right-sidebar" "left-sidebar footer right-sidebar";
}

.left-sidebar {
  grid-area: left-sidebar;
}

.right-sidebar {
  grid-area: right-sidebar;
}

.content {
  max-width: 100vw;
  margin-top: 15vh;
  background-color: rgba(231, 227, 220, 100);
  opacity: 0.8;
  font-family: "Avanta Garda";
  font-size: 1em;
  text-align: center;
  grid-area: content;
}

.flag {
  max-width: 50%;
}

/* Styling for small screens */
@media (max-width: 576px) {
  .page {
    grid-template-columns: 1fr 4fr 1fr;
  }
}

/* Styling for high-res mobile screens */
@media (-webkit-min-device-pixel-ratio: 3) and (min-width: 577px) {
  .content {
    font-size: 2em;
  }
}