@font-face {
  font-family: brittanic-bold;
  src: url(britanic.ttf);
}

@font-face {
    font-family: philosopher;
    src: url(Philosopher-Regular.ttf);
}

.landingTitle {
    font-size: 80px;
    color: #FABE24;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: fit-content;
    width: 70%;
}

.landingTitleIntro {
    font-size: 100px;
    color: #FABE24;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: fit-content;
    width: 70%;
}

.landingTitleDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landingBodyDiv {
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-family: serif;
    color: white;
}

.landingBodyTextDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    margin-top: 0px;
    padding: 0px;
}

.landingBodyTextDiv h1 {
    margin: 4px;
}

.landingDiv {
    background-image: url(landing.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    scroll-snap-align: start;
}

.landingButton {
  width: 250px;
  height: 250px;
  display: inline;
  margin-bottom: 50px;
  background-color: transparent;
  border: none;
}

#faqButton {
  margin-left: 80px;
}

#eventsButton {
  margin-right: 80px;
}

.landingLogo {
  width: 35%;
  height: auto;
  display: flex;
  align-self: center;
  margin-top: -50px;
}

#allRingImage {
  display: none;
}

.designSlideshow {
  width: auto;
  height: 100%;
  background-color: #050517;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #FABE24;
}

.designSlideshow div {
  margin-top: 8%;
  width: 40%;
  height: 70%;
  margin-left: 5%;
  margin-right: 50%;
  background-size: auto 80%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  animation: designSlideshow 30s infinite;
  opacity: 0;
  border: #FABE24 1px solid;
}

.designSlideshow > div:nth-child(2) {
  animation-delay: 5s;
}
.designSlideshow > div:nth-child(3) {
  animation-delay: 10s;
}
.designSlideshow > div:nth-child(4) {
  animation-delay: 15s;
}
.designSlideshow > div:nth-child(5) {
  animation-delay: 20s;
}
.designSlideshow > div:nth-child(6) {
  animation-delay: 25s;
}

@keyframes designSlideshow {
  0% {
    border: #FABE24 2px solid;
    /* background-color: #FABE24;  */
  }
  9% {
    /* transform: scale(1.05); */
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    border: #FABE24 2px solid;
    /* background-color: #FABE24;  */
  }
}

.ringInstructions {
  font-size: 20px;
  color: white;
  margin: 0px;
  line-height: 1.25;
}

.ringButtons button {
  border-radius: 5%;
  border: #FABE24 1px solid;
  box-shadow: #FABE24;
  padding: 8px;
  width: fit-content;
  height: fit-content;
  background-color: #FABE24;
  margin: 2%;
}

.actualRingButtons {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: space-evenly;
}

.ringButtons a {
  color: #050517;
  text-decoration: none;
  font-size: x-large;
  font-family: philosopher;
}

.ringButtons a:hover {
  color: white;
}

.ringButtons button:hover {
  background-color: #050517;
}

.ringButtons {
  height: 80%;
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin-right: -30%;
  margin-top: 5%;
  margin-bottom: 2%;
}

.upcoming {
  background-color: #050517;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: #FABE24;
  text-align: center;
  align-content: center;
  height: fit-content;
  scroll-snap-align: start;
}

.upcomingEventsContent {
  display: flex;
  justify-content: space-evenly;
  align-content: flex-start;
  width: 100%;
}

.upcomingEventsContent img {
  width: 25%;
  /* height: 90%; */
  margin: 20px;
  border: #FABE24 1px solid;
}

