/** Version 2.2 ***************************************************************/

/*******************************************************************************

  LICENSE:

  Licensed under the Creative Commons Attribution-NonCommercial 4.0
  International license.

  You can copy this CSS code and layout in its entirety and modify it as you
  wish as long as you respect its noncommercial license. For attribution,
  simply keep in your CSS comments one of the following text:

    CSS from: The Author of the Control Alt Delete Blog (https://
    controlaltdelete.technology) Licensed under CC BY-NC 4.0 (https://
    creativecommons.org/licenses/by-nc/4.0)

  Or if you modified it:

    CSS modified from: The Author of the Control Alt Delete Blog (https://
    controlaltdelete.technology) Licensed under CC BY-NC 4.0 (https://
    creativecommons.org/licenses/by-nc/4.0)

  Enjoy!

*******************************************************************************/

/*******************************************************************************

  MAIN COLORS:
  Bright-Green: #B3FF2F + Dark-Grey:      #4B4B4B = Contrast: AAA 7.17
  Dark-Grey:    #4B4B4B + White:          #FFFFFF = Contrast: AAA 8.72
  Light-Grey:   #EFEFEF + Very-Dark-Grey: #30302B = Contrast: AAA 11.53
  Mid-Grey:     #D1D1D1 + Black:          #000000 = Contrast: AAA 13.75
  Light-Green:  #EAFFC5 + Black:          #000000 = Contrast: AAA 19.61
  Light-Orange: #F6D294 + Black:          #000000 = Contrast: AAA 14.56
  Dark-Blue:    #0D346C + Light-Grey:     #EFEFEF = Contrast: AAA 10.59

*******************************************************************************/


body {
  max-width: 1100px;
  margin: auto;
  align: center;
  font-family: "Lucida Sans", sans-serif;
  font-size: 100%;
  color: #FFFFFF;
  background-color: #4B4B4B;
  overflow-x: clip; /* NOTE:To keep sticky navbar but hide horizontal overflow*/
}


/** ||| HEADER ****************************************************************/

.header {
  padding: 25px 25px 5px 25px;
  font-family: monospace, monospace;
  color: #B3FF2F;
}

.header-title {
  font-size: 1.4em;
  font-weight: 700;
  text-decoration: none;
  color: #B3FF2F;
}

.header-subtitle {
  margin-top: 17px;
  margin-bottom: 17px;
}

.header-description {
  color: #FFFFFF;
}


/** ||| NAVIGATION BAR ********************************************************/

.navbar {
  z-index: 1;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  max-width: 100%;
  margin-left: 25px;
  margin-right: 25px;
  font-family: monospace, monospace;
  text-decoration: none;
}

.navbar ul li a {
  color: #FFFFFF;
}

.navbar ul li a:hover {
  color: #30302B;
}

.navbar label, #hamburger { /** <- Hides hamburger icon on horizontal navbar **/
  display: none;
}

/** || Navbar Elements ************************/
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: -2px;
  padding-left: 0;
  list-style: none;
  background-color: #4B4B4B;
}

.nav-link {
  display: block;
  padding: .5rem 0.8rem;
  text-align: right;
  text-decoration: none;
}

.nav-tabs .nav-link {
  font-size: 0.9em;
  border: 3px solid transparent;
}

/** || Hovering Navbar Tab ********************/
.nav-tabs .nav-link:hover {
  border: 3px solid;
  border-color: #B3FF2F;
  background-color: #FFFFFF;
  border-radius: .45rem;
}

/** || Active Navbar Tab **********************/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #30302B;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  border-radius: 0rem;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

/** || Switch to Vertical Hamburger Menu **************************************/
@media screen and (max-width: 700px) {

  /** || Hamburger Icon Button ****************/
  .navbar label {
    display: inline-block;
    width: 100%;
    margin-top: -1px;
    padding-bottom: 3px;
    padding-right: 7px;
    font-size: 2.4em;
    text-align: right;
    color: #B3FF2F;
    background-color: #4B4B4B;
  }

  /** || Menu Horizontal to Vertical **********/
  .navbar input:checked ~ ul {
    display: block;
  }

  .navbar ul {
    display: none;
  }

  .navbar ul { /** <- Adds shadow effect and line under vertical menu block **/
    border-bottom: 8px solid #B3FF2F;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .nav-tabs .nav-link:hover {
    border-radius: 0;
  }

  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-radius: 0;
  }

  .nav-tabs .nav-link {
    border: 3px solid #FFFFFF;
    border-radius: 0;
  }
}


