@font-face {
  font-family: main_font;
  src: url("cormorant-variable-font-wght.ttf");
}

html {
    box-sizing: border-box;
    color: #333;
    font-family: main_font;
    font-size: 1.25em;
    line-height: 1.4;
}

* {
  box-sizing: border-box;
}

.icon {
    height: 1em;
    width: 1em;
}

#signature {
    font-size: 0.5em;
    align-self: flex-end;
}

#nav-menu {
  padding-top: 10pt;
  padding-right: 20pt;
  padding-bottom: 10pt;
  padding-left: 10pt;
  height:100%;
}

#title-bar {
  font-size: 1.85em;
  font-weight: bold;
  padding-top: 10pt;
  padding-right: 10pt;
  padding-bottom: 10pt;
  padding-left: 10pt;
}

main {
  padding: 10pt 10pt 10pt 10pt;
}

#project-grid {
    display: grid;
    grid-template-columns: 400px 400px 400px;
    grid-template-rows: auto auto auto;
    gap: 10px;
    align-items: center;
    justify-items: center;
}

.project-link {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    text-align: center;
    color: #fff;
    transition: background-color 0.3s ease;
    transition: color 0.5s ease;
}

.project-link:hover {
    background-color: #EEE;
    color: #333;
}

.project-link img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

#nav-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#container {
    display: grid;
    grid-template-columns: 10% 90%;
}