* {
  box-sizing: border-box;
}

:root {
  font-family: sans-serif;
  font-size: 15px;
}

h1 {
  font-size: 1.5rem;
}

.container {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem;
}

[hidden] {
  display: none;
}

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

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

.text-left {
  text-align: right;
}

form input,
form button {
  width: 100%;
  padding: .6rem;
  border: 1px solid #000;
  outline: none;
  border-radius: 2px;
}

form input:focus,
form button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px #c1a7ff;
}

@media screen and (max-width: 800px) {
  .container-md {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 500px) {
  .container-xs {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0rem;
  }
}

.recommend-item {
  display: flex;
}

.recommend-container {
  padding: 1rem 2rem;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.recommend-container:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}