@font-face {

  font-family: elena-font;

  src: url("font/Quosm Light.ttf") format("truetype");

}



* {

  font-family: elena-font;

  letter-spacing: 0.3rem;

  background-color: #1a201f;

  color: #A39B8C;

}



html,

body {

  margin: 0;

  width: 100%;

}



html {

  overflow-x: hidden;

}

body {

  overflow-y: auto;

}



::-webkit-scrollbar {

  width: 0;  /* Nasconde la barra di scorrimento */

  height: 0;

}



.container {

  /* background-color: red; */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-flow: column;

  flex-flow: column;

  -webkit-box-align: space-around;

  -ms-flex-align: space-around;

  align-items: space-around;

  min-height: 100vh;

}



.container .header {

  display: flex; 

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px 0;

  text-align: center;

}



.container .content {

  -ms-flex-preferred-size: 80vh;

  flex-basis: 80vh;

  height: 80vh;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  font-size: small;

  padding-left: 1%;

  padding-right: 1%;

  opacity: 0;

  flex: 1;

}



.container .footer {

  /* background-color: orange; */

  font-size: small;

  justify-items: center;

  -ms-flex-line-pack: center;

  align-content: center;

  /* padding: 20px 0; */

  padding-bottom: 40px;

}



.fit-content {

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  margin-left: auto;

  margin-right: auto;

}



.fixed-container {

  display: flex;

  justify-content: center !important;

  align-items: center;

  gap: 40px !important;

  padding-top: 20px;

}



.photo-container {

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content:space-between;

}



.between-container {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  width: 350px;

  padding-top: 20px;

  padding-bottom: 40px;

}



.m-auto {

  margin: auto;

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

}

.no-margin {

  margin-top: 0px;

  margin-bottom: 0px;

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

}



.no-spacing {

  letter-spacing: 0 !important;

}



.middle {

  width: 50vw;

}



.selected-page {

  text-decoration: underline;

 -webkit-text-decoration-color: rgb(230, 230, 230, 20%);

  text-decoration-color: rgb(230, 230, 230, 20%);

  text-underline-offset: 5px;

  cursor: default !important;

}



.no-margin span {

  cursor: pointer;

}



.image-container {

  /* background-color: red; */

  -ms-flex-line-pack: center;

  align-self: center;

  height: 79vh;

}



.about-elena {

  letter-spacing: 0;

  font-size: small;

  font-weight: lighter;

}



.image-container img {

  display: block;

  -o-object-fit: contain;

  object-fit: contain;

  max-width: 100%;

  max-height: 100%;

}



.contact-card {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: left;

  -ms-flex-pack: left;

  justify-content: left;

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  font-size: small;

}



a,

a:visited,

a:hover,

a:active {

  color: inherit;

  text-decoration: none;

}



.arrow-image {

  cursor: pointer;

  height: 20px;

  width: 20px;

}



.d-flex-row {

  display: flex;

  flex-direction: row;

  width: 100%;

}



.bio-container {

  display: flex;

  flex-wrap: wrap;

  height: 100%;

}



/* Stile base per desktop o schermi larghi */

.bio-section {

  width: 50%;

  box-sizing: border-box;

  height: 100%;

  align-items: flex-start;

}



.left-border {

  margin: 5%;

  margin-left: 20%;

}



.right-border {

  margin-top: 5%;

  margin-right: 20%;

}



#section-image-container {

  height: 85%;              

  overflow: hidden;         

  display: flex;            

  justify-content: flex-end;  

  align-items: center;      

  /* margin-top: 5%; */

}



#section-image-container img {

  height: 500px;              

  width: auto;               

  object-fit: contain;       

  display: block;

}



/* Sezione di contatto */

.contact-section {

  /* margin: 5%; */

  margin-bottom: 0;

  background-color: #1a201f;

  border-radius: 8px;

}



.contact-links {

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  padding-top: 15px;

}



.contact-link {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  width: fit-content;

  font-size: small;

}



.contact-icon {

  width: 16px;

  height: 16px;

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  padding-top: 15px ;

}



.form-group {

  display: flex;

  flex-direction: column;

}



.form-group label {

  font-size: small;

  margin-bottom: 0.5rem;

}



.form-group input, .form-group textarea {

  padding: 0.3rem 0.6rem;

  font-size: small;

  border: 1px solid rgba(163, 155, 140, 0.2);

  /* border: 1px solid #A39B8C; */

  border-radius: 4px;

}



.form-group input:focus, .form-group textarea:focus {

  border-color: rgba(163, 155, 140, 0.6);

  outline: none;

}



textarea {

  resize: vertical;

  min-height: 80px;

}



.submit-btn {

  padding: 0.8rem 2rem;

  background-color: #0A1916;

  color: #A39B8C;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  transition: background-color 0.3s ease;

  width: 25%;

}



.submit-btn:hover {

  background-color: #010302;

  /* background-color: #5a6268; */

}



#mobile-content {

  display: none;

}



/* Layout verticale per schermi piccoli */

@media (max-width: 768px) {

  .container {

    min-height: 60vh;

  }



  .container .header {

    padding: 0;

  }



  .image-container {

    height: 65vh;

  }



  #mobile-content {

    display: block;

  }



  #web-content, #web-footer {

    display: none;

  }



  .bio-section {

    width: 100%;

  }



  .left-border, .right-border{

    margin: 5%;

  }



  .bio-section img {

    width: 100%;

    height: auto;

    max-height: 80vh;

    object-fit: contain;

  }



  #section-image-container {   

    justify-content: center;  

  }



  .about-elena {

    text-align: center;

  }

  

  .contact-section {

    padding-top: 2rem;

    width: 90%;

  }



  .contact-links {

    align-items: center;

  }



  .submit-btn {

    align-self: center;

    padding: 1rem;

  }



  .contact-title {

    text-align: center;

    display: block;

    width: 100%;

    margin-bottom: 20px;

  }



  .bio-section {

    margin-bottom: 40px; 

  }

  

  .fit-content {

    margin-top: 20px;

    margin-bottom: 40px; 

  }

}