/*  (c) Yousif A.
    design.css 0.20
*/

:root {
  box-sizing: border-box;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  display: grid;
    grid:
      'body' 1fr
      / 1fr;
    place-items: stretch / stretch;
    place-content: start / center;
  --color-background:
    rgb(238 238 235);
  --color-text:
    rgb(40 40 42);
  --font-size-calc-divisor: 16;
    --font-size-14px:
      calc(14rem / var(--font-size-calc-divisor));
    --font-size-18px:
      calc(18rem / var(--font-size-calc-divisor));
    --font-size-21px:
      calc(21rem / var(--font-size-calc-divisor));
    --font-size-30px:
      calc(30rem / var(--font-size-calc-divisor));
  --section-padding: 2rem;
}

body {
  grid-area: body;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  display: grid;
    grid:
      'header' 1fr
      'main' minmax(400px, auto)
      'aside' 1fr
      / 1fr;
    place-items: stretch / stretch;
    place-content: start / center;
  line-height: 2;
  background-color:
    var(--color-background);
  overflow: auto;
}

@media screen and (width >= 750px) {
  body {
    max-width: 700px;
    display: grid;
      grid:
        'header header' auto
        'aside main' minmax(750px, auto)
        / 1fr 1fr;
  }
}

@media screen and (width >= 1000px) {
  body {
    max-width: 2000px;
    display: grid;
      grid:
        'header header header' auto
        'aside main .' minmax(750px, auto)
        / 1fr 2fr 1fr;
  }
}

body > header {
  grid-area: header;
  display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
}

body > main {
  grid-area: main;
  padding:
    var(--section-padding);
  display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
  overflow: hidden;
}

body > section {
  grid-area: aside;
  padding:
    0
    var(--section-padding)
    var(--section-padding)
    var(--section-padding);
  display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

@media screen and (width >= 750px) {
  body > section {
    padding:
      0
      var(--section-padding);
    display: flex;
      justify-content: center;
      align-items: center;
  }
}

svg#x-menu {
  max-height: 4rem;
  fill: var(--color-text);
}

h1 {
  font-family: 'georgiapro';
    font-size:
      var(--font-size-30px);
  color:
    var(--color-text);
}

p {
  font-family: 'georgiapro';
    font-size:
      var(--font-size-14px);
  color:
    var(--color-text);
}

@media screen and (width >= 750px) {
  p {
    font-size:
      var(--font-size-18px);
  }
}

a {
  all: unset;
  cursor: pointer;
}

a#main {
  width: 100%;
  height: 100%;
}

ul[role='list'] {
  display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  list-style: none;
}

li {
  font-family: 'georgiapro';
    font-size:
      var(--font-size-14px);
  color:
    var(--color-text);
  white-space: nowrap;
}

@media screen and (width >= 750px) {
  li {
    font-size:
      var(--font-size-18px);
  }
}

picture {
  width: 100%;
  height: 100%;
}

img {
  width: inherit;
  height: inherit;
  display: block;
  object-fit: contain;
}