/* roboto-mono-100 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 100;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-100italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 100;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-200 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 200;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-200italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 200;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-300 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-300italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 300;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-regular - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-500 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-500italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 500;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-600 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-600italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 600;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-700 - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-700italic - latin_latin-ext */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 700;
    src: url('./fonts/roboto-mono-v23-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }   

html {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

body {
    padding-left: calc(100vw - 100%);
}


.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: auto;
    padding: 1.25em 0em;
}

#profile-picture {
    border-radius: 50%;
    width: 100%;
}

#external-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#external-links p {
    margin: 0.5em 0em;
}

/* Style the main content and sidebar */
.main-content {
    padding: 0em 1.25em;
}

.sidebar-content {
    padding: 0em 1.25em;
}

.main-content {
    flex: 6;
}

/* Ensure the sidebar is narrower */
.sidebar-content {
    flex: 1;
    min-width: 100px;
    border-right: 1px black solid;
}

h1 {
    margin-top: 0em;
}


@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 0em;
    }

    .main-content,
    .sidebar-content {
        flex: 1 1 100%;
        border: none;
        padding: 1.25em;
    }

    .sidebar-content {
        border-bottom: 1px black solid;
        text-align: center;
    }

    #profile-picture {
        border-radius: 50%;
        width: 25%;
    }

    #external-links {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
    }

    #external-links p {
        margin: 0 10px;
    }

}