@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

html, body {
 /* Make sure html has a full height */
  min-height: 100vh; /* At least viewport height */
  margin: 0; /* No default margin */
  position: relative; /* Important for positioning elements inside */
  overflow-x: hidden; /* Prevents horizontal scrolling */
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('images/Hand-Written-Transcription.png');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex; flex-direction: column;
   font-family: 'Palatino Linotype';
  font-style : normal;
}


button{border-radius: 16%; font-family: 'Comic Neue';}

.TOSheader{text-align: center; margin-top: 15px;}

.quoteIntro {font-size: 28px;}


main{width: 100vw;
    height: 100vh;
  flex: 1;}
#hamburger-menu {
    display: inline-block;
    cursor: pointer;
  }

a{text-decoration: none; color: black;}
  
  #hamburger-menu span {
    display: block;
    width: 30px; /* Width of the hamburger lines */
    height: 3px; /* Height of the hamburger lines */
    background-color: #333; /* Color of the hamburger lines */
    margin: 6px 0; /* Spacing between the lines */
    transition: 0.4s;
  }

  #header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fcfcfc;
    padding: 5px;
    border-bottom: grey 1px solid;
  }

  #headText {margin: 0; font-size: 21px; align-self: center;}

  #transcriptPart{
    color: #943D00;
  }

  #profile-icon {
   width: 45px;
  }

  nav{display: none; align-items: center;}

  #overlaySelections{
    display: none;
    width: 50%;
    height: 100%;
    background-color: #FF7F50;
    position: absolute;
    top: 0;
    left: 0;
    
  }

  .selections {border-top: solid black 2px; padding-top: 12px; padding-left: 10px; margin: 0; margin-top: 10px; cursor: pointer;}

  #close{width: 100%; display: flex; justify-content: flex-end; }

  #X{margin: 0; margin-right: 10px; margin-top: 10px; font-size: 35px; cursor: pointer;}

  .quote-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff; /* Keeps the background in tune with the mostly white theme */
    border: 3px solid black; /* Coral orange border for a pop of color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  }
  
  .quote {
    margin-top: 0;
    font-weight: bolder;
    font-size: 18px; /* Adjust size as needed */
    color: black; /* Dark text for contrast */
    text-align: center; /* Center the quote for emphasis */
    line-height: 1.5; /* Improve readability */
  }

  .mainHeaders{color:#943D00; text-align: center; margin: 0; font-size: 20px;}

  #quoteHeaderContainer {width: fit-content; margin-left: auto; margin-right: auto; margin-top: 60px;}

.video-container {
  text-align: center;
  margin-top: 20px;
}

.responsive-video iframe {
  max-width: 100%;
  border: none; /* Removes the default frame border */
  outline: none; /* Removes the focus outline */
}

/*Sign In Page */
.accountBox{border: 4px solid black; padding: 8px; width: fit-content; margin-left: auto; margin-right: auto; margin-top: 80px; background-color: white;}

.inputBoxes{width: 300px; height: 25px;}

.accountBtn{background-color: orange; padding: 8px; font-size: 20px; cursor: pointer;}

#logInBtnDiv{display: flex; justify-content: center; width: 100%; margin-top: 30px;}

#noAccountDiv {
    display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 30px;
}

#createAccount {font-size: 20px; color: orange; margin: 0; cursor: pointer;}

#logInText {font-size: 20px; color: orange; margin: 0; cursor: pointer;}

#createAccount:hover{border-bottom: solid 1px rgb(36, 36, 36);}

#noAccount {margin: 0;}

#createAccountBox{display: none;}

/*Transcription Page*/
.transcriptionHeader {font-size: 21px; margin: 0; margin-bottom: 10px; text-align: center; color:black;}
.transcription {width: fit-content; display: flex; flex-direction: column;
   background-color: white; padding: 20px; border: 3px black solid; justify-content: center; align-items: center;}
.transcriptionImage {width: 100%; height: auto; display: block;  filter: brightness(1);}
.transcriptionImgDiv{width: 250px; border: 3px solid rgb(0, 0, 0); position: relative;}
.buyNow {background-color: #ffd814; color: black; font-size: 16px; width: fit-content; align-self: center; cursor: pointer;  padding: 5px;
border-color:rgb(241, 108, 7);
border: 1px solid black;}
.transcriptionBoxes {width: 300px; display: flex; justify-content: center; align-items: center; margin-top: 40px; margin-left: auto; margin-right: auto;
   flex-direction: column; gap: 20px; padding-bottom: 100px; vertical-align: top;}
