/* 
   Contents
   ==================================================
    1. CSS Reset
    2. Custom Properties
    3. Page Layout
    4. CADTutor Logo
    5. Site Navigation
    6. Anciliary Navigation
    7. Text Links
    8. Typography
    9. Tutorials of the Moment
   10. AutoCAD Productivity
   11. Forum Latest
   12. Image of the Week
   13. Tip of the Day
   14. Adsense
*/


/* 1. CSS Reset
   ================================================== */

html {
   box-sizing: border-box;
   font-size: 16px;
}
*, *:before, *:after {
   box-sizing: inherit;
}
body, figure, figcaption, h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, table, th, td {
   margin: 0;
   padding: 0;
   font-weight: normal;
   font-size: 100%;
   text-align: left;
}
ul {
   list-style: none;
}
img {
   max-width: 100%;
   height: auto;
}


/* 2. Custom Properties
   ================================================== */
:root {
   --body-colour: #333;
   --body-background: #E5EADA;
   --body-font: 'Roboto', Arial, Helvetica, sans-serif;
   --body-festive: url("images/festive-light.png");
   --body-headings: #2B3340;
   --body-h1-colour: #343F4E;
   --body-h1-border: 4px solid rgba(0, 0, 0, 0.07);
   --body-link-colour: rgba(60, 90, 0, 1.0);
   --body-hover-colour: rgba(60, 90, 0, 0.7);
   --body-nav-background: #6886B1;
   --introduction-text: #333;
   --section-background: rgba(255, 255, 255, 0.6);
   --section-small-text-colour: #777;
   --section-border-radius: 6px;
   --section-h2-colour: #FFF;
   --section-h2-background: linear-gradient(#2E3A4A, #4F678C);
   --section-h2-border: 1px solid #2A394E;
   --section-ad-spacing: 2.0rem;
   --card-background: rgba(255, 255, 255, 0.75);
   --card-background-hover: rgba(255, 255, 255, 1.0);
   --card-padding: 0.6rem 1.2rem 1.0rem;
   --card-border: 1px solid #CCC;
   --card-border-top: 15px;
   --card-border-radius: 12px;
   --card-transition: 400ms;
   --card-scale: scale(1.02);
   --card-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
   --text-bold-weight: 700;
   --text-bold-colour: #444;
   --text-mono-font: consolas, monaco, monospace;
   --text-code: #C9371A;
   --text-command: #553333;
   --text-menu: #333355;
   --text-prompt: #C9371A;
   --text-variable: #558;
   --text-kbd-shadow: rgba(0, 0, 0, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
      --body-colour: #CCC;
      --body-background: #151A21;
      --body-festive: url("images/festive-dark.png");
      --body-headings: #60748F;
      --body-h1-colour: #7B90B0;
      --body-h1-border: 4px solid rgba(255, 255, 255, 0.07);
      --body-link-colour: #8F9F6F;
      --body-hover-colour: #6d7a52;
      --body-nav-background: #2E3A4A;
      --introduction-text: #BBB;
      --section-background: rgba(255, 255, 255, 0.05);
      --section-small-text-colour: #909CAC;
      --section-h2-colour: #CCC;
      --section-h2-background: linear-gradient(#27323F, #1A212A);
      --section-h2-border: 1px solid #323E4A;
      --card-background: rgba(255, 255, 255, 0.07);
      --card-background-hover: rgba(255, 255, 255, 0.12);
      --card-border: 1px solid #333;
      --card-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
      --text-bold-colour: #BBB;
      --text-code: #C4958B;
      --text-command: #D9C621;
      --text-menu: #93A4C2;
      --text-prompt: #D4CFAE;
      --text-variable: #91C7A1;
      --text-kbd-shadow: rgba(255, 255, 255, 0.6);
  }
}


/* 3. Page Layout
   ================================================== */
body {
   color: var(--body-colour);
   background-color: var(--body-background);
}
body.festive {
   background-image: var(--body-festive);
}
#layout_header {
   background-color: #2D3B4E;
   background: linear-gradient(#1A212A, #3D506D);
}
#layout_nav {
   background-color: var(--body-nav-background);
   min-height: 57px;
}
header, nav[aria-label="site"], main, footer {
   max-width: 1340px;
   margin: 0 auto;
}
header, div.introduction {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}
header {
   min-height: 110px;
   padding-top: 20px;
}
footer {
   font-size: 0.9rem;
   padding-bottom: 1.5rem;
   margin-top: 3.0rem;
}
section {
   margin-top: 4.0rem;
   background-color: var(--section-background);
   position: relative;
   padding: 3.0rem 0.5rem 1.5rem;
}
div + section {
   margin-top: var(--section-ad-spacing);
}
@media (min-width: 800px) {
   header, nav[aria-label="site"], main, footer {
      padding-left: 2.0rem;
      padding-right: 2.0rem;
   }
   div.introduction {
      padding: 0;
   }
   section {
      border-radius: var(--section-border-radius);
   }
}
@media (min-width: 860px) {
   div.introduction {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 3.0rem;
   }
   div.introduction h1 {
      grid-column: 1 / 3;
   }
   div.introduction p:nth-of-type(1) {
      grid-row: 3 / 4;
   }
}
@media (min-width: 1000px) {
   section > h3 + p:last-of-type {
      columns: 2 auto;
      column-gap: 2.2rem;
   }
}
@media (min-width: 1340px) {
   div.introduction p, section p:last-of-type {
      text-align: justify;
   }
}


/* 4. CADTutor Logo
   ================================================== */
header p:first-of-type {
   font-family: 'Libre Franklin', Roboto, Arial, Helvetica, sans-serif;
   font-size: 3.35em; /* smaller for 320px wide screens e.g. iPhone 5 SE */
   font-weight: 900; /* need to explicitly set weight and style for Safari */
   font-style: italic;
   line-height: 1.0;
   background-image: linear-gradient(0deg, #888, #FFF);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
header p:first-of-type a {
   transition-duration: var(--card-transition);
}
header p:first-of-type a:link,
header p:first-of-type a:visited,
header p:first-of-type a:hover,
header p:first-of-type a:active  {
   text-decoration: none;
   color: inherit;
}
header p:first-of-type a:hover {
   text-decoration: underline #1A212A;
}
header p:first-of-type a:focus {
   outline: none;
   text-decoration: underline #C00;
   background-color: transparent;
}

@media (min-width: 360px) {
   header p:first-of-type {
      font-size: 3.8em; /* standard size for all but the smallest screens */
   }
}


/* 5. Site Navigation
   ================================================== */
nav[aria-label="site"] li {
   line-height: 2.0rem;
   font-size: 1.1rem;
}
nav[aria-label="site"] li:last-of-type {
   margin-bottom: 1.0rem;
}
nav[aria-label="site"] a {
   display: block;
   text-decoration: none;
   padding-left: 5.1rem; /* 1.5 + 3.6 */
}
nav[aria-label="site"] a:link,
nav[aria-label="site"] a:visited {
   color: rgba(255, 255, 255, 0.7);
}
nav[aria-label="site"] a:hover,
nav[aria-label="site"] a:active,
nav[aria-label="site"] a:focus {
   color: rgba(255, 255, 255, 1.0);
   background-color: rgba(255, 255, 255, 0.1);
}
nav[aria-label="site"] label span:nth-of-type(2) {
   color: #FFF;
   font-size: 1.7rem;
   font-weight: 300;
   line-height: 1.75; /* to vertically centre menu text */
   margin-top: 1rem;
   margin-left: 5.0rem;
}
nav[aria-label="site"] input:focus + label span:nth-of-type(2) {
   color: #EEE;
   background-color: #C00;
   border: none;
}

/* Hamburger menu icon */
.navicon {
   background-color: #FFF;
   display: block;
   position: relative;
   width: 35px;
   height: 4px;
   border-radius: 2px;
   top: 26px; /* vertical centre of nav bar */
   left: 1.5rem;
}
.navicon::before,
.navicon::after {
   background: #FFF;
   display: block;
   width: 100%;
   height: 100%;
   content: "";
   position: absolute;
   transition: all 0.2s ease-out;
   border-radius: 2px;
}
.navicon::before {
   top: 10px;
}
.navicon::after {
   top: -10px;
}
nav[aria-label="site"] label {
   display: inline-block;
   width: 100%;
   height: 53px; /* nav bar height (57px) -4px */
   cursor: pointer;
}

/* Icon animation */
nav[aria-label="site"] input:checked ~ label .navicon {
   background: transparent; /* hides the middle bar */
}
nav[aria-label="site"] input:checked ~ label .navicon:before {
   transform: rotate(-45deg);
}
nav[aria-label="site"] input:checked ~ label .navicon:after {
   transform: rotate(45deg);
}
nav[aria-label="site"] input:checked ~ label .navicon:before,
nav[aria-label="site"] input:checked ~ label .navicon:after {
   top: 0;
}

/* Menu animation */
nav[aria-label="site"] input + label + ul {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s ease-in-out;
   margin-bottom: 1.5rem;
}
nav[aria-label="site"] input:checked + label + ul {
   max-height: 500px;
}

/* Move checkbox off screen rather than hide so it can have focus
   and menu can be opened with spacebar for keyboard users */
nav[aria-label="site"] input {
   position: absolute;
   top: -100%;
   left: -100%;
}

@media (min-width: 800px) {
   nav[aria-label="site"] input + label + ul {
      display: flex;
      column-gap: 35px;
      flex-wrap: wrap;
      margin-top: 0;
      max-height: fit-content;
      overflow: auto;
   }
   nav[aria-label="site"] li:last-of-type {
      margin-bottom: 0;
   }
   nav[aria-label="site"] a {
      display: inline-block;
      padding: 12px 0 13px 0;
   }
   nav[aria-label="site"] a:hover,
   nav[aria-label="site"] a:active {
      background-color: transparent;
   }

  /* Hide hamburger icon and menu text for wide screens */
   nav[aria-label="site"] label {
      display: none;
   }
}


/* 6. Ancillary Navigation
   ================================================== */
nav[aria-label="ancillary"] ul {
   display: flex;
   column-gap: 35px;
   flex-wrap: wrap;
   justify-content: center;
}


/* 7. Text Links
   ================================================== */
a {
   text-decoration-style: dotted;
   text-decoration-thickness: 1px;
}
a:link, a:visited {
   color: var(--body-link-colour);
}
a:hover, a:active {
   color: var(--body-hover-colour);
}
a:focus {
   outline: none;
   color: #EEE;
   background-color: #C00;
   border: none;
}


/* 8. Typography
   ================================================== */
body {
   font-family: var(--body-font);
   font-weight: 400;
   margin-bottom: 30px;
}
h1, h2, h3, h4, h5, h6, nav[aria-label="site"] label {
   font-family: 'Rubik', Roboto, Arial, Helvetica, sans-serif;
   line-height: 1.3;
   color: var(--body-headings);
}
h1 {
   font-size: 2.1rem;
   font-weight: 500;
   line-height: 1.2;
   color: var(--body-h1-colour);
   border-bottom: var(--body-h1-border);
   margin-top: 3.0rem;
}
h2 {
   font-size: 1.7rem;
   margin-top: 1.6rem;
}
section h2 {
   width: 100%;
   color: var(--section-h2-colour);
   background: var(--section-h2-background);
   font-size: 1.4rem;
   font-weight: 300;
   position: absolute;
   top: 0;
   left: 0;
   padding: 0.7rem 0 0.6rem 1.5rem;
   border-bottom: var(--section-h2-border);
   margin-top: 0;
}
h3 {
   font-size: 1.4rem;
   margin-top: 0.2rem;
}
section h3 + div,
section h3 + ul,
section h3 + figure {
   margin-top: 0.9rem;
}
section h3 {
   padding-left: 1.0rem;
}
section h2 + h3 {
   margin-top: 1.7rem;
}
h4 {
   font-size: 1.2rem;
   margin-top: 0.2rem;
}
h5 {
   font-weight: var(--text-bold-weight);
   margin-top: 1.0rem;
}
p { 
   line-height: 1.5;
}
p + p, ol + p {
   margin-top: 1.2rem;
}
h1 + p {
   margin-top: 1.0rem;
}
h2 + p, h3 + p {
   margin-top: 0.4rem;
}
div.introduction p {
   color: var(--introduction-text);
}
footer p {
   font-size: 0.9rem;
   text-align: center;
   color: #777;
   margin-top: 1.0rem;
}
sup {
   font-size: 0.8rem;
}
strong, b {
   font-weight: var(--text-bold-weight);
   color: var(--text-bold-colour);
}
@media (min-width: 800px) {
   section h2 {
      border-radius: 6px 6px 0 0;
   }
}


/* 9. Tutorials of the Moment
   ================================================== */
section.tutorials ul + h3 {
   margin-top: 2.0rem;
}
section.tutorials ul li a {
   display: block;
   height: 100%;
   color: inherit;
   text-decoration: none;
   position: relative;
   background-color: var(--card-background);
   padding: var(--card-padding);
   border: var(--card-border);
   border-top: var(--card-border-top) solid rgba(104, 134, 177, 0.75);
   border-radius: var(--card-border-radius);
   transition-duration: var(--card-transition);
}
section.tutorials li a:hover, section.tutorials li a:focus {
   transform: var(--card-scale);
   background-color: var(--card-background-hover);
   box-shadow: var(--card-shadow);
   border-top-color: rgba(104, 134, 177, 1.0);
}
section.tutorials ul li + li {
   margin-top: 1.0rem;
}
section.tutorials figure {
   display: grid;
   grid-template-columns: 80px auto;
   gap: 1.2rem;
   margin-top: 1.0rem;
   margin-bottom: 1.5rem;
}
section.tutorials figcaption {
   font-size: 90%;
   line-height: 1.55;
   margin-top: 0;
   margin-bottom: 2rem;
}
section.tutorials img {
   display: block;
   margin-top: 5px;
   margin-bottom: 1.0rem;
}
section.tutorials li h4 {
   color: var(--body-colour);
}
section.tutorials li a p:nth-of-type(1),
section.tutorials li a p:nth-of-type(2) {
   color: var(--section-small-text-colour);
   font-size: 0.8rem;
   margin:0;
   position: absolute;
}
section.tutorials li a p:nth-of-type(1) {
   left: 1.2rem;
   bottom: 1.0rem;
}
section.tutorials li a p:nth-of-type(2) {
   right: 1.2rem;
   bottom: 1.0rem;
}
section.tutorials > p {
   padding: 0 1.0rem;
}

@media (min-width: 860px) {
   section.tutorials > ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 1.5rem;
   }
   section.tutorials ul li + li {
      margin-top: 0;
   }
}
@media (min-width: 1280px) {
   section.tutorials > ul {
      grid-template-columns: 1fr 1fr 1fr;
   }
}


/* 10. AutoCAD Productivity
   ================================================== */
section.corner {
   display: flow-root;
   position: relative;
   padding: 3.0rem 1.5rem 1.5rem;
}
section.corner h3 {
   padding-left: 0;
   margin-top: 1.5rem;
}
section.corner h4 {
   margin-top: 1.2rem;
}
section.corner .author + p {
   color: var(--section-small-text-colour);
   font-size: 0.8rem;
}
section.corner > p:nth-last-of-type(2) {
   font-size: 0.9rem;
   text-align: right;
   clear: both;
   padding-top: 1.2rem;
}
section.corner h4 + ol,
section.corner h4 + ul {
   margin-top: 0.5rem;
}
section.corner ol li {
   line-height: 2.0;
   margin-left: 2.5rem;
}
section.corner ul.tips {
   list-style-type: square;
   margin-left: 2.0rem;
}
section.corner ul.tips li + li {
   margin-top: 1.5rem;
}
section.corner img.right {
   float: right;
   margin: 6px 0 1rem 2rem;
}
section.corner img.left {
   float: left;
   margin: 6px 2rem 1rem 0;
}
section.corner img.center {
   display: block;
   margin: 1.2rem auto;
}
section.corner .code,
section.corner code {
   font-family: var(--text-mono-font);
   color: var(--text-code);
}
section.corner .command {
   font-weight: var(--text-bold-weight);
   color: var(--text-command);
}
section.corner .menu {
   font-weight: var(--text-bold-weight);
   color: var(--text-menu);
}
section.corner .variable,
section.corner var {
   font-weight: var(--text-bold-weight);
   color: var(--text-variable);
}

@media (min-width: 860px) {
   section.corner .author + p {
      position: absolute;
      top: 3.2rem;
      right: 1.5rem;
   }
}


/* 11. Forum Latest
   ================================================== */
section.forum ul + h3 {
   margin-top: 2.0rem;
}
section.forum ul a {
   display: block;
   height: 100%;
   color: inherit;
   text-decoration: none;
   position: relative;
   background-color: var(--card-background);
   padding: var(--card-padding);
   border: var(--card-border);
   border-top-width: var(--card-border-top);
   border-radius: var(--card-border-radius);
   transition-duration: var(--card-transition);
}
section.forum ul a:hover, section.forum ul a:focus {
   transform: var(--card-scale);
   background-color: var(--card-background-hover);
   box-shadow: var(--card-shadow);
}
section.forum ul:nth-of-type(1) a {
   border-top-color: rgba(95, 143, 0, 0.75);
}
section.forum ul:nth-of-type(1) a:hover {
   border-top-color: rgba(95, 143, 0, 1.0);
}
section.forum ul:nth-of-type(2) a {
   border-top-color: rgba(218, 93, 0, 0.75);
}
section.forum ul:nth-of-type(2) a:hover {
   border-top-color: rgba(218, 93, 0, 1.0);
}
section.forum ul li + li {
   margin-top: 1.0rem;
}
section.forum li h4 {
   color: var(--body-colour);
   font-family: 'Roboto', Arial, Helvetica, sans-serif;
   font-weight: 400;
}
section.forum > p {
   padding: 0 1.0rem;
}
section.forum ul p:nth-of-type(1) {
   font-size: 1.0rem;
   margin-top: 0.35rem;
   margin-bottom: 2.7rem;
}
section.forum ul p:nth-of-type(2),
section.forum ul p:nth-of-type(3) {
   color: var(--section-small-text-colour);
   font-size: 0.8rem;
}
section.forum ul p:nth-of-type(2) {
   position: absolute;
   bottom: 1.0rem;
   left: 1.2rem;
}
section.forum ul p:nth-of-type(3) {
   position: absolute;
   bottom: 1.0rem;
   right: 1.2rem;
}

@media (min-width: 780px) {
   section.forum > ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 1.5rem;
   }
   section.forum ul li + li {
      margin-top: 0;
   }
}

@media (min-width: 1280px) {
   section.forum > ul {
      grid-template-columns: 1fr 1fr 1fr;
   }
}


/* 12. Image of the Week
   ================================================== */
section.gallery {
   padding: 3.0rem 1.5rem 1.5rem;
}
section.gallery ul {
   margin-top: 2.0rem;
}
section.gallery > ul > li {
   background-color: var(--card-background);
   padding: var(--card-padding);
   border: var(--card-border);
   border-top: var(--card-border-top) solid rgba(104, 134, 177, 1.0);
   border-radius: var(--card-border-radius);
}
section.gallery ul li + li {
   margin-top: 1.5rem;
}
section.gallery h3 {
   padding-left: 0;
}
section.gallery figure h3 {
   color: var(--body-color);
   text-align: center;
   margin-top: 0.7rem;
}
section.gallery ul + h3 {
   margin-top: 2.0rem;
}
section.gallery figure {
   width: fit-content;
   margin: 0 auto;
}
section.gallery img {
   border-radius: 6px;
   display: block;
   margin: 1.0rem auto 0;
}
section.gallery figcaption p:nth-of-type(1) {
   margin-top: 1.0rem;
}
section.gallery figcaption p:nth-of-type(2) {
   color: var(--section-small-text-colour);
   font-size: 0.9rem;
   margin-top: 0.2rem;
}

@media (min-width: 920px) {
   section.gallery ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 1.5rem;
      margin-top: 1.5rem;
   }
   section.gallery ul li + li {
      margin-top: 0;
   }
}


