/* ========================================
   CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Colors */
  --color-background: #D5DFDD;
  --color-text: #333333;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-nav-bg: #F5B757;
  --color-nav-text: #2A2022;
  --color-link: #3333FF;
  --color-link-visited: #990099;
  --color-link-active: #9999FF;

  /* Typography */
  --font-primary: Verdana, Arial, Helvetica, sans-serif;
  --font-secondary: Arial, Helvetica, sans-serif;
  --font-size-small: 11px;
  --font-size-base: 13px;
  --font-size-large: 18px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 3px;
  --spacing-md: 8px;
  --spacing-lg: 10px;

  /* Layout */
  --max-width: 700px;
  --sidebar-width: 120px;
  --browser-width: 700px;
  --browser-content-width: 688px;
  --browser-sides-width: 6px;
  --awards-width: 600px;
}

/* ========================================
   BASE
   ======================================== */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: var(--spacing-lg) 0 0 var(--spacing-lg);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.4;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
}

a:visited {
  color: var(--color-link-visited);
}

a:active {
  color: var(--color-link-active);
}

a:hover {
  text-decoration: underline;
}

/* ========================================
   LAYOUT
   ======================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

.content {
  padding: var(--spacing-sm);
}

.banner {
  text-align: left;
  margin-bottom: var(--spacing-sm);
}

.nav {
  background-color: var(--color-nav-bg);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.nav a {
  color: var(--color-nav-text);
  text-decoration: none;
  font-family: var(--font-secondary);
  font-weight: bold;
}

.nav a:hover {
  text-decoration: underline;
}

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar {
  width: var(--sidebar-width);
  padding: var(--spacing-xs);
  float: right;
  margin-left: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.sidebar-header {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-weight: bold;
  padding: var(--spacing-xs);
  text-align: center;
}

.sidebar-content {
  background-color: var(--color-white);
  padding: var(--spacing-xs);
  font-family: var(--font-secondary);
  font-size: var(--font-size-small);
}

.sidebar-content a {
  display: block;
  padding: 1px 0;
}

/* ========================================
   AWARDS
   ======================================== */
.awards-table {
  width: var(--awards-width);
  margin: var(--spacing-md) 0;
  clear: both;
}

.awards-row {
  display: flex;
  gap: 0;
}

.awards-column {
  flex: 1;
  text-align: left;
}

/* ========================================
   BROWSER FRAME SIMULATION

   A screenshot boxed in chrome cut from four gifs: fixed-height images top
   and bottom, and 6px-wide strips tiled down the sides. The strips must
   stretch, not sit at their own height: screenshots run 167px to 2530px tall.
   ======================================== */
.browser-frame {
  width: var(--browser-width);
  margin: var(--spacing-md) 0;
  clear: both;
}

.browser-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.browser-row {
  display: flex;
}

.browser-content {
  width: var(--browser-content-width);
  background-color: var(--color-white);
}

.browser-left-side,
.browser-right-side {
  width: var(--browser-sides-width);
  background-repeat: repeat-y;
}

.browser-left-side {
  background-image: url('/images/browser_left.gif');
}

.browser-right-side {
  background-image: url('/images/browser_right.gif');
}

/* ========================================
   TYPOGRAPHY & UTILITIES
   ======================================== */
.site-title {
  font-size: var(--font-size-large);
  font-family: var(--font-secondary);
  font-weight: bold;
  margin: var(--spacing-md) 0;
}

.copyright {
  font-size: var(--font-size-small);
  text-align: left;
}

.text-justify {
  text-align: justify;
}

.text-small {
  font-size: var(--font-size-small);
}

.margin-vertical {
  margin: var(--spacing-lg) 0;
}

.margin-top {
  margin-top: var(--spacing-lg);
}

.float-right {
  float: right;
  margin: var(--spacing-md);
}

/* Present to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 750px) {
  :root {
    --max-width: 100%;
    --browser-width: 100%;
    --browser-content-width: calc(100% - 12px);
    --awards-width: 100%;
  }

  body {
    padding: var(--spacing-sm);
  }

  .sidebar {
    float: none;
    width: 100%;
    margin: var(--spacing-md) 0;
  }

  .awards-row {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .banner img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 14px;
    --sidebar-width: 100%;
  }

  .nav {
    text-align: center;
  }

  .nav a {
    display: inline-block;
    margin: var(--spacing-xs);
  }
}