/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  
        
      /* -------------------------------------------------------- */
      /* VARIABLES */
      /* -------------------------------------------------------- */
      
      /* Variables are used like this: var(--text-color) */
      :root {
        /* Background Colors: */
        --background-color: #fefafc;
        --content-background-color: transparent;
        --sidebar-background-color: transparent;
      
        /* Text Colors: */
        --text-color: #000000;
        --sidebar-text-color: #5e81ac;
        --link-color: #5e81ac;
        --link-color-hover: #e75094;
      
        /* Text: */
        --font: Monaco, monospace;
        --heading-font: monospace;
        --font-size: 16px;
      
        /* Other Settings: */
        --margin: 0px;
        --padding: 24px;
        --border: 30px black;
        --round-borders: 10px;
        --sidebar-width: 160px;
      }
      
      /* -------------------------------------------------------- */
      /* BASICS */
      /* -------------------------------------------------------- */
      
      * {
        box-sizing: border-box;
      }
      
      body {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 100vh;
        font-size: var(--font-size);
        margin: 0;
        padding: var(--margin);
        color: var(--text-color);
        font-family: var(--font);
        line-height: 1.2;
        background: var(--background-color);
        /*background-image: url("https://sadhost.neocities.org/images/tiles/rdbg.jpg");*/
        background-image: url("art/bicycle_tile.jpg");
        background-size:1000px;
        
      }
      
      ::selection {
        /* (Text highlighted by the user) */
        background: rgba(0, 0, 0, 0.2);
      }
      
      mark {
        /* Text highlighted by using the <mark> element */
        text-shadow: 1px 1px 4px var(--link-color);
        background-color: inherit;
        color: var(--text-color);
      }
      
      /* Links: */
      a {
        text-decoration: underline;
      }
      
      a,
      a:visited {
        color: var(--link-color);
      }
      
      a:hover,
      a:focus {
        color: var(--link-color-hover);
        text-decoration: none;
      }
      
      /* -------------------------------------------------------- */
      /* LAYOUT */
      /* -------------------------------------------------------- */
      
      .layout {
        width: 100%;
        display: grid;
        grid-gap: var(--margin);
        grid-template: "header" auto "main" auto "footer" auto / auto;
        /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
      }
      
      main {
        grid-area: main;
        overflow-y: auto;
        padding: var(--padding);
        background: var(--content-background-color);
        border: var(--border);
        border-radius: var(--round-borders);
      }
      
      /* -------------------------------------------------------- */
      /* HEADER */
      /* -------------------------------------------------------- */
      
      header {
        grid-area: header;
        font-size: 1.2em;
        /*border: var(--border);*/
        
        /*background: var(--content-background-color);*/
        background:white;
        margin: auto;
        margin-top:2vh;
        
        
        border: 3px solid black;
        border-radius: var(--round-borders);
        text-align:center;
        width: 50vw;
        height:auto;
        position:relative;
      }
      
      .header-content {
        padding: var(--padding);
        display: inline-block;
        font-size:x-large;
      }
      
      
      body header img {
        width:150px;
        height:auto;
        /*align-content:center;*/
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display:inline-block;
        margin-left:50;
      }

      
      
      /* -------------------------------------------------------- */
      /* NAVIGATION */
      /* -------------------------------------------------------- */
      
      nav {
        margin-bottom: 3em;
      }
      
      nav .sidebar-title {
        margin-bottom: 0.5em;
      }
      
      nav ul {
        margin: 0 -5px;
        padding: 0;
        list-style: none;
        user-select: none;
        text-align: center;
      }
      
      nav ul li {
        margin-bottom: 0;
      }
      
      nav > ul li > a,
      nav > ul li > strong {
        display: inline-block;
      }
      
      nav > ul li > a,
      nav > ul li > details summary,
      nav > ul li > strong {
        padding: 5px 10px;
      }
      
      nav > ul li > a.active,
      nav > ul li > details.active summary {
        font-weight: bold;
      }
      
      nav ul summary {
        cursor: pointer;
      }
      
      nav ul ul li > a {
        padding-left: 30px;
      }
      
      /* NAVIGATION IN HEADER */
      
      header nav {
        margin-bottom: 0;
      }
      
      header nav ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
      }
      
      header nav ul li {
        position: relative;
      }
      
      header nav ul li:first-child > a {
        padding-left: 0;
      }
      
      header nav ul li:last-child > a {
        padding-right: 0;
      }
      
      
      header nav ul li:hover ul,
      header nav ul li:focus-within ul {
        display: block;
      }
      
      header nav ul li strong {
        color: var(--link-color);
        text-decoration: underline;
        font-weight: normal;
      }
      
      header nav ul ul li a {
        display: block;
        padding-left: 0;
        padding-right: 0;
      }
      
      /* -------------------------------------------------------- */
      /* CONTENT */
      /* -------------------------------------------------------- */
      
      .about {
        background:white;
        border: 3px solid black;
        border-radius: var(--round-borders);
        margin-top: 20px;
        margin: 20px auto;
        padding:10px;
        display:block;
        width:50vw;
        height:auto;
      }

      
      main img {
        border: 3px solid black;
        border-radius: var(--round-borders);
        margin-top: 20px;
        margin: 20px auto;
        text-align: center;
        display:block;
        width:50vw;
        height:auto;
      }
      
      iframe {
        width:50vw;
        height:90vh;
        text-align:center;
        margin-left: auto;
        margin-right: auto;
        display:block;
      }
      
      main {
        line-height: 1.5;
      }
      
      main a,
      main a:visited {
        color: var(--link-color);
      }
      
      main a:hover,
      main a:focus {
        color: var(--link-color-hover);
        text-decoration-style: wavy;
      }
      
      main p,
      main .image,
      main .full-width-image,
      main .two-columns {
        margin: 0.75em 0;
      }
      
      main ol,
      main ul {
        margin: 0.5em 0;
        padding-left: 1.5em;
      }
      
      main ol li,
      main ul li {
        margin-bottom: 0.2em;
        line-height: 1.3;
      }
      
      main ol {
        padding-left: 2em;
      }
      
      main blockquote {
        background: rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin: 1em 0;
        border-radius: 10px;
      }
      
      main pre {
        margin: 1em 0 1.5em;
      }
      
      main code {
        text-transform: none;
      }
      
      main center {
        margin: 1em 0;
        padding: 0 1em;
      }
      
      main hr {
        border: 0;
        border-top: var(--border);
        margin: 1.5em 0;
      }
      
      /* HEADINGS: */
      
      main h1,
      main h2,
      main h3,
      main h4,
      main h5,
      main h6 {
        font-family: var(--heading-font);
        margin-bottom: 0;
        line-height: 1.5;
        background:white;
        margin:auto;
        margin-top:25px;
        border: 3px solid black;
        border-radius: var(--round-borders);
        text-align:center;
        width: 50vw;
        height:auto;
        position:relative;
        
      }
      
      main h1:first-child,
      main h2:first-child,
      main h3:first-child,
      main h4:first-child,
      main h5:first-child,
      main h6:first-child {
        margin-top: 0;
      }
      
      main h1 {
        font-size: 1.5em;
        background:white;
      }
      
      main h2 {
        font-size: 1.4em;
      }
      
      main h3 {
        font-size: 1.3em;
      }
      
      main h4 {
        font-size: 1.2em;
      }
      
      main h5 {
        font-size: 1.1em;
      }
      
      main h6 {
        font-size: 1em;
      }
      
      footer {
        background:white;
        margin:25px auto 20px auto;
        border: 3px solid black;
        border-radius: var(--round-borders);
        text-align:center;
        width: 50vw;
        height:auto;
        position:relative;
        
      }
      
      footer p {
        font-size:1.52rem;
      }
 
      /* COLUMNS: */
      .two-columns {
        display: flex;
      }
      
  
      
      .two-columns > *:first-child {
        padding-right: 0.75em;
      }
      
      .two-columns > *:last-child {
        padding-left: 0.75em;
      }
      
      /* -------------------------------------------------------- */
      /* CONTENT IMAGES */
      /* -------------------------------------------------------- */
      
      .image {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
      }
      
      .full-width-image {
        display: block;
        width: 100%;
        height: auto;
      }
      
      .images {
        display: flex;
        width: calc(100% + 5px + 5px);
        margin-left: -5px;
        margin-right: -5px;
      }
      
      .images img {
        width: 100px;
        height: auto;
        padding: 5px;
        margin: 0;
        overflow: hidden;
        
      }
      
      /* -------------------------------------------------------- */
      /* ACCESSIBILITY */
      /* -------------------------------------------------------- */
      
      /* please do not remove this. */
      
      #skip-to-content-link {
        position: fixed;
        top: 0;
        left: 0;
        display: inline-block;
        padding: 0.375rem 0.75rem;
        line-height: 1;
        font-size: 1.25rem;
        background-color: var(--content-background-color);
        color: var(--text-color);
        transform: translateY(-3rem);
        transition: transform 0.1s ease-in;
        z-index: 99999999999;
      }
      
      #skip-to-content-link:focus,
      #skip-to-content-link:focus-within {
        transform: translateY(0);
      }
      
      /* -------------------------------------------------------- */
      /* MOBILE RESPONSIVE */
      /* -------------------------------------------------------- */
      
      /* CSS Code for devices < 800px */
      @media (max-width: 800px) {
        body {
          font-size: 16px;
        }
      
        .layout {
          width: 100%;
          grid-template: "header" auto  "main" auto "footer" auto / 1fr;
          /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
        }
      
        .left-sidebar { 
          display: none;
        }
        .right-sidebar { 
          display: none;
        }
      
        aside {
          border-bottom: 1px solid;
          padding: 9px;
          font-size: 0.9em;
        }
      
        
        nav {
          padding: 0;
        }
      
        nav > ul {
          padding-top: 0.5em;
        }
      
        nav > ul li > a,
        nav > ul li > details summary,
        nav > ul li > strong {
          padding: 0.5em;
        }
      
        main {
          max-height: none;
          /*padding: 15px;*/
        }
      
        .images {
          flex-wrap: wrap;
        }
      
        .images img {
          width: 100%;
        }
      
        #skip-to-content-link {
          font-size: 1rem;
        }
        
        main h1 {
          width: 90vw;
        }
        
        main img {
          width: 100%;
          height:auto;
        }
        
        header {
          width: 90vw;
          font-size: 16px;
        }
        
        footer {
          width: 90vw;
        }
        
        footer p {
          font-size:1.2rem;
        }
        
        iframe {
          /*margin:1% 1% 1% 1%;*/
          width:90%
        }
        
        .about {
          width:90vw;
          
        }

        #register {
          width:90vw;
          margin:auto;
        }
        
      }