@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --theme_light: hsl(165, 50%, 49%);
  --theme_light_hover: hsl(165, 50%, 30%);
  --theme_edm_bg: hsl(252, 45%, 98%);
  --shadow--30: hsla(0, 0%, 0%, 0.3);
  --shadow--10: hsla(0, 0%, 0%, 0.1);
  --grey_scale--100: hsl(0, 0%, 100%);
  --grey_scale--80: hsl(0, 0%, 80%);
  --grey_scale--70: hsl(0, 0%, 70%);
  --grey_scale--50: hsl(0, 0%, 50%);
  --grey_scale--30: hsl(0, 0%, 30%);
  --grey_scale--20: hsl(0, 0%, 20%);
  --grey_scale--15: hsl(0, 0%, 15%);
  --grey_scale--10: hsl(0, 0%, 10%);
}
*,
body,
html {
  margin: 0;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}
h2 {
  padding-bottom: 16px;
  color: var(--grey_scale--70);
}
.left-panel {
  overflow-x: scroll;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  height: 100dvh;
  padding: 20px;
  background-color: var(--grey_scale--20);
  font-size: 16px;
  color: var(--grey_scale--80);
}
.left-panel ::-moz-selection {
  background: var(--theme_light);
  color: var(--grey_scale--100);
}
.left-panel ::selection {
  background: var(--theme_light);
  color: var(--grey_scale--100);
}
.right-panel {
  display: flex;
  justify-content: center;
  overflow-x: scroll;
  width: 100%;
  height: 100dvh;
  background-color: var(--theme_edm_bg);
  word-spacing: normal;
}
.email-width {
  min-width: 320px;
  max-width: 600px;
}
label {
  font-size: 14px;
  font-weight: 500;
  color: var(--grey_scale--50);
}
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  transition-duration: 0.2s;
  background-color: var(--grey_scale--15);
  border: 1px solid var(--grey_scale--30);
  border-radius: 8px;
  font-size: 16px;
  color: var(--grey_scale--50);
}
input:hover {
  background-color: var(--grey_scale--10);
  border: 1px solid var(--grey_scale--50);
}
input:focus {
  background-color: var(--grey_scale--10);
  border: 1px solid var(--theme_light);
}
input::-webkit-file-upload-button {
  -webkit-appearance: none;
  box-shadow: 0 6px var(--shadow--10);
  padding: 5px 24px;
  transition-duration: 0.2s;
  background-color: var(--theme_light);
  border: none;
  border-radius: 3px;
  font-size: 12px;
  color: var(--grey_scale--100);
}
input::file-selector-button {
  -webkit-appearance: none;
  box-shadow: 0 6px var(--shadow--10);
  padding: 5px 24px;
  transition-duration: 0.2s;
  background-color: var(--theme_light);
  border: none;
  border-radius: 3px;
  font-size: 12px;
  color: var(--grey_scale--100);
}
input::-webkit-file-upload-button:hover {
  background-color: var(--theme_light_hover);
}
input::file-selector-button:hover {
  background-color: var(--theme_light_hover);
}
.two-col {
  display: flex;
  gap: 12px;
  width: 100%;
}

.two-col div{
  width: 100%;
}

.dashed {
  height: 1px;
  margin-bottom: 16px;
  background: var(--grey_scale--30);
  border: none;
}
.flex {
  display: flex;
}
button {
  outline: none;
  box-shadow: 0 6px var(--shadow--10);
  display: block;
  position: relative;
  top: 0px;
  width: 100%;
  padding: 12px 24px;
  transition-duration: 0.2s;
  background-color: var(--theme_light);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--grey_scale--100);
}
button:hover {
  box-shadow: 0 6px var(--shadow--30);
  background-color: var(--theme_light_hover);
}
button:active {
  box-shadow: none;
}
.btn-group {
  display: flex;
  gap: 12px;
}
footer {
  -ms-grid-row-align: center;
  -moz-column-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
  flex: 0 0 auto;
  align-self: center;
  padding: 20px 20px 0px;
  font-size: 12px;
  font-weight: 400;
  color: var(--grey_scale--80);
}
footer a,
footer p {
  font-size: 12px;
  color: var(--grey_scale--80);
}
.footer-image {
  width: 20px;
  margin: 0;
}
@media screen and (max-width: 600px) {
  body {
    display: flex;
    flex-direction: column !important;
  }
  .left-panel,
  .right-panel {
    overflow: none;
    width: 100%;
    height: auto;
  }
}