/* css variables*/

:root {
  --primary-color: #432E30;
  --primary-color-lightO: #8E7474;
  --primary-color-light: #606060;
  --accent-color: #FE6A6B;
  --accent-color-light: #FFE4E4;
  --accent-color-dark: #B94B4C;
  --white-color: #FAFBFC;
  --light-gray-color: #C6CBD1;
  --medium-gray-color: #959DA5;
  --dark-gray-color: #444D56; 
  --bg-color: #F8F8FA;
  --code-bg-color: #F0E8E8;
  --link-color: blue;
}

/* normalized */
html, body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
  background-color: white;
}

p {
  font-weight: 300;
  color: #4A4A4A;
}

h1 {
  font-family: 'Chivo', arial, sans-serif;
  font-size: 200%;
}

h2 {
  font-family: 'Chivo', arial, sans-serif;
  font-size: 160%;
}

h3 {
  font-family: 'Chivo', arial, sans-serif;
  font-size: 140%;
}

h4 {
  font-family: 'Chivo', arial, sans-serif;
  font-size: 120%;
}

a, a:hover, a:visited {
  text-decoration: none;
  color: var(--link-color); 
}

hr {
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--bg-color);
}

* {
  box-sizing: border-box;
}

/* global components */

/* typography */
.section__title {
  color: var(--primary-color);
}

/* tabs */
.tab__container {
  position: relative;
}

.tab__container > ul {
  position: absolute;
  list-style: none;
  margin: 0;
  right: 1rem;
  top: -2rem;
  padding-left: 0;
}

.tab__container code {
  white-space: normal;
  padding: 1rem 1.5rem;
}

.tab {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  font-weight: 200;
  cursor: pointer;
}

.tab.active {
  border-bottom: 1px solid var(--primary-color);
  font-weight: 700;
  display: inline-block;
}

.tab__pane {
  display: none;
}

.tab__pane.active {
  display: block;
}

/* code */
code {
  border-radius: 3px;
  font-family: Space Mono, SFMono-Regular, Menlo,Monaco, Consolas, Liberation Mono, Courier New, monospace;
  /* background: var(--bg-color);  */
  border: 1px solid var(--code-bg-color);
  /* color: var(--primary-color-light); */
}

pre code {
    border: 0px solid black;
    color: rgb(156, 220, 254);
    background-color: rgb(30, 30, 30); 
    overflow: scroll;
}

.code--block {
  white-space: pre-line;
  padding: 0 1.5rem;
}



.code--inline {
  padding: 3px 6px;
  font-size: 80%;
}



/* buttons */

.button--primary {

  padding: 10px 22px;

  background-color: var(--accent-color);

  color: white;

  position: relative;

  text-decoration: none;

  border: 0;

  transition: all .3s ease-out;

}



.button--primary:after {

  position: absolute;

  content: "";

  width: 1rem;

  height: 1rem;

  background-color: var(--accent-color-light);

  right: -0.4rem;

  top: -0.4rem;

  transition: all 0.3s ease-out;

}



.button--primary:hover {

  text-shadow: 0px 1px 1px var(--accent-color-dark);

  color: white;

  transform: translate3D(0, -3px, 0);

}



.button--primary:hover::after {

  transform: rotate(90deg);

}



.button--secondary {

  padding: 10px 22px;

  border: 2px solid var(--primary-color);

  transition: all 0.5s ease-out;

}



.button--secondary:hover {

  border-color: var(--accent-color);

  color: var(--accent-color);

}



/* links */

.link {

  text-decoration: none;

  transition: all 0.3s ease-out;

}



.link:hover {

  color: var(--accent-color);

}



.link--dark {

  color: var(--primary-color);

}



.link--light {

  color: var(--accent-color);

}



/* menu */

nav {

  display: grid;

  grid-template-columns: 70px auto;

}



.menu {

  margin: 0;

  text-align: right;

  overflow: hidden;

  list-style: none;

}



.toggle {

  display: none;

  position: relative;

}



.toggle span,

.toggle span:before,

.toggle span:after {

  content: '';

  position: absolute;

  height: 2px;

  width: 18px;

  border-radius: 2px;

  background: var(--primary-color);

  display: block;

  cursor: pointer;

  transition: all 0.3s ease-in-out;

  right: 0;

}



.toggle span:before {

  top: -6px;

}



.toggle span:after {

  bottom: -6px;

}



.toggle.open span{

  background-color: transparent;

}



.toggle.open span:before,

.toggle.open span:after {

  top: 0;

}



.toggle.open span:before {

  transform: rotate(45deg);

}



.toggle.open span:after {

  transform: rotate(-45deg);

}



.menu__item {

  padding: 1rem;

  display: inline-block;

}



.menu__item.toggle {

  display: none;

}



/* table */

table {

  border-collapse: collapse;

  width: 100%;

  transition: color .3s ease-out;

  margin-bottom: 2rem;

}



table td, table th {

  border: 1px solid var(--code-bg-color);

  padding: 0.8rem;

  font-weight: 300;

}



table th {

  text-align: left;

  background-color: white;

  border-color: white;

  border-bottom-color: var(--code-bg-color);

}



table td:first-child {

  background-color: var(--bg-color);

  font-weight: 600;

}



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

  nav {

    grid-template-columns: 70px auto;

  }



  .menu__item{

    display: none;

  }



  .menu__item.toggle {

    display: inline-block;

  }



  .menu {

    text-align: right;

    padding: 0.5rem 1rem;

  }



  .toggle {

    display: block;

  }



  .menu.responsive .menu__item:not(:first-child) {

    display: block;

    padding: 0 0 0.5rem 0;

  }

}



/* layout */

.wrapper {

  margin: 0 auto;

  width: 70%;

}



.footer {

  text-align: center;

  background-color: var(--primary-color);

  padding: 2rem;

  color: white;

}



@keyframes fadeUp {

  0% {

    opacity: 0;

    transform: translate3d(0,30px,0);

  }

  100% {

    transform: translate3d(0,0,0);

  }

}