/* Font families */
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/Cinzel/Cinzel-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* Body font family and colors*/
:root {
  --bs-body-font-family: "Roboto", system-ui, -apple-system, sans-serif;
  --btn-color:rgb(242, 158, 109);
  --caption-color: rgba(242, 158, 109, 0.438);
  --underline-color:rgb(235, 110, 80);
  --background-color:#172430;
  --error-color: #e9103f;
  --bs-btn-hover-bg: var(--background-color);
  --bs-btn-hover-color: var(--btn-color);

}

/* Body font family */
body {
  font-family: var(--bs-body-font-family);
}

/* Specific font is used for titles */
.title, .slogan {
  font-weight: bold;
  font-family: "Cinzel";
}

.title {
  margin-bottom: 0.5rem;
  text-align: center;
  scroll-margin-top: 14rem;
}

/* Create a line under titles */
section .title::after {
  margin-top: 0.5rem;
  align-self: flex-start;
  margin-bottom: 2.5rem;
  content: "";
  width: 60%;
  height: 4px;
  background-color: var(--underline-color);
  transform: translateX(30%);

  transition: width 0.3s ease, transform 0.3s ease;
}

/* Line grows to use full width when cursor pass over section */
section:hover .title::after {
  width: 100%;
  transform: translateX(0);
}

/* Offset between section */
section {
  margin-bottom: 3rem;
}


/* Specify default color for notifiaction popup */
#notification-popup {
  background-color: var(--btn-color);
}


/* Add padding to content to avoid overlap by fixed header */
#content {
    padding-top: 11rem;
}

/* Adapt content top offset when header is resized */
@media (max-width: 550px) {
  #content {
      padding-top: 14rem;
  }
}

@media (min-width: 550px) {
  .form-panel {
    width: 50rem;
    align-self: center;
  }
}

/* Add slogan color */
.slogan {
  color: #EB6E50;
  font-size: 1.5rem;
}

/* Email picture */
.mail-picture {
  height: 1.1rem;
  width: auto;
}

/* Button style on hover event */
button:hover {
  background-color: var(--background-color);
  color: #EB6E50;
}

/* Style for google logo */
.google_logo {
  height: 1rem;
  width: auto;
}

/* Make whoami photo floating on top right of text */
.photo-qui-suis-je {
  height: 20rem;
  float: right;
}

/* Set bold to inputs labels */
label {
  font-weight: bold;
}