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

html,
body {
  background-color: light-dark(var(--bright), var(--dark));
  color: light-dark(var(--dark), var(--bright));
  height:100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Start variables */
:root {
  --animation-timing: 200ms ease-in-out;
  --bar-height: 0.5rem;
  --bright: #E9E9E9;
  --dark: #191919;
  --hamburger-gap: 0.375rem;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
  --hamburger-margin: 0.5rem;
  color-scheme: light dark;
}
/* End variables */

/* Start hamburger menu */
.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);

  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  left: var(--hamburger-margin);
  position: absolute;
  top: var(--hamburger-margin);
  width: max-content;
  z-index: 2;

  input {
    appearance: none;
    margin: 0;
    outline: none;
    padding: 0;
    pointer-events: none;
  }

  input:checked {
    opacity: 0;
    width: 0;
  }
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 0.0625rem solid var(--dark);
  box-shadow: 0 0 0 0.0625rem var(--bright);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  --bar-width: 3.75rem;

  background-color: var(--bright);
  border-radius: 624.9375rem;
  content: "";
  height: var(--bar-height);
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
  width: var(--bar-width);
}

.hamburger-menu:has(input:checked)::before {
  rotate: 45deg;
  translate: 0 calc(var(--bar-height) / -2);
  width: var(--x-width);
}

.hamburger-menu:has(input:checked)::after {
  rotate: -45deg;
  translate: 0 calc(var(--bar-height) / 2);
  width: var(--x-width);
}

.hamburger-menu:has(input:checked) + .navbar {
  translate: 0;
}
/* End hamburger menu */

.contact #email:after {
  content: "webmaster@grantangi.com";
}

h1 {
  color: var(--bright);
  font-family: serif, sans-serif;
  font-size: 3em;
  font-weight: 700;
  margin-block: 0.67em;
  padding: 2%;
  text-align: center;
  text-shadow: 0rem 0rem 15.625rem #000;
}

h2 {
  font-family: serif, sans-serif;
  font-size: 200%;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  
  @media screen and (max-width: 48rem) {
    font-size: 160%;
  }
}

p {
  font-family: serif, sans-serif;
  font-size: 140%;
  font-weight: 300;
  text-align: justify;
}

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

.intro {
  background: url("images/thumb_intro.webp") no-repeat 50% 50%;
  background-size: cover;
  display: table;
  height: 100%;
  margin: auto;
  top: 0;
  width: 100%;
  
  .inner {
    display: table-cell;
    font-size: 170%;
    line-height: 1.6;
    margin: auto;
    padding: 0.625rem;
    vertical-align: middle;
    width: 100%;
    
    .content {
      margin: auto;
      max-width: 37.5rem;
    }

    @media screen and (max-width: 48rem) {
      font-size: 120%;
      padding: 0;
    }
  }
}

.navbar {
  max-width: 10rem;
  min-height: 100vh;
  padding: 0.5rem 1rem;
  padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
  transition: translate var(--animation-timing);
  translate: -100%;
  
  a {
    color: var(--bright);
  }
}

.left-col {
  float: left;
  margin: 4% 0 4% 4%;
  width: 60%;

  @media screen and (max-width: 48rem) {
    margin: 0 0 3% 0;
    padding: 0 2%;
    width: 96%;
  }
}

.sidebar {
  float: left;
  margin: 4%;
  width: 26%;
  
  @media screen and (max-width: 48rem) {
    display: none;
  }
}

.app2 {
  columns: auto 20rem;
  gap: 1rem;
  margin: 2rem auto;
  max-width: 95vw;
  
  & img {
    border-radius: 1rem;
  }
}

.container {
  position: relative;
  text-align: center;
}

.bottom-left {
  background-color: var(--dark);
  bottom: 1rem;
  color: var(--bright);
  left: 2rem;
  position: absolute;
  right: 2rem;
}

.contact p {
  text-align: center;
}

.clearfix {
  clear: both;
  height: 3%;
}

footer p {
  background-color: light-dark(var(--dark), var(--bright));
  color: light-dark(var(--bright), var(--dark));
  padding: 1rem;
  text-align: center;
  
  .logo {
    height: 2rem;
    width: 2rem;
  }
}