/*ABC Gravity Font*/

@font-face {
  font-family: 'ABC Gravity';
  src: url('ABCGravity-Expanded.woff') format('woff'); /* Older Browsers */
}

/*CoFo Sans Font*/
@font-face {
  font-family: 'CoFo Sans Variable';
  src: url('CoFoSans_VF.woff') format('woff'); /* Older Browsers */
}

.grid-container {
  display: grid;
  position: relative;
/*  justify-items: center;*/

}

#language-en {
  /* EN */
  width: 70px;
  left: 605px;
}

#language-de {
/* DE */
width: 54px;
left: 740px;
}

#language-en, #language-de {
  position: absolute;
  display: flex;
  font-family: 'abc Gravity', sans-serif; /* Use abc Gravity font */
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 31px;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  top: 73px;
  height: 22px;
  margin: 0 10px; /* Adjust spacing between EN/DE and toggle button */
}

/* Toggle Button */
#toggle-button {
 position: absolute;
 left: 700px;
 top: 70px; /* Adjust top position */
 transform: translateX(-50%); /* Move button back by half its width */
 width: 50px;
 height: 30px;
 background-color: #FFFFFF;
 border: 1px solid #C462C9;
 border-radius: 20px;
 cursor: pointer;
}

/* Toggle Indicator */
#toggle-button::after {
  content: '';
  position: absolute;
  top: 5px; 
  left: 5px; 
  width: 20px; 
  height: 20px; 
  background-color: #C462C9;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Toggled State */
#toggle-button.toggled::after {
  transform: translateX(20px); 
}

.grid-container {
  display: grid;
  grid-template-rows: min-content 1fr; /* Set header height to its content size and main to take the remaining space */
}

header {
  grid-row: 1; /* Position the header in the first row */
z-index: 1; /* Ensure the header is on top of other elements */
}

main {
  grid-row: 2; /* Position the main content in the second row */
}


body {
  margin: 0;
  padding: 0;
  background-image: url("voiceAppBackground.png");
  background-size: cover; /* Cover the entire container */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Do not repeat the background image */
  grid-column: span 12; /* Span the full width of the grid */
  text-align: center; /* Center the text */
}

body, html {
  height: 100%;
}

/* Apply CSS reset to remove default margins and paddings */
body, h1, p {
  margin: 0;
  padding: 0;
}

main {
  /* Ensure main spans the full width */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  position: relative;
}

.page-title {
  grid-column: 1 / -1; /* Span across all columns */
  position: absolute;
  width: 753px;
  height: 83px;
  left: 40px;
  top: 184px;
  font-family: 'ABC Gravity';
  font-style: normal;
  font-weight: 900;
  font-size: 64px;
  line-height: 83px;
  /* identical to box height */
  text-align: center;
  color: #FFFFFF;
}

.index-quote {
  /* “my wild dreaming has me longing to go deeper than just basic access” 
– Leah Lakshmi Piepzna Samarasinha 
Care Work: Dreaming Disability Justice, 2018 */
  position: absolute;
  width: 774px;
  height: 164px;
  left: 30px;
  top: 357px;
  font-size: 32px;
  line-height: 41px;
  text-align: center;
}

.index-explanatory {
  /* Share with us your dreams and desires! We want to hear from you. What do we need to make HGK more accessible and equatable. There’s a vast pool of community knowledge based on lived experience can we tap into to world these desires together. Take a listen to the collective dreams, let them move you and share your thoughts so others can be inspired as well. */
  width: 759px;
  height: 270px;
  left: 40px;
  top: 626px;
  font-size: 24px;
  line-height: 30px;
}

.index-quote, .index-explanatory {
  position: absolute;
  font-variation-settings: 'slnt' 0;
  font-family: 'CoFo Sans Variable';
  font-style: normal;
  font-weight: 442;
  color: #FFFFFF;
}

#start-button {
/*    figma code below*/
/* orange */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;

position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 - 2.5px);
top: 1001px;

background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}

.next-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 24px;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 29px;
  font-family: 'ABC Gravity';
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #FD91DF;
  grid-column: 5 / span 3;
  justify-self: center;
  position: relative;
}

