@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Ubuntu/Ubuntu-Regular.woff)
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: url(../fonts/Ubuntu/Ubuntu-Bold.woff)
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: normal;
  src: url(../fonts/Ubuntu/Ubuntu-Italic.woff)
}

/* EBGARAMOND */
@font-face {
  font-family: 'ebgaramond';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/ebgaramond/ebgaramond-regular.woff);
}
@font-face {
  font-family: 'ebgaramond';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/ebgaramond/ebgaramond-bold.woff);
}
@font-face {
  font-family: 'ebgaramond';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/ebgaramond/ebgaramond-semibold.woff);
}
:root {
  --black: #060808;
  --dark-green: #122123;
  --white: #EDFAF2;
  --accent-green: #2C573B;
}
body header {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--black);
  font-family: ebgaramond;
}

/* backgound images */
.top_left_corner,
.top_right_corner,
.bottom_left_corner,
.bottom_right_corner {
  position: absolute;
  z-index: 1;
}
.top_left_corner {
  left: 0;
  top: 0;
  width: 30vw;
}
.top_right_corner {
  top: 0;
  width: 70vw;
  right: 0;
}
.bottom_left_corner {
  bottom: 0;
  left: 0;
  width: 60vw;
}
.bottom_right_corner {
  bottom: 0;
  right: 0;
  width: 20vw;
}
nav figure img:has(+ a:hover),
nav figure img:hover {
/*   transform: scale(1.2); */
}
figure a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4%;
  font-size: 2.5rem;
  color: var(--white);
  z-index: 2;
  padding: 20%;
}
figure:last-child a {
  transform: translate(-48%);
  top: 0;
}
.me_with_text {
  display: none;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
nav figure {
  position: relative;
  z-index: 2;
}
nav figure img {
  min-width: 20rem;
  transition: transform 0.4s;
  z-index: 2;
}
nav figure:last-child img {
  min-width: 22rem;
}

nav figure .animated{
  display: none;
}

nav figure:has(a:hover) img:nth-child(1){
  display: none;
}

nav figure:has(a:hover) img.animated{
  display: block;
}

@media screen and (min-width:1081px) {
  .me_with_text {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 80vh;
  }
  nav figure:first-child {
    position: absolute;
    left:50%;
    transform: translate(calc(-100% - 200px - 4rem));
  }
  nav figure:last-child {
    position: absolute;
    right: 50%;
    transform: translate(calc(100% + 200px + 3rem), -2vw);
  }
  nav figure:last-child img {
    min-width: 26vw;
  }
  nav figure img {
    min-width: 18vw;
    transition: transform 0.4s;
    z-index: 2;
  }
  figure a {
    font-size: clamp(20px, 2vw + 1rem, 48px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    color: var(--white);
    z-index: 2;
  }
  .top_left_corner {
    width: 20vw;
  }
  .top_right_corner {
    width: 40vw
  }
  .bottom_left_corner {
    width: 30vw;
  }
  .bottom_right_corner {
    width: 13vw;
  }
}
}