/* Variables____________ */
:root {
  --primary-clr: #55efc4;
  --secondary-clr: #d63031;
  --font-clr: #2d3436;
  --font-light: #777;
  --background-light: #fff;
  --background-mid: #dfe6e9;
  --background-mid-dark: #ddd;
  --box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.18);
  --transition-all: all 250ms;
}

/* Open Sans font import from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

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

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--font-clr);
}

ul {
  list-style: none;
}

li {
  margin: 1em 0;
}

label,
input {
  display: block;
}

label {
  font-size: 1.25rem;
}

/* Inputs____________ */
input {
  width: 200px;
  padding: 15px 0 6px;
  display: block;
  background-color: inherit;
  border: none;
  border-bottom: 1px solid var(--font-light);
  line-height: normal;
  transition: var(--transition-all);
  flex-grow: 1;
  margin-right: 0.2em;
}

input::placeholder {
  font-size: 1rem;
  font-weight: 300;
  transition: var(--transition-all);
}

input:hover {
  border-bottom: 2px solid var(--font-light);
  padding-bottom: 10px;
}

input:focus {
  border-bottom: 2px solid var(--primary-clr);
  outline: none;
}

input:focus::placeholder {
  font-size: 0.75rem;
  transform: translateY(-20px);
}

/* Layout_______________________ */
.container {
  display: flex;
}

.sidebar {
  width: 40%;
  max-width: 600px;
  background: #f3f3f3;
  min-height: calc(100vh - 95px);
}

.list {
  width: 60%;
}

form {
  padding: 4rem 2rem 2rem;
}

/* 870px Breakpoint_______________________ */
@media (max-width: 870px) {
  /* Layout_______________________ */
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    max-width: none;
    min-height: inherit;
    padding-bottom: 1rem;
  }

  form {
    padding-top: 3rem;
  }
}