/* 13. Tip of the Day
   ================================================== */
section.tip {
   padding: 3.0rem 1.5rem 1.5rem;
}
section.tip h3 {
   padding-left: 0;
}
section.tip p.tip_author {
   color: var(--section-small-text-colour);
   font-size: 80%;
   text-align: right;
   clear: both;
}
section.tip h3:last-of-type {
   clear: both;
}
section.tip h4 {
   margin-top: 1.2rem;
}
section.tip ol li {
   line-height: 2.0;
   margin-left: 2.5rem;
}
section.tip dl {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 1.0rem 2.0rem;
   margin: 1.5rem 0;
}
section.tip img.right {
   float: right;
   margin: 6px 0 1.5rem 2rem;
}
section.tip img.left {
   float: left;
   margin: 6px 2rem 1.5rem 0;
}
section.tip table.right {
   float: right;
   margin: 0 0 1.5rem 2rem;
}
section.tip table.left {
   float: left;
   margin: 0 2rem 1.5rem 0;
}
section.tip img.center {
   display: block;
   margin: 1.2rem auto 1.5rem;
}
section.tip th {
   font-weight: var(--text-bold-weight);
}
section.tip th + th, section.tip td + td {
   padding-left: 1.5rem;
}
section.tip kbd {
   display: inline-block;
   color: #333;
   font-family: var(--body-font);
   line-height: 1.2;
   white-space: nowrap;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
   background-color: rgba(255, 255, 255, 0.8);
   padding: 0.1rem 0.6rem;
   border: 1px solid rgba(0, 0, 0, 0.4);
   border-radius: 3px;
   margin: 0 0.1rem;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 0 2px var(--text-kbd-shadow) inset;
}
section.tip .code,
section.tip code {
   font-family: var(--text-mono-font);
   color: var(--text-code);
}
section.tip .prompt {
   font-family: var(--text-mono-font);
   color: var(--text-prompt);
}
section.tip .command {
   font-weight: var(--text-bold-weight);
   color: var(--text-command);
}
section.tip .menu {
   font-weight: var(--text-bold-weight);
   color: var(--text-menu);
}
section.tip .variable,
section.tip var {
   font-weight: var(--text-bold-weight);
   font-style: normal;
   text-transform: uppercase;
   color: var(--text-variable);
}
section.tip .absmiddle {
   vertical-align: text-top;
}


/* 14. Adsense
   ================================================== */
.ad-top, .ad-middle, .ad-bottom {
   background-color: var(--section-background);
   padding: 0.5rem 0;
   margin-top: var(--section-ad-spacing);
   text-align: center;
}
@media (min-width: 800px) {
   .ad-top, .ad-middle, .ad-bottom {
      border-radius: var(--section-border-radius);
   }
}