.dynapuff {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.quintessential {
  font-family: "Quintessential", serif;
  font-weight: 400;
  font-style: normal;
}

body {
background-image: url('static/background_image.jpg');
background-size: 50%;
}

.website_heading {
  background-color: rgba(173, 216, 230, 0.9);
  box-shadow: 5px 8px #000000;
  padding: 2%;
  border-style: solid;
  border-width: 6px;
  border-radius: 25px;
  height: auto;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: dynapuff;
  text-align: center;
margin:5vh auto 2%;
}

#music-personality-embed {
  height: auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
margin:5vh auto 2%;
}


.big-font {
font-size:35px;
}

.col-form-label {
font-family:dynapuff;
}

.form-group {
background-color:rgba(50, 168, 82, 0.9);
box-shadow: 5px 8px #000000;
border-style: solid;
border-width: 6px;
border-radius: 25px;
height: auto;
width: auto;
padding:2%;
margin: 2% auto 2%; 
display:flex;
justify-content:center;
grid-template-columns: auto 1fr;
align-items:center;
}

#dob_picker {
padding:2%;
border-style: solid;
border-width: 2px;
border-radius: 25px;
justify-content:center;
align-items:center;
display: flex;
}

#field_email_address {
padding:2%;
border-style: solid;
border-width: 2px;
border-radius: 25px;
justify-content:center;
align-items:center;
display: flex;
}

.form-control {
justify-content:center;
align-items:center;
}

.input-group {
background-color:rgba(100, 100, 100, 0.9);
padding:2%;
box-shadow: 5px 8px #000000;
border-style: solid;
border-width: 6px;
border-radius: 25px;
display:grid;
margin:5vh auto 2%;
width:auto;
height:auto;
grid-template-columns: auto 1fr;
column-gap: 1%;
align-items: center;
}

.opt-in-text {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
}

#enter_button {
font-size:20px;
font-family:dynapuff;
width:auto;
height:auto;
background-color:rgba(192, 70, 87, 0.9);
padding:2%;
box-shadow: 5px 5px #000000;
border-style: solid;
border-width: 5px;
border-radius: 25px;
margin: 2% auto 2%; 
}


#personality_line {
  font-family: quintessential, cursive;
padding:10px;
box-shadow: 5px 5px #000000;
border-style: solid;
border-width: 5px;
border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 35px;
  align-items: center;
margin: 5% auto 2%; 
width:80%;
background-color:rgba(255, 219, 88, 0.9);
}

#playlist_link a:link {
  font-family: dynapuff, cursive;
  font-size: 15px;
  text-decoration: none;
color:#000000;

}

#playlist_link a:hover {
  font-family: dynapuff, cursive;
  font-size: 20px;
  text-decoration: none;
color:#000000;
}

#playlist_link a:visited{
  font-family: dynapuff, cursive;
  font-size: 15px;
  text-decoration: none;
color:#000000;
}

#playlist_link a:active{
  font-family: dynapuff, cursive;
  font-size: 15px;
  text-decoration: none;
color:#000000;
}


#playlist_image img {
  border-radius: 10px;
  align-items: center;
  width: 80%;
  border: 5px solid #000000;
  box-shadow: 5px 5px #000000;
  justify-content: center;
  display: flex;
flex-direction: column;
margin: 0 auto;
}

#playlist_image {
display: flex; /* ← make it a flex container */
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2%;
width: 80%;
margin: 0 auto;
}

#playlist_link {
  justify-content: center;
  text-align: center;
  align-items: center;
display:block;
  flex-direction: column;
}

#image_block {
background-color:rgba(144, 238, 144, 1);
  flex-direction: column;
  align-items: center;
padding:2%;
height:auto;
margin: 5% auto 2%; 
width:80%;
box-shadow: 5px 5px #000000;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}

.tnc_privacy {
display:flex;
flex-direction:row;
width:100%;
margin:30px auto 1%;
background-color:#000000;
gap:5px;
padding:1%;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
}

#tnc a:link, #privacy a:link {
text-decoration: none;
color:#ffffff;
}

#tnc a:visited, #privacy a:visited{
text-decoration: none;
color:#ffffff;
}


#sme {
margin-left: auto;
margin-right: 2%;
width: fit-content;
color:#ffffff;
}

#buffer_text_1, #buffer_text_2 {
  font-family: dynapuff;
font-size:15px;
border-style: solid;
border-width: 1px;
text-align:center;
border-radius: 25px;
padding:2%;
width:auto;
margin:5vh auto 2%;
color:#ffffff;
background-color:#000000;
}