@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: 500px 500px;
    grid-template-rows: auto auto auto;
    gap: 40px;
    justify-items: center;
}

.project-link {
    position: relative;
    display: flex;
    transition: background-color 0.5s ease;
}

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

.project-link img {
    max-width: 400px;
    max-height: 400px;
    padding: 10px;
}

.project-link:hover img {
    opacity: 30%;
}

.project-link .project-text {
    position: absolute;
    font-size: 1.4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0%;
    transition: opacity 0.5s ease;
}

.project-link:hover .project-text {
    opacity: 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%;
}

#about {
    max-width: 800px;
}

div.scroll-container {
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
}

div.scroll-container img {
    padding: 10px;
    height: 500px;
}

.text-2-columns {
    border: hidden;
    border-spacing: 40px 0px;
}

.text-2-columns tr td {
    vertical-align: text-top;
    width: 50%;
}