#test{width: fit-content; height: fit-content;}
.price{position: absolute; top: 10px; left: 10px; color: white; font-size: 40px; margin: 0;}
.embedLink{color: #943D00; text-decoration: underline; text-decoration: none;}
.embedLink:hover{cursor: pointer; color: #FF7F50;}
.transcriptionInformation {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 300px; background-color: white; margin-top: 20px; flex-wrap: wrap;
margin-left: auto; margin-right: auto; padding: 10px; border: 3px solid black}
.buttons {margin-top: 15px; display: flex; flex-direction: column; gap: 15px;}
.preview {background-color: #FF7F50;}

.arrows {width: fit-content; display: flex; justify-content: center; margin-left: auto; margin-right: auto; gap: 160px;}

.arrow {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  font-size: 35px; /* Adjust size as needed */
}

/* You can add more styling to the arrows here if needed */
.arrow:hover {
  color: #555; /* Change hover color */
}

.sampleImageInfo {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.counter {color: red; font-size: 40px; margin: 0;}

.currentImage {width: 250px; height: auto; transition: 0.3s; border: 5px solid rgb(0, 0, 0);}

.sampleBuy {background-color: rgb(241, 108, 7); display: block; font-size: 25px; color: white; width: fit-content; cursor: pointer;  padding: 5px;
  border-color:rgb(241, 108, 7);
  border-top: none;
  border-right: none;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;}

footer {align-self: flex-end; width: 100%; flex-direction: column; border-top: 2px solid black;
background-color: #FF7F50; display: flex; justify-content: center; align-items: center;
 padding-top: 8px; margin-top: 40px; height: fit-content; gap: 10px; flex-wrap: wrap; background-color: #fcfcfc;}

.footerSection {margin: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; width: fit-content;}

.footerLinks {max-height: 120px; max-width: 185px; height: 120px; width: 185px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 15px; justify-content: flex-start; align-items: center;}

.footerLinks p {margin: 0; padding: 0; font-size: 13px;}

.footHeads{margin: 0; text-align: center; font: 17.82px; font-weight: bolder;}

.section{max-width: 850px; width: 850px; background-color: white; padding: 10px; border-left: 5px solid #FF7F50; width: 90%; transition: 1s;}

.tosSections{display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px;
   margin-top: 60px; background-color: white; width: fit-content; margin-left: auto; margin-right: auto; border: 1px solid grey; padding-bottom: 18px;}

.footerLinks a:hover {
  color: rgb(241, 108, 7);
}


/* Desktop Styles */
@media (min-width: 1024px) {
  #headText {margin: 0; font-size: 30px;}
  footer {flex-direction: row; align-items: flex-start;}
  .transcriptionInformation {margin-top: 40px; width: fit-content; padding-left: 18px; padding-right: 18px;}
  .transcriptionHeader {font-size: 40px;}
  .transcription {width: fit-content;}
  .buyNow {font-size: 23px; background-color: #ffd814; color: black;}
  .preview {background-color: #ffa41c;}

  .currentImage {max-width: 350px; width: 350px;}

  /*Header*/
  #hamburger-menu {display: none;}
  nav{ display: flex; gap: 60px;}
  #profile-icon {display: none;}
  .selections {border-top: none; font-size: 23px; padding-top: 0; padding-left: 0; margin: 0; margin-top: 0; cursor: pointer;}
  a:hover{color: #FF7F50;}


  .transcriptionBoxes {display: flex; flex-direction: row; gap: 140px; padding-bottom: 0; margin-top: 60px; width: 100vw;}
  .mainHeaders{margin: 0; margin-top: 60px; width: 400px; font-size: 35px;}
  #quoteHeaderCotainer {margin-top: 60px;}
  .quote-container{max-width: 900px; margin-top: 90px;}
  .mainHeaders{color: #943D00; text-align: center; margin: 0; width: auto; font-size: 38px;}
  .quote{text-align:justify; font-size: 28px;}
}







/* Styles for devices with a viewport height of at least 800px */
@media (max-height: 800px) {
  /* Add your CSS styles here */
  
  .currentImage{width: 240px;}
  
}

/* Very small phones*/
@media (max-width: 500px) {
  .quote-container{max-width: 300px;}
  .quoteIntro{font-size: 20px;}
  .mainHeaders{color:#943D00; text-align: center; margin: 0; font-size: 20px;}
  .quote {font-size: 16px; margin-top: 0; margin-bottom: 0;}
  #theVideo{width: 250px; height: auto;}
  .arrow {font-size: 28px;}
  #overlaySelections {width: 60%;}
  #headText {font-size: 17px;}
  .sampleBuy {font-size: 18px;}
  .arrows{gap: 110px;}
  .counter{font-size: 30px;}
  .transcriptionBoxes {width: 200px; margin-left: auto; margin-right: auto}
  .transcriptionBoxes h1 {font-size: 21px;}
  .transcriptionImgDiv {width: 180px;}
  .transcriptionInformation {width: fit-content;}
  .buyNow {font-size: 16px; color: black;}
  .currentImage {width: 180px;}

  .TOSheader {font-size: 25px;}
  .tosSections h2 {font-size: 21px;}

}