* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
}

body {
  font-size: 1em;
  font-family: "breakers", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.container {
  display: grid;
  width: 100%;
  min-height: 100vh;
  grid-template-columns: 15% 1fr 15%;
  grid-template-rows: auto auto auto;
}

header {
  grid-area: 1 / 1 / 1 / 4;
  display: flex;
  min-height: 40vh;
  background-color: #bbb;
  padding: 0 15%;
}

.side {
  grid-area: 1 / 1 / 3 / 1;
}
.hero {
  grid-area: 2 / 2 / 2 / 2;
}
.name {
  grid-area: 1 / 2 / 1 / 2;
  align-self: center;
}
main {
  grid-area: 2/ 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  gap: 10px;
  margin: 10px;
}

footer {
  grid-area: 3/ 2;
  grid-area: footer;
  background-color: #bbb;

  font-size: 1.5em;
}

/* //////////////// NAV LINKS //////////////// */

nav {
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

nav a {
  letter-spacing: 2px;
  font-size: 0.8em;
  font-weight: 600;
  padding: 4px 7px;
  text-transform: uppercase;
  text-decoration: none;

  border-radius: 3px;
}

/* unvisited link */
nav a:link,
nav a:visited {
  color: #ffffff;
  background-color: #4f9cd6;
}

/* mouse over link */
nav a:hover,
n.navbar v a:active {
  color: #4f9cd6;
  background-color: rgb(176, 206, 243);
}

h1,
h2 {
  font-family: "cheee-variable", sans-serif;
  font-variation-settings: "YEST" 700, "GRVT" 0;
  letter-spacing: 2.5px;
}

h1 {
  font-size: 5em;
  color: white;
}

.about-text {
  margin-left: 40px;
}

.work {
  background-color: #bbb;
  display: grid;
  grid-template-rows: max-content 100px auto;
  padding: 2%;
}

.gallery {
  width: 100%;
  display: flex;
  grid-area: 1;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-self: flex-start;
}

.title {
  grid-area: 2;
  align-self: center;
  text-align: center;
}

.desc {
  grid-area: 3;
  justify-self: center;
}

#work-1 {
  grid-area: 1 / 1 / 1 / 3;
}

#work-2 {
  grid-area: 1 / 3 / 3/ 3;
}
#work-3 {
  grid-area: 2 / 1 / 4 / 1;
}