/* =====================================================
   RESET
===================================================== */

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --size-xs: 0.25rem;
  --size-sm: 0.5rem;
  --size-md: 1rem;
  --size-lg: 1.5rem;
  --size-xl: 2rem;
  --size-2xl: 4rem;
  --color-primary: #652eae;
  --color-secondary: #8e42ed;
  --color-tertiary: #584abf;
  --color-white: #ffffff;
  --color-gray-light: #cccccc;
  --color-gray-dark: #777777;
  --color-black: #1f2937;
  --color-pale: #f7f7fe;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 35%,#ffffff 0,#f7f8ff 35%,#eef1f8 100%);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-black);
  line-height: 1.5;
}

h1 {
  margin-bottom: var(--size-lg);
}

p {
  margin-bottom: var(--size-md);
}

a,
button,
input,
textarea {
  font: inherit;
}

textarea {
  border: 1px solid var(--color-gray-light);
  border-radius: var(--size-sm);
  padding: var(--size-lg);
  width: 100%;
  min-height: 200px;
}

button {
  border-radius: var(--size-sm);
  padding: var(--size-sm) var(--size-md);
  background-color: var(--color-secondary);
  font-weight: bold;
  color: var(--color-white);
  cursor: pointer;
}

button.disabled {
  cursor: not-allowed;
}

button.outlined.primary {
  border: 2px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
}

button.outlined.secondary {
  border: 2px solid var(--color-secondary);
  background-color: var(--color-white);
  color: var(--color-secondary);
}

.m-0 {
  margin: 0;
}

.mb-sm {
  margin-bottom: var(--size-sm);
}

.mb-md {
  margin-bottom: var(--size-md);
}

.mb-lg {
  margin-bottom: var(--size-lg);
}

.mb-xl {
  margin-bottom: var(--size-xl);
}

.mb-2xl {
  margin-bottom: var(--size-2xl);
}

.p-md {
  padding: var(--size-md);
}

.p-lg {
  padding: var(--size-lg);
}

.no-bullet {
  list-style: none;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.gap-sm {
  gap: var(--size-sm);
}

.gap-md {
  gap: var(--size-md);
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.bg-color-primary {
  background-color: var(--color-primary);
}

.bg-color-secondary {
  background-color: var(--color-secondary);
}

.bg-color-tertiary {
  background-color: var(--color-tertiary);
}

.text-center {
  text-align: center;
}

.text-large {
  font-size: calc(1.5 * var(--size-md));
}

.text-small {
  font-size: calc(0.8 * var(--size-md));
}

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-color-primary {
  color: var(--color-primary);
}

.text-color-secondary {
  color: var(--color-secondary);
}

.text-color-tertiary {
  color: var(--color-tertiary);
}

.text-color-white {
  color: var(--color-white);
}

.path-fill-color-primary {
  fill: var(--color-primary);
}

.path-fill-color-secondary {
  fill: var(--color-secondary);
}

.path-fill-color-tertiary {
  fill: var(--color-tertiary);
}

.path-fill-color-white {
  fill: var(--color-white);
}

.hidden {
  display: none;
}

.faded {
  opacity: 0.5;
}

.overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;

  background-color: var(--color-pale);
  opacity: 0.5;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.vh-50 {
  min-height: 50vh;
}

.vh-100 {
  min-height: 100vh;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-md {
  padding: var(--size-xs);
  width: var(--size-md);
  height: var(--size-md);
}

.icon-lg {
  padding: var(--size-xs);
  width: var(--size-lg);
  height: var(--size-lg);
}

.pill {
  border-radius: var(--size-md);
  padding: var(--size-xs) var(--size-md);

  box-shadow: 0 0 var(--size-sm) rgba(90, 60, 180, 0.25);
  color: var(--color-primary);
}

/* =====================================================
   HEADER
===================================================== */

.site-header {
  padding: var(--size-md);
  
  background-color: var(--color-white);
  color: var(--color-black);
}

.site-header a {
  color: var(--color-black);
  text-decoration: none;
}

/* =====================================================
   CONTENT
===================================================== */

main {
  padding: var(--size-xl) var(--size-md);

  background-image: url('../images/hero-background.svg'); 
  background-repeat: no-repeat; 
  background-position: center top;
}

.site-hero {
  color: var(--color-white);
}

.site-hero h1 {
  margin-bottom: 0;
  font-size: var(--size-2xl);
}

.hero-badge {
  border-radius: var(--size-lg);
  padding: var(--size-sm) var(--size-md);

  background-color: var(--color-tertiary);
  color: var(--color-white);
  font-size: smaller;
  font-weight: bold;
}

.converter-stage {
  border-radius: var(--size-md);
  padding: var(--size-md);

  background-color: var(--color-pale);
  box-shadow: 0 0 var(--size-md) rgba(90, 60, 180, 0.25);
}

.converter-instructions {
  margin-bottom: var(--size-md);
  list-style: none;

  display: flex;
  justify-content: space-around;
}

.converter-instructions li {
  font-weight: bold;
  color: var(--color-gray-dark);

  display: flex;
  align-items: center;
  gap: var(--size-sm)
}

.converter-instructions li .bullet {
  border-radius: 100%;
  padding: var(--size-sm);

  width: var(--size-xl);
  height: var(--size-xl);
  
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 var(--size-sm) var(--size-md) rgba(90, 60, 180, 0.25);

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

.drop-zone {
  margin-bottom: var(--size-xl);
  border: 1px dashed var(--color-primary);
  border-radius: var(--size-md);
  padding: var(--size-xl);

  cursor: pointer;
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: #6138c1;
  
  background: var(--color-white);
}

.features {
  /* margin: 0 0 var(--size-md) 0; */
  border-radius: var(--size-md);
  padding: var(--size-lg);

  background-color: var(--color-white);
  list-style: none;

  display: flex;
  gap: var(--size-lg);
}

.features li {
  display: flex;
  flex: 1;
  gap: var(--size-md);
  overflow-wrap: anywhere;
}

.features li .icon {
  width: 100px;
  height: 100px;
}

/* =====================================================
   FOOTER
===================================================== */

.site-footer {
  padding: var(--size-md);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media screen and (max-width: 767px) {
  main {
    background: none;
  }

  .site-hero {
    color: var(--color-black);
  }

  .features {
    flex-direction: column;
  }

  .features li {
    align-items: center;
  }
}