html, 
body{
   padding: 0;
   margin: 0;
   font-family: Serif;
   background-color: #0c0c0c;
   color: white;
}

h1, h2, h3, h4, p, ul {
	margin: 0;
}

h2 {
   font-size: 40px;
}

p {
   font-size: 18px;
}

section {
   margin-left: auto;
   margin-right: auto;
}

.section {
   max-width: 1080px;
   padding: 40px;
   justify-content: center;
  // border-top: 3px solid #1a1919;
  // border-top-left-radius: 25px;
  // border-top-right-radius: 25px;
   border-bottom: 3px solid #1a1919;
  // border-bottom-left-radius: 25px;
  // border-bottom-right-radius: 25px;
}

.home {
   display: flex;
   justify-content: space-between;
}

.home h1 {
   margin: 22px 0 0 15px;
}

.nav-elements {
   display: flex;
   justify-content: space-between;
}

.navbar {
   position: fixed;
   padding: 0;
   margin: 0;
   width: 100%;
   background-color: #1a1919;
   z-index: 1;
   opacity: 1;
}

/* used to target just .navbar a {} */
a {
   color: white;
   text-decoration: none;
}

a:hover {
   color: grey;
   transition: 0.3s;
}

.navbar ul {
   float: right;
   margin-right: 20px;
   margin-top: 22px;
}

.navbar li {
    display: inline-block;
    padding: 10px;
}

.nav-offset {
   height: 80px;
}

.giraffelitis-icon {
   height: 80px;
   width: 80px;
   background-image: url("../assets/Giraffe-184x184-Profile.png");
   background-size: 80px 80px;
}

.content-wrapper {
   max-width: 1040px;
   margin: auto;
   height: 100%;
}

.heading-wrapper {
   padding-bottom: 10px;
}

iframe {
   width: 1040px;
   height: 600px;
}

@media screen and (max-width: 1024px) {
   iframe {
      width: 580px;
   }
}

footer {
   margin: 40px auto 40px auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
}

.email {
   display: flex;
   padding: 24px;
}

.email-icon {
   padding-right: 10px;
}


/* Tabs */


.tabbed {
   overflow-x: hidden; /* so we could easily hide the radio inputs */
   margin: 10px 0;
   padding-bottom: 16px;
   /*border-bottom: 1px solid #ccc;*/
}

.tabbed [type="radio"] {
   /* hiding the inputs */
   display: none;
}

.tabs {
   margin-top: 10px;
   display: flex;
   align-items: stretch;
   list-style: none;
   padding: 0;
   border-bottom: 1px solid #ccc;
}

.tab {
}

.tab > label {
   display: block;
   margin-bottom: -1px;
   padding: 12px 15px;
   border: 1px solid #ccc;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   background: #1a1919;
   color: white;
   font-size: 12px; 
   font-weight: 600;
   letter-spacing: 1px;
   cursor: pointer;  
   transition: all 0.3s;
}
.tab:hover label {
   border-top-color: #333;
   color: #333;
}

