/* ==========================================================================
   Template
   ========================================================================== */

/* Regular */
@font-face {
  font-display: swap;
  font-family: SpaceMono;
  font-style: normal;
  font-weight: 400;
  src: url('../../font/SpaceMono/SpaceMono-Regular.woff2') format('woff2');
}

/* Regular + italic */
@font-face {
  font-display: swap;
  font-family: SpaceMono;
  font-style: italic;
  font-weight: 400;
  src: url('../../font/SpaceMono/SpaceMono-Italic.woff2') format('woff2');
}

/* Bold */
@font-face {
  font-display: swap;
  font-family: SpaceMono;
  font-style: normal;
  font-weight: 700;
  src: url('../../font/SpaceMono/SpaceMono-Bold.woff2') format('woff2');
}

/* Bold + italic */
@font-face {
  font-display: swap;
  font-family: SpaceMono;
  font-style: italic;
  font-weight: 700;
  src: url('../../font/SpaceMono/SpaceMono-BoldItalic.woff2') format('woff2');
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

html,
body {
  box-sizing: border-box;
  font-family: SpaceMono, sans-serif;
  width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1{
  text-align: center;
}

nav {
  width: 100%;
}

li a {
  color: #007cb7;
}

li a:hover {
  color: #005680;
}

ul {
  font-weight: 700;
  list-style-position: inside;
  list-style-type: '> ';
  padding: 0;
}

h2 {
  margin: 0;
}

.content-box {
  background-color: #f6f7f8;
  border: 1px solid #d6d8db;
  border-radius: 5px;
  padding: 20px;
  width: 100%
}

main {
  align-items: center;
  border: 1px #d6d8db;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1000px;
  min-height: 500px;
  padding: 0 20px;
  width: 100%;
}

.bold {
  font-weight: 700;
}

#introduction {
  margin-bottom: 20px;
}

header {
  background-color: #007cb7;
  display: block;
  left: 0;
  padding: 20px;
  position: sticky;
  text-align: left;
  top: 0;
  width: 100%;
}

header img {
  height: 50px;
  width: auto;
}

footer {
  background-color: #373737;
  color: #fff;
  height: 59px;
  margin-top: 20px;
  padding: 25px;
  text-align: center;
  width: 100%;
}

/* Form */
#forme {
  display: grid;
  place-items: center;
  width: 100%;
}

#forme h2 {
  margin-bottom: 40px;
  margin-top: 0;
}

#forme button {
  background-color: #007cb7;
  border: 2px black solid;
  color: #fff;
  cursor: pointer;
  height: 40px;
  width: 160px;
}

#forme button:hover {
  background-color: #005680;
}

form {
  display: grid;
  gap: 20px;
  grid-template-columns:  auto minmax(0,2fr) auto minmax(0,2fr);
  grid-template-rows: auto;
  margin-bottom: 40px;
  place-items: center start;
  width: 100%;
}

form label,
form span {
  color: #007cb7;
  font-weight: 700;
  place-self: center end;
}

input[type='text'],
input[type='number'],
input[type='date'],
input[type='email'],
select {
  background-color: #fff;
  border: 1px solid #d6d8db;
  border-radius: 5px;
  box-shadow: none;
  width: 100%;
}

input,
textarea,
select {
  padding: 5px 8px;
}

input[type='text']:invalid,
input[type='number']:invalid,
input[type='date']:invalid,
input[type='email']:invalid,
select:invalid {
  border-left: 5px solid #c82333;
}

input[type='text']:valid,
input[type='number']:valid,
input[type='date']:valid,
input[type='email']:valid,
select:valid {
  border-left: 5px solid #218838;
}

input[type='radio'] ~ input[type='radio'] {
  margin-top: 10px;
}

input[type='checkbox'] ~ input[type='checkbox'] {
  margin-top: 10px;
}

form textarea {
  grid-column: 2 /5;
  min-height: 132px;
  resize: vertical;
  width: 100%;
}

#address {
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr 2fr;
  width: 100%;
}

#street-address {
  grid-column: 1 / 3;
}

#civil-status {
  appearance: none;
  background-image: url('../../img/icon-arrow-down.svg');
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 2rem;
}

#birth-date,
#civil-status,
form label {
  cursor: pointer;
}

#sex label,
#it-knowledge label,
#orientation label {
  color: black;
  cursor:pointer;
  font-weight: 400;
  margin-left: 10px;
  margin-top: 5px;
  place-self: start;
}

#orientation,
#it-knowledge,
#sex {
  display: grid;
  grid-template-columns: max-content 3fr;
}

.form-input{
  display: contents;
}

.form-option{
  display: contents;
}

/* ==========================================================================
   Medium screen
   ========================================================================== */
@media (width <= 768px) {
  br{
    display:none;
  }

  nav ul {
    flex-wrap: wrap;
  }

  form label,
  form span {
      place-self: center start;
  }

  .form-input{
    display: grid;
    place-self: start;
    width: 100%;
  }

  form {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, auto);
  }

  #comment-box{
    display: contents;
  }

  form textarea {
    grid-column: 1/3;
    min-height: 132px;
    resize: vertical;
    width: 100%;
  }

}

/* ==========================================================================
   Small screen
   ========================================================================== */

@media (width <= 480px) {
  h2 {
    text-wrap: nowrap;
  }

  .form-input,
  .form-option{
    display: contents;
  }

  form {
    grid-template-columns: 1fr 2fr;
  }

}

@media (width <= 430px) {
  form {
    grid-template-columns: auto;
  }

  form textarea {
    grid-column: 1/2;
  }

}