.upcomingEventsBodyText {
  text-align: left;
  color: white;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.upcomingEventsBodyTextInfoSection {
  margin: 10px;
}

.upcomingEventsBodyTextInfoSection p {
  margin: 6px;
}

.teamDiv {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: space-evenly;
  height: 100%;
  background-color: #050517;
  color: #FABE24;
  text-align: center;
  scroll-snap-align: start;
}

.teamMembers {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    align-content: space-evenly;
    justify-content: space-evenly;
    background-color: #050517;
}

.teamMember {
  border: #FABE24 2px solid;
  height: 31%;
  width: 23%;
  margin: 0px;
}

.teamMemberInfo {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  opacity: 1;
  color: #FABE24;
  font-size: 25px;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: space-around;
  text-align: center;
  flex-grow: 1;
}

.teamMemberInfo p {
    margin: 0px;
    padding: 4px;
}

#ian {
  background-image: url("ianEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
}

#claire {
  background-image: url("claireEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#frankie {
  background-image: url("frankie.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}

#emma {
  background-image: url("emmaEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
}

#ben {
  background-image: url("benEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:left;
}

#bella {
  background-image: url("bellaEdit3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:top;
}

#dana {
  background-image: url("danaEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}

#sarah {
  background-image: url("sarah.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:top;
}

#yiming {
  background-image: url("yiming.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}

#juliana {
  background-image: url("julianaEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
}

#greer {
  background-image: url("greerEdited.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#eliza {
  background-image: url("elizaEdit.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}

.faqs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    min-height: 100%;
    background-color: #050517;
    color: white;
    scroll-snap-align: start;
}

.questionAnswerBlock {
    margin: 8px;
    padding: 4px;
    width: 40%;
    text-align: center;
    border-top:#FABE24 1px solid;
}

.questionAnswerBlock h2 {
  color: #FABE24;
}

.faqsTitle {
    width: 100%;
    margin: 8px;
    text-align: center;
    color: #FABE24;
}

.background {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    min-height: 100%;
    background-color: #F4FFF8;
    color: black;
    scroll-snap-align: start;
    padding: 16px;
}

.backgroundColumn {
    width: 30%;
    text-align: center;
    padding: 13px;
}

.backgroundColumn h2 {
  color: #FABE24;
}

#defense {
  border-left: #FABE24 1px solid;
  border-right: #FABE24 1px solid;
}

.backgroundTitle {
    text-align: center;
    width: 100%;
    height: fit-content;
    color: #FABE24;
}

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-family: brittanic-bold;
}

p {
    font-family: 'philosopher', cursive;
    font-size: 24px;
}

h1 {
  font-size: 48px;
  margin: 8px;
}

h2 {
  font-size: 36px;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
    /* scroll-snap-type: y proximity; */
    scroll-snap-type: none;
    background-color: #F6F6F6;
}

.navbar {
  width: 100%;
  overflow: hidden;
  background-color: #050517;
  display: flex;
  justify-content: left;
  position: fixed;
  top: -50px;
  transition: top 0.3s; 
  height: 50px;
  font-size: 18px;
  z-index: 1000;
}

.navbar a {
  text-align: center;
  display: inline-block;
  color: white;
  padding: 14px 16px;
  height: 100%;
  margin: 0px;
  text-decoration: none;
}

.navbar a:hover {
  /* background-color: white;
  color: #FABE24; */
  /* border: #FABE24 1px solid; */
  background-color: #202020;
}

#navbarLandingButton {
  background-image: url('logoTransparent.png');
  height: 70%;
  width: 50px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: auto;
  margin-bottom: auto;
}

#navbarLandingButton:hover {
  background-image: url('logoAnimation.gif');
  height: 100%;
  /* height: 100%;
  width: 60px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat; */
}

#navbarLandingButton {
  padding: 0px;
}

.footer {
  width: 100%;
  overflow: hidden;
  background-color: #050517;
  display: flex;
  justify-content: space-between;
  transition: top 0.3s; 
  height: 50px;
  font-size: 18px;
  border-top: #FABE24 1px solid;
  
}

.footer a, .footer p {
  text-align: center;
  display: inline-block;
  color: white;
  padding: 14px 16px;
  height: 100%;
  margin: 0px;
  text-decoration: none;
  font-family: brittanic-bold;
}

.footer p {
  color: #FABE24
}

.footer a:hover {
  background-color: #202020;
}


/* ring design page */
#designLanding {
  background-image: none;
  padding: 0px;
  margin: 0px;
  height: fit-content;
}

.individualArtDiv {
  width: 100%;
  height: 100%;
  min-height: fit-content;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #F6F6F6;
}

.artHeaderTitle {
  padding: 8px;
  text-align: start;
  display: block;
  font-size: 69px;
  margin-left: 4%;
}

#bezelImg {
  background-image: url(art/bezel.png);;
}

#bezelImg:hover {
  background-image: url(art/bezel_with_overlay.png) ;
}

#cambridgeSkylineImg {
  background-image: url(art/cambridge_skyline.png);;
}

#cambridgeSkylineImg:hover {
  background-image: url(art/cambridge_skyline_with_overlay.png) ;
}

#bostonSkylineImg {
  background-image: url(art/boston_skyline.png);;
}

#bostonSkylineImg:hover {
  background-image: url(art/boston_skyline_with_overlay.png) ;
}

#classShankImg {
  background-image: url(art/class_shank.png);;
}

#classShankImg:hover {
  background-image: url(art/class_shank_with_overlay.png) ;
}

#sealShankImg {
  background-image: url(art/seal_shank.png);;
}

#sealShankImg:hover {
  background-image: url(art/seal_shank_with_overlay.png) ;
}

#hackersMapImg {
  background-image: url(art/Hackers_Map.png);;
}

#hackersMapImg:hover {
  background-image: url(art/hackers_map_with_overlay.png) ;
}

.artImage {
  min-width: 40%;
  min-height: 85%;
  margin: 4%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}

