:root {
  font-family: Arial, Helvetica, sans-serif;
  --background: hsl(0, 0%, 82%);
  --font: #141414;
  --light-font: rgb(20, 20, 20, 0.8);
  --internship: #fff;
  --card-border: rgb(0, 0, 0, 0.02);
  --focus-card-border: rgb(0, 0, 0, 0.04);
  --focus-primary: hsl(0, 0%, 8%, 0.9);
  --focus-secondary: hsl(0, 0%, 8%, 0.45);
  --focus-tertiary: hsl(0, 0%, 8%, 0.1);

  --blue: #1a73e8;
  --size: 1.5rem;
  --ray-size: calc(var(--size) * -0.4);
  --offset-orthogonal: calc(var(--size) * 0.7);
  --offset-diagonal: calc(var(--size) * 0.5);

  --uoft-red: hsl(5, 82%, 69%, 0.3);
  --live-blue: hsl(218, 98%, 79%, 0.3);
  --ooley-yellow: hsl(43, 100%, 66%, 0.3);
  --shopify-green: hsl(146, 28%, 64%, 0.3);
}

.dark {
  --background: #242424;
  --font: #d1d1d1;
  --light-font: rgba(245, 245, 245, 0.7);
  --internship: #d1d1d1;
  --card-border: rgb(245, 245, 245, 0.05);
  --focus-card-border: rgb(245, 245, 245, 0.1);
  --focus-primary: hsl(0, 0%, 96%, 0.9);
  --focus-secondary: hsl(0, 0%, 96%, 0.5);
  --focus-tertiary: hsl(0, 0%, 96%, 0.1);

  --uoft-red: hsl(5, 82%, 69%, 0.05);
  --live-blue: hsl(218, 98%, 79%, 0.05);
  --ooley-yellow: hsl(43, 100%, 66%, 0.05);
  --shopify-green: hsl(146, 28%, 64%, 0.05);
}

::selection {
  background: var(--background);
}


body {
  background-color: var(--background);
  overflow-y: scroll;
  margin: 0;
  padding: 30px 50px 100px 50px;
}

nav,
footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}

.nav-center {
  text-align: center;
}

nav {
  align-items: center;
}

footer {
  gap: 100px;
  margin-top: 150px;
  margin-bottom: 50px;
}

h1,
h2,
h3,
p {
  color: var(--font);
  margin: 0;
  font-weight: normal;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

p {
  font-size: 16px;
}

.grey {
  color: var(--light-font);
}

.home_icon {
  width: 40px;
  height: 40px;
}

#show_image_popup {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  height: 100%;
}

.vert-line {
  border-right: 1px solid var(--light-font);
}

.squeeze-content {
  max-width: 800px;
  justify-content: center;
  align-items: center;
  margin: auto;
  gap: 0;
}

#show_image_popup img {
  /* width: 100%; */
  /* height: 90vh; */
  /* width: 100%; */
  max-width: 100%;
  max-height: 100%;
}

#close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
}

#close-btn img {
  height: 48px;
  width: 48px;
}

.close-btn-area {
  position: absolute;
  top: 40px;
  right: 40px;
}

.image-background {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  display: none;
}

.image_icon {
  margin-right: 5px;
  width: 25px;
  height: 25px;
}

#image-show-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
}

.bot-space {
  margin: 40px;
  text-align: center;
}

.top-space {
  margin-top: 10px;
  margin-bottom: 5px;
}

a:link,
a:visited,
a:active {
  cursor: pointer;
  color: var(--font);
  text-decoration: none;
}

a:hover,
a.underline:hover {
  outline: none;
  text-decoration: underline;
}

a.underline:focus-visible,
a:focus-visible {
  outline: 2px solid var(--blue);
}

a.underline {
  text-decoration: underline;
}

.max-width {
  max-width: 1920px;
}

.intro {
  margin-top: 80px;
}

.home {
  margin-bottom: 100px;
}

.group {
  max-width: 250px;
}

html {
  scroll-behavior: smooth;
}

.top {
  min-height: calc(100vh - 110px);
}

.experiences {
  margin-top: 50px;
}

.spacer {
  flex: 1;
}

.about-img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-width: 400px;
  max-height: 400px;
  border-radius: 100%;
  margin-bottom: 20px;
}

.about-text {
  max-width: 980px;
}

