:root {
    --top-margin: 60px;
    --asideW: 250px;
}

/* Light (300) */
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

/* Regular (400) */
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

/* Medium (500) */
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

/* Bold (700) */
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('Neue Montreal/NeueMontreal-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

body {
    display: grid;
    grid-template-columns: var(--asideW) 3fr;
    gap: 70px;
    font-family: "Neue Montreal", sans-serif;
    font-size: 10pt;
    margin: 0 70px;
    background-color: white;
}

p {
    margin-top: 0;
}

img {
    width: 100%;
    height: auto;
    opacity: 100%;
}

img.gallery {
    margin-bottom: 20px;
}

img.me {
    width: 100px;
    height: auto;
}

.kris {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

aside {
    position: fixed;
    top: var(--top-margin);
    left: 70px;
    width: var(--asideW);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    height: 85%;
}

img.logo {
    width: 100%;
    position: relative;
    top: -20px;
    height: auto;
    opacity: 100%;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li.tab {
    padding: 3px 6px;
    border: 1px solid black;
    cursor: pointer;
}

nav ul li.tab.active {
    background-color: black;
    color: white;
}

main {
    columns: 2;
    gap: 20px;
    grid-column: 2;
    padding: var(--top-margin) 0;
}