:root {
  --orange: #ff6a00;      /* main accent colour */
  --black: #000000;       /* sidebar */
  --dark: #111111;        /* main page background */
  --white: #f2f2f2;       /* main text */
  --grey: #a3a3a3;        /* less important text */
}


* {
  box-sizing: border-box; 
}

body {
  margin: 0;                        
  display: flex;                    
  background-color: var(--dark);
  color: var(--white);
  font-family: "Bricolage Grotesque", Arial, Helvetica, sans-serif;
  line-height: 1.6;                
}


/* ============================================
   SIDEBAR (left)
   ============================================ */
#sidebar {
  width: 280px;
  min-height: 100vh;                /* at least as tall as the screen */
  background-color: var(--black);
  border-right: 3px solid var(--orange);
  padding: 30px 20px;

  position: sticky;                 /* stays in place while you scroll */
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo {
  font-size: 1.3rem;
  font-weight: 800;                 /* extra bold */
  line-height: 1.1;
  margin: 0 0 25px 10px;
}

.logo span {
  color: var(--orange);
}

/* The grey headings: "Projects" and "Online" */
.nav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--grey);
  margin: 25px 10px 8px 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #333;
}

/* The links in the sidebar */
nav a {
  display: block;                   /* makes each link fill a whole row */
  padding: 8px 10px;
  color: var(--white);
  text-decoration: none;            /* removes the underline */
  border-left: 3px solid transparent;
}

/* When you hover over a link */
nav a:hover {
  background-color: #1a1a1a;
}

/* The link of the page you're on. script.js adds this class. */
nav a.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background-color: #1a1a1a;
  font-weight: 600;
}

/* The little ↗ arrow on the Online links (they have class="external") */
nav a.external::after {
  content: "\2197";                 /* this code is the ↗ symbol */
  float: right;                     /* pushes it to the right edge */
  color: var(--grey);
}


/* ============================================
   MAIN CONTENT (right)
   ============================================ */
main {
  flex: 1;                          /* takes up all the remaining space */
  padding: 50px 60px 80px 60px;
  max-width: 950px;
}

.page {
  display: none;
}

.page.show {
  display: block;
}

.title {
  font-size: 3.2rem;
  font-weight: 800;                 /* extra bold */
  letter-spacing: -0.02em;          /* pulls the letters slightly closer */
  margin: 0 0 15px 0;
  line-height: 1.05;
}

.orange {
  color: var(--orange);
}

/* The short orange bar under the title */
.line {
  width: 70px;
  height: 4px;
  background-color: var(--orange);
  border: none;
  margin: 0 0 25px 0;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 40px 0 12px 0;
}

p {
  max-width: 65ch;                  /* stops lines getting too long to read */
  color: #d8d8d8;
}

.big {
  font-size: 1.2rem;
  color: var(--white);
}

.info {
  color: var(--grey);
}


/* ============================================
   TAGS AND BUTTON
   ============================================ */
.tags {
  display: flex;
  flex-wrap: wrap;                  /* moves tags to the next row if needed */
  gap: 8px;
  padding: 0;
  list-style: none;                 /* removes the bullet points */
}

.tags li {
  border: 1px solid var(--orange);
  color: var(--orange);
  padding: 3px 12px;
  border-radius: 20px;              /* makes the rounded pill shape */
}

.button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: var(--orange);
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}

.button:hover {
  background-color: #ff8533;
}


/* ============================================
   GIFS AND DESCRIPTIONS
   ============================================ */
figure {
  margin: 0 0 30px 0;
}

figure img {
  width: 50%;                      /* fills the width of the page */
  display: block;
  background-color: var(--black);
  border: 1px solid #333;
  border-radius: 8px;
}

/* The Sketchfab 3D viewer */
figure iframe {
  width: 100%;
  aspect-ratio: 16 / 9;             /* keeps the viewer a nice widescreen shape */
  display: block;
  border: 1px solid #333;
  border-radius: 8px;
  background-color: var(--black);
}

figcaption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  color: #d8d8d8;
}


/* ============================================
   MOBILE (screens narrower than 800px)
   ============================================ */

/* The top bar is hidden on computers */
.topbar {
  display: none;
}

@media (max-width: 800px) {

  body {
    display: block;                 /* stack things instead of side by side */
  }

  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--black);
    border-bottom: 2px solid var(--orange);
  }

  .topbar button {
    background: none;
    color: var(--white);
    border: 1px solid var(--orange);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 1rem;
    cursor: pointer;
  }

  /* The sidebar slides off the screen until Menu is pressed */
  #sidebar {
    position: fixed;
    left: -300px;
    z-index: 10;
    transition: left 0.2s;
  }

  #sidebar.open {
    left: 0;
  }

  main {
    padding: 30px 20px 60px 20px;
  }

  .title {
    font-size: 2.4rem;
  }
}