/** ||| CONTENT ***************************************************************/

h1, h2, h3 {
  font-weight: 600;
  color: #4B4B4B;
}

h1 a, h2 a, h3 a {
  text-decoration: none;
}

h1 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1.8em;
  line-height: 1.1em;
}

h2 {
  margin-top: 30px;
  font-size: 1.3em;
}

h3 {
  margin-top: 4px;
  margin-bottom: 0px;
  font-size: 1.1em;
}

h4 {
  font-size: 0.88em;
  font-weight: 400;
}

code {
  display: block;
  padding-top: 10px;
  line-height: 0.8em;
  color: #B3FF2F;
  background-color: #2a2a2a;
  overflow: scroll;
  counter-reset: line; /*** <- Increments line numbers ***/
}

code pre::before { /*** <- Adds numbers to lines of code ***/
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  margin-left: 20px;
  margin-right: 1em;
  color: #656565
}

.content-frame {
  min-height: 900px;
  margin-left: 25px;
  margin-right: 25px;
  padding: 25px;
  text-align: left;
  word-wrap: break-word;
  color: #000000;
  background-color: #FFF;
}

.content-frame p, .content-frame ul, .content-frame ol {
  margin-bottom: 25px;
}

.content-frame ul {
  margin-left: -15px;
  line-height: 1.4em;
  text-decoration: none;
  list-style: none;
}

.content-frame ul li {
  margin-bottom: 20px;
}

.content-frame ul li::before {
  content: "■";
  display: inline-block;
  width: 1.5em;
  margin-left: -25px;
  text-decoration: none;
  color: #B3FF2F;
}

.content-frame ol li {
  margin-bottom: 25px;
  counter-increment: ordered;
}

.content-frame ol li::before {
  content: counter(ordered) ".";
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
  text-decoration: none;
}

.arrow {
  position: relative;
  top: 2px;
  left: -40px;
  margin-right: -12px;
  font-size: 1.1em;
  color: #B3FF2F;
}

.content-frame  ol {
  list-style: none;
  counter-reset: (ordered);
  margin-left: -20px;
}

.content-frame a, .content-frame a:visited {
  color: inherit;
}

.update-notice {
  font-size: 0.8em;
  color: #BFBFBF;
}

/** || List of Links **************************/
.list-of-links {
  padding: 10px 0px 0px 0px;
}

.list-of-links a {
  display: block;
  margin-bottom: 20px;
  padding: 15px;
  font-size: 1.3em;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.25em;
  color: #30302B;
  background-color: #EFEFEF;
  border-left: 10px solid #4B4B4B; /** <- Default Grey **/
}

.list-of-links .link-article {
  border-left: 10px solid #B3FF2F; /** <- Green **/
}

.list-of-links .link-resource {
  font-size: 1.2em;
  color: #000000;
  border-left: 10px solid #ffb22e; /** <- Orange **/
}

.list-of-links .link-article:hover {
  border-left: 35px solid #B3FF2F;
}

.list-of-links .link-resource:hover {
  font-weight: 700;
}

.list-of-links .link-secondary {
  margin-left: 2px;
  font-size: 0.55em;
  font-weight: 400;
  text-decoration: none;
  color: #30302B;
}

.list-of-links .link-resource .link-secondary {
  font-size: 0.8em;
  font-weight: 300;
  line-height: 1em;
}

/** || Article Header Elements ****************/

.outdated-warning {
  margin: 15px -25px 40px -25px;
  padding: 15px;
  line-height: 1.5em;
  font-size: 0.8em;
  font-family: monospace, monospace;
  background-color: #F6D294; /** <- Light-Orange **/
  border: 5px solid #E6950B; /** <- Bright-Orange **/
}

.article-title {
  margin-top: 25px;
  margin-bottom: 25px;
  font-size: 2.3em;
  color: #000000;
  scroll-margin-top: 63px;
}

