* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 16px;
}

body {
  width: 100%;
  min-height: 100vh;

  background-image: url('../assets/bg-leafs.png');
  background-size: cover;
}

body .topbar {
  width: 100%;
  height: 15vh;

  background-color: #329a67;
}

body .panel {
  width: 100%;
  height: 85vh;
}

body .panel .protocol__box {
  max-width: 744px;
  width: 100%;
  margin: 0 auto;
  margin-top: -75px;

  display: flex;
  flex-direction: column;

  padding: 0 20px;
}

body .panel .protocol__box header {
  width: 100%;
  height: 75px;

  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;

  position: relative;
}

body .panel .protocol__box header img {
  position: absolute;
  left: 20px;
  top: 20px;
}

body .panel .protocol__box header h1 {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  color: #4d4d4d;
  text-align: center;
}

body .panel .protocol__box .content {
  background-color: #efeae2;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

body .panel .protocol__box .content form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.5rem;
}

body .panel .content form img#logo {
  display: none;
}

body .panel .protocol__box .content form input {
  width: 300px;
  height: 45px;

  border: none;

  background-color: #d9d9d9;
  padding: 12px;

  font-family: 'IBM Plex Mono', sans-serif;
  color: #4d4d4d;
}

body .panel .protocol__box .content form button {
  border: none;

  background-color: #329a67;
  padding: 12px;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;

  cursor: pointer;
}

@media (max-width: 768px) {
  body .panel .protocol__box header img {
    display: none;
  }

  body .panel .content form img#logo {
    display: block;
  }

  body .panel .protocol__box .content form button {
    margin-bottom: 2rem;
  }
}