/* BLOCKS _______________________________________________________________________________*/

body {
  display: grid;
  grid-template: 
  'header header header' auto
  'clmn-left main clmn-right' minmax(0, 1fr)
  'footer footer footer' auto / 1fr 70% 1fr;
  font-family: custom-hebrew;
  font-size: 1rem;
  margin: 0;
  min-height: 100vh;
  width: 100vw;
}

body::-webkit-scrollbar {
  display: none;
}

footer {
  background-color: #ffffff;
  grid-area: footer;
  width: 100%;
  z-index: 0;
}

header {
  background-color: #000000;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4);
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 3;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

main {
  background-color: #ffffff;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  clip-path: inset(-50px -50px 0px -50px);
  grid-area: main;
  padding: 3vw;
  z-index: 2;
}

.backgrounds-div {
  display: grid;
  grid-area: clmn-left / clmn-left / clmn-right / clmn-right;
  grid-template: 'bgd-left bgd-main bgd-right' minmax(0, 1fr) / minmax(0, 1fr) 70% minmax(0, 1fr);
  z-index: 1;
}

.bgd-desktop {
  background-image: url(../img/background/pattern_background.png);
  display: grid;
  grid-template: 
    'ethan' auto
    'pattern' minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
}

.bgd-frame {
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4);
  grid-area: bgd-left / bgd-left / bgd-right / bgd-right;
}

.bgd-mobile {
  display: none;
  position: relative;
}

.desktop-hebrew-txt {
  font: 100px/140px custom-hebrew, serif;
  margin-bottom: 0;
  margin-top: 0;
  padding-bottom: 1.5vw;
}

.ftr-btns {
  padding: 1.25rem;
  text-align: center;
  white-space: nowrap;
}

.greeter {
  display: grid;
  gap: 2rem 0;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-template-rows: 1fr;
}

.modal {
  position: relative;
  z-index: 5;
}

.modal-list {
  grid-area: main;
}

.project {
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
  display: grid;
  gap: 1rem;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-template-rows: auto;
  margin-top: 2rem;
  padding: 1rem;
}

.ethans-résumé-modal {
  background-color: #ffffff;
  box-shadow: 0 0 20px 5px #222222;
}

.screen-dimmer {
  background-color: rgba(0, 0, 0, 0.4);
  grid-area: header / header / footer / footer;
  z-index: 4;
}


/* ELEMENTS _______________________________________________________________________________*/

.bgd-desktop__frame {
  box-shadow: 0 0 160px 150px rgba(0, 0, 0, 1);
  grid-area: pattern;
  width: 100%;
}

.bgd-desktop__img {
  aspect-ratio: 239 / 500;
  box-shadow: 0 0 160px 150px rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  min-width: 100%;
}

.bgd-desktop__picture {
  grid-area: ethan;
}

.bgd-mobile__img {
  display: block;
  width: 100%;
}

.bgd-mobile__txt {
  font: 10vw/0 custom-hebrew, serif;
  margin: 0;
  position: absolute;
  top: 50%;
  z-index: 2;
}

.ftr-btns__desc {
  font: bold 1.25rem/1 custom-hebrew;
  margin: 0;
}

.ftr-btns__img {
  display: block;
  height: 2.5rem;
  margin-bottom: 0.313rem;
  margin-top: 0.625rem;
}

.ftr-btns__img-link {
  display: inline-block;
  vertical-align: top;
}

.greeter__itm {
  display: flex;
  flex-direction: column;
  grid-area: span 1 / span 1;
  justify-content: space-between;
}

.greeter__résumé {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 58.445%;
}

.greeter__txt {
  margin: 0 2rem 0 2rem;
  padding-bottom: 0.625rem;
  text-align: center;
}

.greeter__vid {
  aspect-ratio: 119 / 90;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}

.header__nav {
  text-align: center;
}

.main__title {
  margin-top: 0;
}

.nav__link {
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  font-size: 1.563rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  padding-top: 0.188rem;
}

.project__h2 {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin: 0 0 3% 0;
}

.project__img {
  display: block;
  width: min(100%, 50rem);
}

.project__itm {
  align-items: center;
  display: flex;
  flex-direction: column;
  grid-area: span 1 / span 1;
  justify-content: space-between;
}

.project__link {
  color: #222222;
  text-decoration: none;
}

.project__p {
  margin: 0;
}

.résumé-modal__btn {
  white-space: nowrap;
}

.résumé-modal__img {
  aspect-ratio: 8.5 / 11;
  width: 100%;
}

.résumé-modal__nav {
  background-color: #555555;
}


/* MODIFIERS _______________________________________________________________________________*/

.bgd-desktop--left {
  background-position: right top;
  grid-area: bgd-left;
  justify-items: start;
}

.bgd-desktop--right {
  background-position: left top;
  grid-area: bgd-right;
  justify-items: end;
}

.project__img--small {
  width: min(50%, 25rem);
}

.résumé-modal__btn--x {
  text-align: right;
  width: 100%;
}


/* UTILITIES _______________________________________________________________________________*/

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.centered-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.centered-txt {
  text-align: center;
}

.hidden {
  display: none;
}

.no-scroll {
  overflow: hidden;
}

.symbol {
  font-family: symbola, Arial, sans-serif;
  text-decoration: none;
}


/* AT-RULES _______________________________________________________________________________*/

@font-face {
  font-display: swap;
  font-family: custom-hebrew;
  src: local("Ezra SIL"), local("Ezra SIL SR"), url(../font/ezrasilsr.ttf); /* https://opensiddur.org/wp-content/uploads/fonts/display-font-charmap.php?fnt=EzraSIL-SR */
}

@font-face {
  font-display: swap;
  font-family: symbola;
  src: local("Symbola"), url(../font/symbola.ttf); /* https://www.fontspace.com/symbola-font-f22021 */
}

@media screen and (max-width: 1042px) {
  body {
    grid-template: 
    'header'
    'bgd-mobile'
    'main' 1fr
    'footer' / 1fr;
  }
  main {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.4);
    clip-path: none;
  }
  .backgrounds-div {
    display: block;
    grid-area: bgd-mobile;
  }
  .bgd-desktop {
    display: none;
  }
  .bgd-frame {
    display: none;
  }
  .bgd-mobile {
    display: block;
  }
  .desktop-hebrew-txt {
    display: none;
  }
  .ftr-btns__desc {
    font-size: 0.938rem;
    line-height: 1;
  }
  .ftr-btns__img {
    height: 1.563rem;
  }
  .modal-list {
    grid-area: bgd-mobile / bgd-mobile / main / main;
  }
  .nav__link {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
  }
  .nav__link:active {
    background-color: #ffffff;
    color: #000000;
  }
  .ethans-résumé-modal {
    width: 100%;
  }
}

@media screen and (min-width: 1043px) {
  .nav__link:hover {
    background-color: #ffffff;
    color: #000000;
    transition-duration: 150ms;
  }
}

@media screen and (min-width: 6373px) {
  .bgd-desktop--left {
    justify-self: stretch;
  }
  
  .bgd-desktop--right {
    justify-self: stretch;
  }
}