.article-subtitle {
  margin-top: -20px;
  margin-bottom: 30px;
  font-size: 1.2em;
  font-weight: 400;
  color: #767676;
  word-wrap: break-word;
}

.article-pub-date {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: monospace, monospace;
  font-size: 0.8em;
  font-weight: 500;
  color: #767676;
}

.mod-date {
  margin-left: 1px;
}

.article-category a, .article-subcategory a,
.article-category a:link, .article-subcategory a:link, .section-link a:link {
  text-decoration: none;
}

.article-category {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 20px;
  padding-bottom: 15px;
  font-size: 2em;
  color: #4B4B4B;
}

.article-category:target, .article-subcategory:target, .section-link:target {
  scroll-margin-top: 60px;
}

/** || Article Buttons Elements ***************/
.button-top, .button-top a, .button-top a:visited {
  margin-top: 35px;
  margin-bottom: 25px;
  font-size: 0.95em;
  font-weight: 500;
  text-align: right;
  text-decoration: none;
  color: #535353;
}

/** || Article Content Elements ***************/
.block-article {
  font-size: 1em;
  line-height: 1.35em;
  color: #000000;
  word-wrap: break-word;
}

.block-article a , .block-article a:visited{
  text-decoration: underline;
}

.block-article ul a , .block-article ul a:visited{
  text-decoration: none;
}

.mobile-break { /** <- Break class for especially long words **/
  word-wrap: break-word;
}

/** || Article Text Elements ******************/
.ui-word {
  padding: 1px 10px 1px 10px;
  font-family: monospace, monospace;
  color: #0D346C;
  background-color: #EFEFEF;
  border: solid 1px #FFFFFF;
}

.mastodon-button {
  display: inline-block;
  padding: 2px 10px 2px 10px;
  font-size: 0.9em;
  line-height: 1.6em;
  color: #FFFFFF;
  background-color: #6364FF; /** <- Mastodon button color **/
  border-radius: .40rem;
}

.green-underline {
  border-bottom: solid 10px #B3FF2F;
}

.green-underline a {
  text-decoration: none;
}

.green-underline a:hover {
  border-bottom: solid 10px #000000;
}

/** || Article Text Blocks ********************/
.block-grey { /** <- For general notes and resources **/
  margin-top: 30px;
  margin-left: -30px;
  margin-right: -30px;
  padding: 25px;
  font-family: monospace, monospace;
  background-color: #D1D1D1; /** <- Mid-Grey **/
  border: 5px solid #4B4B4B; /** <- Background Dark-Grey **/
}

.block-green { /** <- For brighter notes **/
  margin-left: -5px;
  margin-right: -5px;
  padding: 25px;
  font-family: monospace, monospace;
  font-size: 0.9em;
  line-height: 1.5em;
  background-color: #EAFFC5; /** <- Light-Green **/
  border: 5px solid #93E10C; /** <- Bright-Green **/
}

.block-orange { /** <- For warnings or more important notes **/
  margin-left: -5px;
  margin-right: -5px;
  padding: 25px;
  font-family: monospace, monospace;
  font-size: 0.9em;
  line-height: 1.5em;
  background-color: #F6D294; /** <- Light-Orange **/
  border: 5px solid #E6950B; /** <- Bright-Orange **/
}


/** ||| SMALLEST SCREENS LAYOUT ***********************************************/

@media screen and (max-width: 600px) {

  .header {
    padding: 20px 15px 0px 15px;
  }

  .navbar {
    position: top;
    margin: 15px;
  }

  .content-frame {
    margin: -15px 15px 15px 15px;
    padding: 20px 15px 15px 15px;
  }

  .article-category {
    font-size: 1.7em;
  }

  .list-of-links .link-article:hover {
    border-left: 20px solid #B3FF2F;
  }

  .block-grey {
    margin-left: -20px;
    margin-right: -20px;
  }
}


/** ||| FOOTER ****************************************************************/

.footer {
  padding: 25px 25px 35px 25px;
  font-family: monospace, monospace;
  font-size: 0.75em;
  text-align: center;
}

.footer a, .footer a:visited {
  text-decoration: none;
  color: #FFFFFF;
}