@import url('https://fonts.googleapis.com/css2?family=Kirang+Haerang&family=Rubik+Mono+One&display=swap');


body{
  background-image: linear-gradient(#f5c065 1px, transparent 1px), linear-gradient(90deg, #f5c065 1px, transparent 1px);
  background-size: 1rem 1rem, 1rem 1rem, 2px 2px, 2px 2px;
}

a{
  text-decoration:none;
  color:#31603D;
}

#name{
  font-family: 'Rubik Mono One', sans-serif;
  border: 4px solid #d23d2d;
  display: inline-block;
  font-size: 2.5rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: #d23d2d;
  background: #fbe9c9;
  box-shadow: 0.5rem 0.5rem 0 0 #f5c065;
  margin-top:2rem;
}

#name:hover{
  transform: translate(-0.15rem, -0.15rem);
	box-shadow: 0.65rem 0.65rem 0 0 #f5c065;
  cursor: pointer;
}

#nav{
  font-family:'Kirang Haerang', sans serif;
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #31603D;
  width:100%;
}

.link{
  padding: 2rem 4.5rem 0rem 4.5rem;
}

.hover:hover, #active{
  cursor: pointer;
  background: #31603D;
  color: white;
  display:inline-block;
}

/* photo grid */

#container{
  display: inline-grid;
  justify-content: center;
  gap:3rem;
  grid-template-columns:auto auto;
  margin-bottom: 4rem;
}


.photo-image{
  top:3rem;
  cursor: pointer;
  position:relative;
  /*border:2px solid #d23d2d;*/
  width:24rem;
  border-left:0.5rem solid #f5c065;
  border-top:0.5rem solid #f5c065;
  margin-bottom:3rem;
}

/* detail pages */

#container-lg{
  display: flex;
  justify-content: center;
  margin-top:3rem;
}

.photo-image-lg{
  left:0.5rem;
  width:38rem;
}

.photo-image-vt{
  left:0.5rem;
  width:28rem;
}

.info{
  width:28rem;
  margin-right:-3rem;
  margin-left:3rem;
}

.title{
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 2rem;
  color: #d23d2d;
  background: #fbe9c9;
  margin-top:0.5rem;
  line-height: 3rem;
  padding-left:0.5rem;
}

.detail{
  font-family:'Kirang Haerang', sans serif;
  font-size: 2rem;
  line-height:1rem;
  color: #31603D;
  padding-left:0.5rem;
}

.back{
  font-family:'Kirang Haerang', sans serif;
  font-size: 2rem;
  color: #31603D;
  padding:0.5rem;

}

/*about*/
#container-in{
  /*width:45rem;*/
  width:50%;
  margin:0 auto;
  margin-top:3rem;
}

.title-in{
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 2rem;
  color: #d23d2d;
  background: #fbe9c9;
  margin-top:0.5rem;
  line-height: 3rem;
  padding-left:0.5rem;
}

.detail-in{
  font-family:'Kirang Haerang', sans serif;
  font-size: 2rem;
  color: #31603D;
  padding-left:0.5rem;
}

/* contact form */

iframe{
  border:none; 
  margin-top:3rem;
  height:55rem;
}

:root {
	 font-size: 14px;
}
 @media screen and (max-width: 600px) {
	 :root {
		 font-size: 10px;
	}
  #container{
    display: inline-grid;
    justify-content: center;
    gap:3rem;
    grid-template-columns:auto;
    margin-bottom: 4rem;
  }
  
  .link{
    padding: 2rem 2.5rem 0rem 2.5rem;
  }

  #container-in{
    width:80%;
  }
  #container-lg{
    flex-direction: column;
  }

  .photo-image-lg{
    width:100%;
    margin:0 auto;
  }

  .photo-image-vt{
    width:100%;
    margin:0 auto;
  }

  .info{
    width:100%;
    margin:0 auto;
    margin-top:2rem;
  }
}

 @media screen and (max-width: 950px) {
	 :root {
		 font-size: 12px;
	}
  #container{
    display: inline-grid;
    justify-content: center;
    gap:3rem;
    grid-template-columns:auto;
    margin-bottom: 4rem;
  }
  
  .link{
    padding: 2rem 2.5rem 0rem 2.5rem;
  }

  #container-in{
    width:80%;
  }
  #container-lg{
    flex-direction: column;
  }

  .photo-image-lg{
    width:100%;
    margin:0 auto;
  }

  .photo-image-vt{
    width:100%;
    margin:0 auto;
  }

  .info{
    width:100%;
    margin:0 auto;
    margin-top:2rem;
  }
}

 @media screen and (max-width: 1100px) {
	 :root {
		 font-size: 12px;
	}
  #container{
    display: inline-grid;
    justify-content: center;
    gap:3rem;
    grid-template-columns:auto;
    margin-bottom: 4rem;
  }
  
  .link{
    padding: 2rem 2.5rem 0rem 2.5rem;
  }
  #container-in{
    width:80%;
  }

  #container-lg{
    flex-direction: column;
  }

  .photo-image-lg{
    width:100%;
    margin:0 auto;
  }

  .photo-image-vt{
    width:100%;
    margin:0 auto;
  }

  .info{
    width:100%;
    margin:0 auto;
    margin-top:2rem;
  }

}

 @media screen and (min-width: 1300px) {
	 :root {
		 font-size: 16px;
	}
  .back{
    display:block;
    width:66rem;
    margin:0 auto;
  }
}
 @media screen and (min-width: 1600px) {
	 :root {
		 font-size: 18px;
	}
  .back{
    display:block;
    width:66rem;
    margin:0 auto;
  }
}


/*
.icon{
  height:7rem;
  padding:2rem;
}
.contact{
  height:9rem;
}
.nav{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top:10%;
}
.about{
  background-image: url('https://static01.nyt.com/images/2024/06/30/books/books-flat-slide-FDQ7/books-flat-slide-FDQ7-articleLarge.png');
  background-size: 7rem;
  background-repeat: no-repeat;
  width:7rem;
  height:7rem;
  display: inline-block;
  position: relative;
}
.about span {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #FFF;

}
.about:hover span, .imgtxt:focus span {
  opacity: 1;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
*/