.artText {
  width: 55%;
  padding: 24px;
  background-color: white;
  margin: 4%;
  min-height: 60%;
  height: fit-content;
  border-radius: 1.5px;
}

.artText p {
  font-size: 17px;
  line-height: 1.25;
}


/* pricing page */
#ringOptionsDiv {
  height: 150%;
  background-color: #F6F6F6;
  color: #050517;
}

.smallNote{
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  margin: 2%;
}

#ringOptions {
  background-color: #F6F6F6;
}

.ringOption {
  border: #FABE24 2px solid;
  height: 15%;
  width: 25%;
  margin: 0px;
}

#lightRG {
  background-image: url("art/options/MIT2024_18K\ RG_Light\ Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center;
}

#naturalRG {
  background-image: url("art/options/MIT2024_18K\ RG_Natural\ Finish_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#antiqueRG {
  background-image: url("art/options/MIT2024_18K\ RG_Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#lightYG {
  background-image: url("art/options/MIT2024_18K\ YG_Light\ Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#naturalYG {
  background-image: url("art/options/MIT2024_18K\ YG_Natural\ Finish_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#antiqueYG {
  background-image: url("art/options/MIT2024_18K\ YG_Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#lightWG {
  background-image: url("art/options/MIT2024_18K\ WG_Light\ Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#naturalWG {
  background-image: url("art/options/MIT2024_18K\ WG_Natural\ Finish_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#antiqueWG {
  background-image: url("art/options/MIT2024_18K\ WG_Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#naturalES {
  background-image: url("art/options/MIT2024_Extreme\ Silver_Natural\ Finish_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


#antiqueES {
  background-image: url("art/options/MIT2024_Extreme\ Silver_Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


#prism {
  background-image: url("art/options/MIT2024_PVD\ Prism_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#brass {
  background-image: url("art/options/MIT2024_PVD\ Brass_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#ultrium {
  background-image: url("art/options/MIT2024_WU_Antique_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#stealth {
  background-image: url("art/options/MIT2024_PVD\ Stealth_Top\ View.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.pricingInfoDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: space-evenly;
}

table {
  border-collapse: collapse;
  width: 40%;
  margin: 2%;
}

td, th {
  border: 1px solid #202020;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #FABE24;
  color: #050517;
}

caption {
  font-size: 32px;
  color: #FABE24
}

.pricingTitle {
  padding: 8px;
  text-align: start;
  display: block;
  margin-left: 2%;
  margin-right: 2%;
}

/* ring servicing page */

.section {
  padding: 8px;
  text-align: start;
  display: block;
  margin-left: 2%;
  margin-right: 2%;
}

.section h1 {
  padding: 0px;
  margin: 0px;
}

li {
  font-size: 20px;
  font-family: philosopher;
} 


/* responsive!! */
@media only screen and (max-width: 700px) {
  .questionAnswerBlock {
      width: 90%;
  }

  .teamDiv, #ringOptionsDiv {
    height: fit-content;
  }

  .teamMember, .ringOption {
    width: 40%;
    height: 200px;
    margin: 8px;
  }

  table {
    width: 80%;
  }

  .landingDiv {
    background-image: url(landingPortrait.jpg);
  }

  #designLanding video{
    display: none;
  }

  #designLanding{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-image: url(art/10K\ Yellow\ Gold\ Natural\ Finish\ Large\ Left\ Shank\ View.png);
    background-repeat: no-repeat;  
    background-size: contain;
    background-position: center;
  }

  #designLanding h1 {
    margin: 10%;
  }

  #faqButton {
    display: none;
  }

  #eventsButton {
    display: none;
  }

  .designSlideshow {
    height: fit-content;
    min-height: 100%;
    display: block;
    text-align: center;
  }

  .slide {
  visibility: hidden;
  }

  #allRingImage {
    display: block;
    width: 80%;
    height: 80%;
    margin: auto;
    margin-top: 4%;

  }

  .ringButtons {
    height: 80%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    margin: auto
  }

  .individualArtDiv {
    flex-direction: column;
    height: fit-content;
  }

  #map, #classSideDiv, #sealSideDiv {
    flex-direction: column-reverse;
  }

  .artImage {
    width: 90%;
    min-height: 300px;
    height: 80%;
    margin: auto;
  }

  .artText {
    width: 80%;
  }

  .upcoming {
    height: fit-content;
  }

  .upcomingEventsContent {
    display: flex;
    flex-direction: column-reverse;
  }

  .upcomingEventsContent img {
    width: 90%;
    margin: 20px;
    border: #FABE24 1px solid;
  }

  .upcomingEventsBodyText {
    text-align: left;
    color: white;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
  }

  #footerText {
    display: none;
  }

  .footer {
    display: flex;
    justify-content: center;
  }

  .background {
    text-align: center;
  }

  html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
    scroll-snap-type: none;
  }

}