/* media query
Breakpoint manager:

1 em is 16 pixels (browser standard)
screen sizes:
phone up to 600 px which is 37.5em
tab-port 600 to 900px - 56.25em
tab-land 900 to 1200px - 75em
normal 1200- 1800px
big-desk more than 1800px 112.5em

order of media query:base + Typography > genral layout + Grit > page layout > components
*/
:root {
  --color-primary: #c69963;
  --color-primary-dark: #B28451;
  --color-secondary: #101d2c;
  --color-grey-light-2: #aaa;
  --color-grey-light-1: #f9f7f6;
  --color-grey-dark-1: #54483A;
  --color-grey-dark-2: #6D5D4B;
}

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 65.5%;
}
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-grey-dark-2);
  background-image: linear-gradient(to right bottom, var(--color-primary), var(--color-primary-dark));
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 0.5rem;
}

.symbol {
  max-width: 15rem;
}

.winter {
  max-width: 40%;
}
@media (max-width: 75em) {
  .winter {
    Max-width: 35%;
  }
}
@media (max-width: 56.25em) {
  .winter {
    Max-width: 40%;
  }
}
@media (max-width: 37.5em) {
  .winter {
    Max-width: 100%;
  }
}

.sub-container {
  background-image: url("../img/displaybricks-main-picture.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 75%;
  margin: 5rem auto;
  border-radius: 5px;
  padding-bottom: 5rem;
}
@media (max-width: 56.25em) {
  .sub-container {
    Max-width: 100%;
    margin: 0 auto;
  }
}

.news {
  background-color: var(--color-grey-light-1);
  opacity: 0.9;
  max-width: 75%;
  margin: 3rem auto;
  text-align: center;
  padding: 5rem;
  border-radius: 5px;
  box-shadow: 10px 10px 5px var(--color-grey-dark-2);
}
@media (max-width: 56.25em) {
  .news {
    Max-width: 100%;
  }
}

h1 {
  text-align: center;
  font-size: 2.2rem;
}

p {
  font-size: 1.6rem;
}