/* styles */
html{
  scroll-behavior: smooth;
  background: #E2DAC6;
}
body {
  font-family: Tahoma, Times New Roman;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: #0f0f0f;
}
h1, h2{
  font-family: Tahoma, Times New Roman;
  font-weight: 400;
  text-align: center;
}
.title {
  color: pearl;
  text-shadow: 2px 2px black;
  text-align: center;
  padding: 48px;
  padding-top: 96px;
  border-top: 1px black solid;
}
ul {
  list-style: none;
}
a{
  color: #0f0f0f;
}

/* NAV */
.nav-bar{
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #F5DEB3;
}
.nav-link{
  display: flex;
  align-items: center;
  text-align: center;
  list-style: none;
  margin-left: auto;
  padding: 0px 10px 0px 10px;
  margin-right: 14px;
  font-family: Verdana; 
}
.logo-image {
  width: 25px;
  height: 25px;
  margin-left: 22px;
  border: 10px solid #BA8759;
  border-radius: 2px;
  box-shadow: 2px 2px 1px black;
  object-fit: cover;
}
.nav-link a {
  display: block;
  font-size: 15px;
  padding: 0px 10px 0px 10px;
  text-decoration: none;
}
.nav-link a::hover{
  background-color: oak;
  cursor: pointer;
  color: #b0b0b0;
  text-shadow: 2px 2px 1px black;
}

/* WELCOME SECTION */
.welcome-section{
  display: flex;
  width: 100%;
  background-position: center;
  height: 40%;
  justify-content: center;
  align-items: center;
  background-color: #6F4E37;
  background-size: cover;
}

.welcome-section > p{
  font-size: 20px;
  text-align: center;
  font-weight: 120;
  font-style: sans-serif;
  color: #D7A98C;
}
.media{
  background-color: #C19A6B;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 20px 10px 10px;
  gap: 10px;
  padding: 20px;
  border: 3px solid brown;
  border-radius: 10px;
  box-shadow: 2px 2px 20px 2px;
}
.textbox{
  display: flex;
  background-color: almond;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 10px;
  padding-left: 22px;
}
.random{
  display: inline-block;
  padding: 10px;
  border-radius: 2.2px;
  align-items: center;
  align-self: center;
}
.random::hover{
  background-color: #E9D7AB;
}
/* TEAM SECTION */
.team{
  display: flex;
  flex-flow: row wrap;
  background-color: burlywood;
  padding: 0px 24px 96px 24px;
}
.team-member{
  display: grid;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 60%;
  gap: 6px;
  padding: 10px;
  color: pearl;
  text-shadow: 3px 3px 2px black;
}
.team-member-pic{
  width: 130px;
  height: 130px;
  border: 10px solid #F5DEB3;
  border-radius: 18px;
  box-shadow: 3px 3px 4px black;
  object-fit: cover;
}

.team-member h2 {
  font-size: 30px;
  color: pearl;
}

