/* Global */
:root {
    --white: #fff;
    --gray: #616D7E;
    --black: #000;
    --red: #eb4747;
}
@font-face {
    font-family: "MAD Sans Fill";
    src: url("../fonts/mad-sans-fill-bold.woff2");
}
@font-face {
    font-family: "MAD Sans Fill Italic";
    src: url("../fonts/mad-sans-fill-bold-italic.ttf");
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "MAD Sans Fill";
    letter-spacing: 0.1px;
    width: 100vw;
    height: auto;
    font-size: 1em;
    line-height: 1.25;
    background: var(--black);
}

/* Main container */
main {
    margin: 21.5px 20px auto 20px;
}

/* Menu */
nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    width: 100%;
    height: auto;
    margin-top: -4px;
    margin-bottom: 20px;
}
.menu {
    position: absolute;
    width: 100%;
    text-align: right;
    right: 60px;
}
/* .work-title {
    font-family: "MAD Sans Fill Italic";
    display: block;
    text-indent: 1.5em;
} */

#info,
#mail {
    margin-left: 20px;
}

/* Content */
.content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    width: 100%;
    max-width: 1280px;
    margin-top: 40px;
    color: var(--white);

}
.biography {
    margin-left: 40px;
}
.history {
    margin-right: 40px;
}

/* Links */
a:link,
a:hover,
a:visited {
    color: var(--white);
}
a:link, a:visited {
    text-decoration: none;
}
a:link.active,
a:visited.active {
    color: var(--red);
}
a:link.inactive,
a:visited.inactive {
    color: var(--gray);
}
a:hover.inactive {
    color: var(--white);
}
a:link.external {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}
a:hover.external {
    color: var(--white);
    text-decoration: none;
}

li {
    list-style-type: none;
    padding-left: 20px;
    text-indent: -20px;
}

/* Footer */
.mobile-footer {
    display: none;
}
.desktop-footer {
  color: var(--white);
  background: var(--black);
  z-index: 1000;
  padding-top: 20px;
  padding-bottom: 20px;
}


/* Media Queries */
@media (max-width: 720px) {
    body {
        font-size: 1.125em;
        line-height: 1.375em;
    }
    .content {
        grid-template-columns: 1fr;
        margin-right: 40px;
        margin-top: 0;
    }
    .history {
        grid-column: 1;
        /* margin-left: 20px; */
    }
    .history:first-of-type {
        margin-top: 20px;
    }
    .desktop-footer {
        display: none;
    }
    .biography {
        margin-left: 0;
        margin-right: 20px;
    }
    nav {
        display: block;
        margin-bottom: 0;
    }
    .menu {
        position: initial;
        text-align: left;
        /* margin-left: 20px; */
    }
    #info, #mail {
        margin: 0;
    }
    .inactive, .active {
        display: block;
    }
    .content:first-of-type {
        position: initial;
        margin-top: 20px;
    }
    .mobile-footer {
        display: inline;
        /* margin-left: 20px; */
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .history > ul:first-of-type {
        margin-top: 40px;
    }
    .menu a {
		display: block;
		width: max-content;
		padding: 0;
	}
}