@import url("navbar.css");
@import url("blogpreview.css");
@import url("blogpost.css");

body {
  font-family: "Source Sans Pro", "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  background-color: #121212;
  color: #e0e0e0;
  width: 100%;
  min-width: 300px;
}

h1,
h2,
h3,
h4,
ul {
  margin: 8px 0;
}

ul {
  padding: 0 16px 0 32px;
}

.header {
  width: 100%;
  background-color: #520000;
  color: #efd09e;
  padding: 8px 32px 16px;
  margin-bottom: 0;
  box-sizing: border-box;
  min-width: 300px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 32px;
  row-gap: 0;
}

.header h1,
.header h2,
.header h4,
.header p {
  margin: 4px 0;
}

.header p {
  margin: 4px 0;
}

.header-column {
  flex: 1 1 calc(50% - 16px);
  min-width: 200px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: 0 32px 0 0;
  box-sizing: border-box;
}

.warning {
  background-color: #994302;
  border: 1px solid #ff9800;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
  padding: 0 16px 4px;
  margin: 32px 32px 0;
}

.column {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 0 32px;
  box-sizing: border-box;
}

.row {
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
  padding: 0 16px 4px;
  margin-top: 32px;
}

.coursework {
  column-count: 3;
  margin: 8px 0;
}

.coursework p {
  margin: 0 0 4px;
}

.footer {
  text-align: center;
  padding: 16px;
}

@media screen and (max-width: 1000px) {
  .header {
    padding: 4px 16px 8px;
  }

  .header h1,
  .header h2,
  .header h4,
  .header p {
    margin: 4px 0;
  }

  .content {
    grid-template-columns: 1fr;
    padding: 0 16px 0 0;
  }

  .warning {
    margin: 16px 16px 0;
  }

  .column {
    padding: 0 0 0 16px;
  }

  .row {
    margin-top: 16px;
  }

  .footer {
    padding: 8px;
  }

  body {
    font-size: 12px;
  }
}

a:link {
  color: #ffff00;
}

a:visited {
  color: #ff9800;
}

a:hover {
  color: #994302;
}

a:active {
  color: #994302;
}