.tab-content {
   margin-top: 10px;
   display: none;
   color: white;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label,
.tabbed [type="radio"]:nth-of-type(6):checked ~ .tabs .tab:nth-of-type(6) label,
.tabbed [type="radio"]:nth-of-type(7):checked ~ .tabs .tab:nth-of-type(7) label {
   border-bottom-color: #fff;
   /*border-top-color: #422bc9;*/
   background: grey;
   color: #222;
   transition: background 0.5s, border-bottom-color 0.5s, border-top-color 0.5s, color 0.5s;
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4),
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tab-content:nth-of-type(5),
.tabbed [type="radio"]:nth-of-type(6):checked ~ .tab-content:nth-of-type(6) {
   display: flex;
}

/*gist.github snippet formatting*/
.gist-data{
    max-height: 350px;
    overflow-y: visible;

}

.gist-meta{
	text-display: none;
}

body .gist .highlight {
    background: #323232;
}
body .gist .blob-num,
body .gist .blob-code-inner,
body .gist .pl-s2,
body .gist .pl-stj,
body .gist .pl-vo,
body .gist .pl-id,
body .gist .pl-ii {
     color: #fff;
}
body .gist .pl-enti,
body .gist .pl-mb,
body .gist .pl-pdb {
     font-weight: 700;
}
body .gist .pl-c,
body .gist .pl-c span,
body .gist .pl-pdc {
     color: #bc9458;
     font-style: italic;
}
body .gist .pl-c1,
body .gist .pl-pdc1,
body .gist .pl-scp {
     color: #6c99bb;
}
body .gist .pl-ent,
body .gist .pl-eoa,
body .gist .pl-eoai,
body .gist .pl-eoai .pl-pde,
body .gist .pl-ko,
body .gist .pl-kolp,
body .gist .pl-mc,
body .gist .pl-mr,
body .gist .pl-ms,
body .gist .pl-s3,
body .gist .pl-sok {
     color: #ffe5bb;
}
body .gist .pl-mdh,
body .gist .pl-mdi,
body .gist .pl-mdr {
     font-weight: 400;
}
body .gist .pl-mi,
body .gist .pl-pdi {
     color: #ffe5bb;
     font-style: italic;
}
body .gist .pl-sra,
body .gist .pl-src,
body .gist .pl-sre {
     color: #cc3;
}
body .gist .pl-mdht,
body .gist .pl-mi1 {
     color: #a5c261;
     background: rgba(0, 64, 0, .5);
}
body .gist .pl-md,
body .gist .pl-mdhf {
     color: #b83426;
     background: rgba(64, 0, 0, .5);
}
body .gist .pl-ib,
body .gist .pl-id,
body .gist .pl-ii,
body .gist .pl-iu {
     background: #b83426;
}
body .gist .pl-ms1 {
     background: #ffc66d;
}
body .gist .highlight-text-html-basic .pl-ent,
body .gist .pl-cce,
body .gist .pl-cn,
body .gist .pl-coc,
body .gist .pl-enc,
body .gist .pl-ens,
body .gist .pl-k,
body .gist .pl-kos,
body .gist .pl-kou,
body .gist .pl-mh .pl-pdh,
body .gist .pl-mp,
body .gist .pl-mp .pl-s3,
body .gist .pl-mp1 .pl-sf,
body .gist .pl-mq,
body .gist .pl-mri,
body .gist .pl-pde,
body .gist .pl-pse,
body .gist .pl-pse .pl-s2,
body .gist .pl-s,
body .gist .pl-st,
body .gist .pl-stp,
body .gist .pl-sv,
body .gist .pl-v,
body .gist .pl-va,
body .gist .pl-vi,
body .gist .pl-vpf,
body .gist .pl-vpu,
body .gist .pl-mdr {
     color: #cc7833;
}
body .gist .pl-cos,
body .gist .pl-ml,
body .gist .pl-pds,
body .gist .pl-s1,
body .gist .pl-sol,
body .gist .pl-mb,
body .gist .pl-pdb {
     color: #a5c261;
}
body .gist .pl-e,
body .gist .pl-en,
body .gist .pl-entl,
body .gist .pl-mo,
body .gist .pl-sc,
body .gist .pl-sf,
body .gist .pl-smi,
body .gist .pl-smp,
body .gist .pl-mdh,
body .gist .pl-mdi {
     color: #ffc66d;
}
body .gist .pl-ef,
body .gist .pl-enf,
body .gist .pl-enm,
body .gist .pl-entc,
body .gist .pl-entm,
body .gist .pl-eoac,
body .gist .pl-eoac .pl-pde,
body .gist .pl-eoi,
body .gist .pl-mai .pl-sf,
body .gist .pl-mm,
body .gist .pl-pdv,
body .gist .pl-smc,
body .gist .pl-som,
body .gist .pl-sr,
body .gist .pl-enti {
     color: #b83426;
}

/* Footer section formatting*/
body {
  font: 16px 'Open Sans', sans-serif;
}
body .gist .gist-file {
  border-color: #555 #555 #444
}
body .gist .gist-data {
  border-color: #555
}
body .gist .gist-meta {
  color: #ffffff;
  background: #373737; 
}
body .gist .gist-meta a {
  color: #ffffff
}
body .gist .gist-data .pl-s .pl-s1 {
  color: #a5c261
}