body {
  font-size: 14px;
  margin: 0;
  font-family: sans-serif;
}

.fixed-header {
  top: 0;
  position: fixed;
  width: 96%;
  background-color: white;
  border-bottom:#ccc 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2%;
}

.fixed-header h1 {
  margin: 0;
}

main {
  margin: auto;
  margin-top: 80px;
  text-align: center;
  width: 96%;
  padding: 0 2%;
  max-width: 500px;
}

h1 {
  color: brown;
}

section {
  border-bottom: solid 2px #ccc;
  /* We divide the space between margin and padding because padding is included in the element and we link to it with an anchor. That allows it to be visible after the header*/
  margin-top: 100px;
  padding-top: 100px; 
}

img {
  max-width: 100%;
}

section p {
  margin-top: 7px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}

.btn {
  font-size: 12px;
  font-weight: bold;
  border-radius: 25px;
  padding: 5px 12px;
  text-decoration: none;
  border: solid 2px #a52a2a;
  cursor: pointer;
}

.btn-primary {
  background-color: #a52a2a;
  color: white;
}

.btn-primary:hover {
  border: solid 2px #951a1a;
  background-color: #951a1a;
  color: #eee;
}

.btn-secondary {
  color: #a52a2a;
  background-color: white;
}

.btn-secondary:hover {
  border: solid 2px #951a1a;
  color: #951a1a;
  background-color: #eee;
}

#upload-image {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333a;
}

#upload-image:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

#upload-image form {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
}

#upload-image h2 {
  margin: 0;
}

.same-line {
  display: flex;
  justify-content: space-around;
}

input[type=text],
input[type=password] {
  border-radius: 3px;
  border: solid 1px #999;
  padding: 6px;
}

.snack {
  position: fixed;
  right: -300px;
  bottom: 20px;
  padding: 6px 12px;
  border-radius: 5px;
  transition: transform 0.5s ease;
}

.snack a {
  text-decoration: none;
}

.snack:target {
  transform: translateX(-320px);
}

#success {
  border: solid 1px #449933;
  background-color: #aaeeaa;
}

#failure,
#failure-pwd {
  border: solid 1px #994433;
  background-color: #eeaaaa;
}