html {
  scroll-padding-top:100px;
}
h1, h2 {
  margin:0;
  padding:0;
}
body {
  font-family:"Avenir Next";
}


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

header.header {
  height:80px;
  box-shadow:0px 0px 5px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  position:fixed;
  width:100%;
  z-index:2;
  background:white;
}

header.header .logo,
header.header .links {
  display: flex;
  gap:1rem;
  align-items: center;
}

header.header .actions {
  display: flex;
  align-items: center;
  flex-grow:1;
  justify-content: flex-end;
}

header.header .links a {
  display: flex;
  gap: .5rem;
  text-decoration: none;
  color:#333;
  align-items: center;
}

header.header .links img {
  width:auto;
  height:1.2rem;
}

header.header .logo span {
  font-weight:600;
  font-size:1.25rem;
  line-height:1.3125rem;
}

header.header .logo img {
  width:auto;
  height:42px;
  transform:translateY(1px);
}

header.header .search {
  margin: 0 2rem 0 2rem;
  width:auto;
  display: flex;
  flex-grow:1;
  justify-content: flex-end;
}

header.header .search input {
  padding:.75rem;
  border:2px solid #ccc;
  border-radius:8px;
  font-size:1rem;
  max-width:400px;;
  width:100%;
}

main {
  display: grid;
  grid-template-columns: 300px auto;
}


main .sidebar {
  height:120vh;
}

main .content {

}

.bg {
  background:#f5f5f0;
  padding:1.5rem;
}
/* 27px font variant */
/*
header {
  height:100px;
}

header .logo span {
  font-weight:600;
  font-size:1.5rem;
  line-height:1.6rem;
}

header .logo img {
  width:50px;
  height:auto;
}
*/