:root {
  --searchbar-height: 75px;

  --sidebar-length: 200px;

  --border-radius-1: 20px;

  --white-background: whitesmoke;

  --recipe-card-width: 250px;
  --recipe-card-height: 300px;

  --recipe-card-image-height: 200px;
}

* {
  box-sizing: border-box;
}

body { margin: 0px; }

#body {
  display: grid;
  grid-template-columns: var(--sidebar-length) 1fr;
  grid-template-rows: var(--searchbar-height) 1fr;

  margin: 0px;

  width: 100vw;
  height: 100vh;
}

#search-bar {
  grid-row: 1;
  grid-column: 1 / 3;

  background-color: rgb(19, 19, 19);
  border-bottom: 2px solid gray;

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


#bar-left {
  color: white;
}

#sidebar {
  grid-row: 2;

  background-color: var(--white-background);
  box-shadow: 0px 0px 5px black;
}

#sidebar ul {
  display: flex;
  flex-direction: column;

  list-style: none;
}

#main-content {
  grid-row: 2;
  padding: 20px;
}

.tab-text {
  font-size: 30px;
  font-weight: bolder;
}

.recipe-grid {
  display: flex;
  width: 100%;
}