/*NAVIGATION PAGE*/
.double-button {
  position: relative;
  width: 372px;
  height: 64px;
  border-radius: 20px;
  top:533px;

  box-sizing: border-box;

/* White */
background: #FFFFFF;
border: 1px solid rgba(253, 163, 228, 0.34);
/* Shadow/Default */
box-shadow: 0px 2px 0px #000000;
border-radius: 38px;
}

.left-button,
.right-button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  border: none;
  font-family: 'ABC Gravity';
  font-weight: 900;
  font-size: 16px;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.left-button {
  left: 0;
  border-top-left-radius: 32px; /* Matches container's border-radius */
  border-bottom-left-radius: 32px; /* Matches container's border-radius */
  color: #F35E9C;
}

.right-button {
  right: 0;
  border-top-right-radius: 32px; /* Matches container's border-radius */
  border-bottom-right-radius: 32px; /* Matches container's border-radius */
  color: #FA7CFB;
}

.right-button::before {
  content: "";
  position: absolute;
  width: 1px; /* Adjust thickness of separator */
  height: 100%;
  background: rgba(253, 163, 228, 0.34);
  right: 185px;
}

/*CONSENT PAGE*/
.consent-explanatory {
  position: absolute;
  width: 759px;
  height: 60px;
  left: 37px;
  top: 462px;
  font-family: 'CoFo Sans Variable';
  font-style: normal;
  font-weight: 442;
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  font-variation-settings: 'slnt' 0;
}

#consentForm {
  position: absolute;
  width: 712px;
  height: 24px;
  left: 81px;
  top: 621px;
}



.consent-check-sentence {
  font-family: 'CoFo Sans Variable';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
}
#consentForm input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.5); /* Scales the checkbox up by 1.5 times */
}


#consentForm label {
  display: flex;
  align-items: center;
}

#consentForm input[type="checkbox"] {
  margin-right: 10px; /* Add spacing between checkbox and sentence */
}



#consent-next-button {
  /* orange */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;
position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 - 2.5px);
top: 1001px;
background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;
}


/*RECORD PAGE*/
.soundwave-icon {
  /* Icon/sounds */
  position: absolute;
  width: 203px;
  height: 203px;
  left: 315px;
  top: 465px;
}

.record-double-button {
  position: relative;
  width: 372px;
  height: 64px;
  border-radius: 20px;
  top:733px;

  box-sizing: border-box;

/* White */
background: #FFFFFF;
border: 1px solid rgba(253, 163, 228, 0.34);
/* Shadow/Default */
box-shadow: 0px 2px 0px #000000;
border-radius: 38px;
}

.record-left-button,
.record-right-button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  border: none;
  font-family: 'ABC Gravity';
  font-weight: 900;
  font-size: 16px;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.record-left-button {
  left: 0;
  border-top-left-radius: 32px; /* Matches container's border-radius */
  border-bottom-left-radius: 32px; /* Matches container's border-radius */
  color: #F35E9C;
}

.record-right-button {
  right: 0;
  border-top-right-radius: 32px; /* Matches container's border-radius */
  border-bottom-right-radius: 32px; /* Matches container's border-radius */
  color: #FA7CFB;
}

.record-right-button::before {
  content: "";
  position: absolute;
  width: 1px; /* Adjust thickness of separator */
  height: 100%;
  background: rgba(253, 163, 228, 0.34);
  right: 185px;
}

#stop-button {

    font-family: 'ABC Gravity';
    font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 20px;
/* identical to box height, or 83% */
letter-spacing: -0.01em;

color: #FD91DF;
  box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;
position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 - 1.5px);
top: 430px;
background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;

}
#record-next-button {

/* orange */

box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;
position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 - 1.5px);
top: 960px;
background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;
}


/*PLAYBACK PAGE*/

#audio-container {
  width: 300px;
   transform: translateX(-15%);
}
#back-button {
  /* orange */

  box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;

position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 - 223.5px);
top: 902px;

background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;




/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


}