/* QUOTE SECTION */
.quote{
  display: flex;
  font-style: typeface;
  background-color: #FAD6A5;
  font-size: 30px;
  line-height: 70px;
  flex-direction: column;
  padding: 96px;
  border-bottom: solid black 1px;
}
.quote h2 {
  align-items: center;
  text-align: center;
  font-style: typeface;
  font-weight: 500;
  color: pearl;
}
.quote p{
  align-items: center;
  text-align: center;
  font-style: typeface;
  font-weight: 400;
  color: pearl;
}
/* WORK & VOLUNTEERING EXP */
.work-exp{
  display: flex;
  font-style: typeface;
  background-color: #FAD6A5;
  font-size: 30px;
  line-height: 50px;
  flex-direction: column;
  height: 500px;
  padding: 20px;
  border: 1px solid #f1f1f1;
}
.work{
  background-color: #C19A6B;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 2px 2px 20px 2px;
}
.work-exp::hover .work{
  transform: rotateY(180deg);
}
.work-exp-pic{
  width: 130px;
  height: 130px;
  border: 10px solid #F5DEB3;
  border-radius: 18px;
  box-shadow: 3px 3px 4px black;
  object-fit: cover;
}
.front, .info {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
.volunteer{
  text-align: center;
  justify-content: center;
  display: flex;
  flex-flow: row wrap;
  padding: 128px 128px 96px;
  background-color: #EFDECD;
}

.volunteer-exp{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  color: pearl;
  padding: 6px;
  width: auto;
}

.volunteer-pic {
  width: 250px;
  height: 250px;
  border: 14px solid #F5DEB3;
  border-radius: 20px;
  box-shadow: 3px 3px 4px black;
  object-fit: cover;
}

/* PORTFOLIO SECTION */
.portfolio{
  text-align: center;
  justify-content: center;
  display: flex;
  flex-flow: row wrap;
  padding: 128px 128px 96px;
  background-color: #997950;
}

.portfolio-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  color: pearl;
  padding: 6px;
  width: auto;
}
.portfolio-icon{
  width: 250px;
  height: 250px;
  border: 10px solid #F5DEB3;
  border-radius: 8px;
  box-shadow: 3px 3px 4px black;
  object-fit: cover;
}
.portfolio-txt{
  font-family: Tahoma, Times New Roman;
  text-align: center;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 400;
}
/* contact section */
.contact-me{
  display: flex;
  flex-direction: column;
  justify-content: column;
  text-align: center;
  width: 100%;
  background-color: #C7B595;
  font-weight: 400;
}
.contact-container{
  margin-bottom: 20px;
}
.contact-row-info{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 15px;
}
.contact-icon{
  height: 30px;
  width: 30px;
}
.contact-me a{
  color: pearl;
  text-decoration: none;
  font-weight: 500;
  text-shadow: black 2px 2px;
}
.contact-me a::hover{
  color: #EAE3D2;
  text-direction: none;
  font-weight: 500;
  text-shadow: black 2px 2px;
}
/* email */
.email{
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}
.email-container{
  background-color: #C19A6B;
  justify-content: center;
  align-items: center;
  max-width: 1100px;
  margin: 10px 5px 5px;
  gap: 10px;
  padding: 20px;
  border: 3px solid brown;
  border-radius: 10px;
  box-shadow: 2px 2px 20px 2px;
}
.email-header{
  font-size: 20px;
  text-align: center;
}
.subtext{
  font-size: 15px;
}
.submit{
  display: block;
  flex-shrink: 0;
  width: 50%;
  color: #eae0c8;
  height: 3em;
  font-size: 25px;
  background-color: #A17249;
  border-color: #DCB68A;
}
/* for Terra */
.terraglotte{
  align-items: center;
  position: absolute;
  opacity: 1;
  pointer-events: auto;
  left: 10em;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: -10em;
  border: 4px dotted #E2DAC6;
  background-color: #E9E4D4;
  padding: 0.75rem;
  border-radius: 0.25rem;
  display: none;
  opacity: 0.75;
  flex-direction: column;
  text-align: center;
  color: pearl;
  width: 40em;
  box-shadow: 3px 3px 4px black;
}
.terrapfp{
  width: 30px;
  height: 30px;
  overflow: hidden;
  align-items: left;
  top: 0;
}
.secondndanniversary{
  position: relative;
  color: #eae0c8;
  font-size: 10px;
  opacity: 1;
  background: black;
  text-align: center;
  pointer-events: none;
}
.terraname{
  position: absolute;
  width: 100%;
  font-family: Copperplate;
  top: none;
  font-size: 15px;
  margin: 0 4em 0 4m;
  text-align: left;
  opacity: 1;
  color: #9E3623;
  pointer-events: none;
}
.link {
  border: none;
  color: black;
  background: none;
  left: 10em;
  display: inline-block;
  padding: 10px;
  border-radius: 2.2px;
  align-self: center;
  position: relative;
}
.link::hover {
  background-color: #EFE0CD;
  top: 0;
}

/* footer */
.footer p{
  text-align: center;
  color: black;
  font-size: 20px;
  padding: auto;
  background-color: #E2DAC6;
}