.wrapper {
  width: 100%;
}

.banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--live-blue);
  backdrop-filter: blur(50px);
  border-radius: 10px;
  border: 6px solid var(--card-border);
  height: 198px;
  cursor: pointer;
  transition: border 0.2s;
}

.banner-link:focus-visible .banner {
  border: 6px solid var(--blue);
  outline: none;
  background-size: 5px 5px;
  background-image: radial-gradient(circle at top left,
      var(--focus-tertiary) 0 13%,
      transparent 10%),
    radial-gradient(circle at top right,
      var(--focus-tertiary) 0 13%,
      transparent 10%),
    radial-gradient(circle at bottom left,
      var(--focus-tertiary) 0 13%,
      transparent 10%),
    radial-gradient(circle at bottom right,
      var(--focus-tertiary) 0 13%,
      transparent 10%),
    radial-gradient(var(--focus-tertiary) 0 26%, transparent 20%);
}

.banner-link:hover:not(:focus-visible) .banner {
  border: 6px solid var(--focus-card-border);
}

#uoft {
  background-color: var(--uoft-red);
}

#ooley {
  background-color: var(--ooley-yellow);
}

#shopify {
  background-color: var(--shopify-green);
}

.logo {
  border-radius: 10px;
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: all 0.2s;
}

.wrapper:hover .logo {
  opacity: 70%;
}

#uoft:hover .link,
#live:hover .link,
#ooley:hover .link,
#shopify:hover .link {
  fill: var(--focus-primary);
}

.link {
  position: absolute;
  bottom: 20px;
  right: 20px;
  fill: var(--focus-secondary);
  transition: fill 0.2s;
}

#map {
  width: 100%;
  height: 400px;
  border-radius: 10px;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 60px;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}

.photos-img img,
.gallery img {
  width: 300px;
  height: 375px;
  border-radius: 10px;
  border: 6px solid transparent;
  transition: border 0.2s;
}

.photos-img:hover img {
  border: 6px solid var(--focus-secondary);
}

.toggle {
  appearance: none;
  outline: none;
  cursor: pointer;
  min-width: var(--size);
  min-height: var(--size);
  box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
  border-radius: 999px;
  color: #d1d1d1;
  transition: transform 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s;
}

.toggle:hover {
  opacity: 0.8;
}

.toggle:focus-visible {
  outline: 2px solid var(--blue);
}

.toggle:checked {
  transform: scale(0.75);
  color: #141414;
  box-shadow: inset 0 0 0 var(--size),
    calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
    var(--offset-orthogonal) 0 0 var(--ray-size),
    0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
    0 var(--offset-orthogonal) 0 var(--ray-size),
    calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
    var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
    calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
    var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
}

.toggle {
  z-index: 1;
}

@media only screen and (max-width: 1270px) and (min-width: 769px) {
  footer {
    gap: 50px;
  }
}

@media only screen and (max-width: 1070px) {
  footer {
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 0;
  }

  footer .group .bot-space {
    margin-bottom: 0;
  }

  footer .group br {
    display: none;
  }

  footer .group p:nth-child(1) {
    margin-bottom: 5px;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --size: 1rem;
  }

  body {
    padding: 16px 16px 50px 16px;
  }

  nav {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  nav div h3:nth-child(2) {
    display: none;
  }

  nav .spacer {
    display: none;
  }

  .top {
    min-height: 100px;
  }

  .intro {
    margin-top: 80px;
  }

  .intro.home h1 {
    margin-bottom: 20px;
  }

  .banner {
    height: 130px;
  }

  #live {
    background-color: hsl(218, 98%, 79%, 0.2);
  }

  #uoft {
    background-color: hsl(5, 82%, 69%, 0.2);
  }

  #ooley {
    background-color: hsl(43, 100%, 66%, 0.2);
  }

  #shopify {
    background-color: hsl(146, 28%, 64%, 0.2);
  }

  .vert-line {
    border: none;
  }

  .row {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  .link {
    bottom: 10px;
    right: 10px;
    height: 20px;
    width: 20px;
  }

  h1 {
    font-size: 18px;
  }

  h2 {
    font-size: 16px;
  }

  h3 {
    font-size: 14px;
  }

  p {
    font-size: 12px;
  }

  #map {
    height: 300px;
  }
}