@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&family=Unbounded:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #3b3f23;
  color: #3b3f23;
  font-family: "Crimson Text", serif;
  font-family: "Unbounded", serif;
}

a {
  text-decoration: none;
  color: #ffb83e;
}

a:hover {
  color: #c8c81f;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: white;
}

.haut {
  display: flex;
  flex-direction: row;
  background-color: #3b3f23;
  height: 50vh;
}

.bas {
  display: flex;
  flex-direction: row;
  background-color: #3b3f23;
  height: 50vh;
}

.haut-gauche {
  padding: 30px;
  width: 50%;
  background-color: #ffb83e;
}

.haut-droit {
  padding: 30px;
  color: #ffb83e;
  width: 50%;
}

.bas-gauche {
  color: #ffb83e;
  padding: 30px;
  width: 50%;
}

.bas-droit {
  width: 50%;
  background-image: url("/assets/img/autoportraitmask.png");
  background-color: #ffb83e;
  background-size: cover;
  background-position: center;
}