.go-back-label {
  /* Label */

  width: 137px;
  height: 20px;

  font-family: 'ABC Gravity';
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 20px;
/* identical to box height, or 83% */
letter-spacing: -0.01em;

color: #FD91DF;

}

#replay-button {
  /* orange */

  box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;

position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 + 32.5px);
top: 902px;

background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


}

.replay-label {
  /* Label */

  width: 115px;
  height: 20px;

  font-family: 'ABC Gravity';
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 20px;
/* identical to box height, or 83% */
letter-spacing: -0.01em;

color: #FD91DF;

}

#save-button {
  /* orange */

  box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;

position: absolute;
width: 183px;
height: 59px;
left: calc(50% - 183px/2 + 223.5px);
top: 902px;

background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


}

.save-label {
  /* Label */

  width: 83px;
  height: 20px;

  font-family: 'ABC Gravity';
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 20px;
/* identical to box height, or 83% */
letter-spacing: -0.01em;

color: #FD91DF;
}

/*PLAYBACK LIST */
.recording-list {
  margin-top: 523px;
}

#go-home-button {
  /* orange */

  box-sizing: border-box;

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 9px 24px;
gap: 10px;

position: absolute;
width: 312px;
height: 59px;
left: calc(50% - 312px/2 + 1px);
top: 925px;

background: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 29px;





}

.go-home-label {
  /* Label */

  width: 300px;
  height: 20px;
   white-space: nowrap;

  font-family: 'ABC Gravity';
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 20px;
/* identical to box height, or 83% */
letter-spacing: -0.01em;

color: #FD91DF;

}

.label {

  text-align: center; /* Center-align the text within the button */
  white-space: nowrap; /* Prevent the text from wrapping to a new line */


/* Label */

/*width: 90px;*/
height: 20px;
font-family: 'ABC Gravity';
font-style: normal;
font-weight: 900;
font-size: 24px;
line-height: 20px;
/* identical to box height, or 83% */
letter-spacing: -0.01em;
padding: 10px 20px; /* Adjust the padding values as needed */

color: #FD91DF;
}

}


.audio-controls {
  /* 01 Images / Video

Media
*/

  box-sizing: border-box;

  position: absolute;
  width: 303px;
  height: 42px;
  left: 464px;
  top: 511px;

  border: 1px solid #FFFFFF;
  border-radius: 30px;

}

.microphone {
  /* Microphone */

  position: absolute;
  width: 100px;
  height: 100px;
  left: 367px;
  top: 1042px;

  background: url(microphone.png);


}
.mic-halo button img {
  background: transparent;
}

.sound-clips {
  overflow-y: auto; /* Enable vertical scrolling */
  max-height: calc(100vh - 200px); /* Adjust height as needed */
  padding: 20px; /* Add padding for spacing */
  margin-top: 500px; /* Adjust margin to position in the middle */
}
.clip {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  justify-content: space-between;
}




.mic-halo {
  /* Ellipse 3 */
  position: absolute;
  width: 180px;
  height: 180px;
  left: 327px;
  top: 970px;

  background: rgba(253, 125, 216, 0.73);

  border-radius: 50%; /* Make the shape circular */
  overflow: hidden;
  /* Adjust z-index */
  z-index: 2;
}


/* Make the clips use as much space as possible, and
 * also show a scrollbar when there are too many clips to show
 * in the available space */
 
 



button#load-more-button {
  position: sticky;
  bottom: 1rem;
  /* Load More */

position: absolute;
width: 170px;
height: 25px;
left: 643px;
top: 861px;

font-family: 'CoFo Sans Variable';
font-style: italic;
font-weight: 400;
font-size: 20px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.02em;
background: none;
border: none;

color: #FFFFFF;

mix-blend-mode: normal;

}

.clip p {
/* 1 */

/*position: absolute;
left: 14.03%;
right: 78.42%;
top: 43.8%;
bottom: 54.69%;*/

font-family: 'CoFo Sans Variable';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 18px;
/* identical to box height, or 112% */
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;
}

.scrollable-div {
  height: 290px; /* Set a fixed height */
overflow-y: auto; /* Add a vertical scrollbar when content overflows */
width: 650px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: white;
  margin: 10px 0;
}