* {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: yellowtail;
  src: url(../assets/fonts/Yellowtail-Regular.ttf);
}
.lightShadow {
  text-shadow: 1px 1px 1px white;
}

.darkShadow {
  text-shadow: 1px 1px 1px black;
}

section,
header {
  padding: 50px 0px;
}

h1,
h2,
.code,
p {
  padding: 0px 70px;
}
@media screen and (max-width: 500px) {
  h1,
h2,
.code,
p {
    padding: 20px;
  }
}

#viewOnGithub {
  display: inline-block;
  cursor: pointer;
  z-index: 1;
  text-align: center;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20438.549%20438.549%22%3E%3Cpath%20d%3D%22M409%20114.6c-19.5-33.6-46-60.2-79.7-79.8-33.6-19.6-70.2-29.4-110-29.4s-76.5%209.8-110%2029.4C75.5%2054.4%2049%2081%2029.2%20114.6%2010%20148.2%200%20185%200%20224.6c0%2047.8%2014%2090.8%2041.8%20129%2028%2038%2064%2064.5%20108%2079.2%205.2%201%209%20.2%2011.5-2%202.5-2.3%203.7-5.2%203.7-8.6v-15.4l-.3-25.4-6.5%201c-4.2%201-9.5%201.2-16%201-6.3%200-13-.6-19.7-2-7-1-13.3-4-19.2-8.4-6-4.5-10-10.4-12.5-17.6l-3-6.6c-1.8-4.3-4.8-9.2-9-14.5-4-5.4-8-9-12.3-11l-2-1.3c-1.3-1-2.5-2-3.7-3.4-1-1.4-2-2.7-2.6-4-.5-1.4%200-2.5%201.5-3.3%201.5-1%204.3-1.3%208.2-1.3l5.7%201c3.8.6%208.5%203%2014%206.7%205.7%203.8%2010.3%208.8%2014%2015%204.3%207.7%209.6%2013.6%2015.8%2017.7%206.2%204%2012.4%206%2018.7%206%206.3%200%2011.7-.3%2016.3-1.3%204.5-.8%208.8-2.3%2012.8-4.2%201.7-12.7%206.4-22.5%2014-29.4-11-1-20.6-2.8-29.3-5-8.6-2.4-17.6-6-26.8-11.3-9.2-5-17-11.4-23-19s-11-17.6-15-30c-4-12.3-5.8-26.6-5.8-42.8%200-23%207.5-42.6%2022.5-58.8-7-17.3-6.5-36.7%202-58.3%205.4-1.6%2013.6-.3%2024.5%204%2010.8%204.3%2018.8%208%2023.8%2011s9%205.6%2012.2%207.7c17.7-5%2036-7.4%2054.8-7.4s37%202.5%2054.8%207.4l11-6.8c7.4-4.7%2016-9%2026.2-12.7%2010-3.8%2017.8-5%2023-3%208.7%2021.4%209.5%2040.8%202.4%2058%2015%2016.3%2022.6%2036%2022.6%2059%200%2016-2%2030.4-6%2043-3.8%2012.3-8.8%2022.3-15%2030-6.2%207.4-14%2013.7-23%2018.8-9.4%205.3-18.3%209-27%2011.3-8.6%202.3-18.4%204-29.2%205%2010%208.7%2014.8%2022.2%2014.8%2040.7v60.2c0%203.4%201.2%206.3%203.6%208.6%202.4%202.2%206%203%2011.3%202%2044-14.7%2080-41%20108-79.3%2028-38%2041.8-81%2041.8-129%200-39.6-9.8-76.3-29.4-110z%22%20fill%3D%22%233E4142%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  margin-top: 100px;
  padding: 20px;
  padding-left: 80px;
  border: 1px solid #3c3744;
  background-size: 50px;
  background-position-y: center;
  background-position-x: 10px;
  text-decoration: none;
  color: #3c3744;
  font-size: 20px;
}
#viewOnGithub::before {
  content: "View On GitHub";
}

#beta {
  position: fixed;
  right: 0;
  top: 0;
  width: 159px;
  height: 200px;
  background-repeat: no-repeat;
  background-image: url(../assets/img/version.png);
}

.code {
  text-shadow: none;
  margin: 10px 100px;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 500px) {
  .code {
    margin: 0px !important;
  }
}

.section-subtitle {
  padding-top: 50px;
  padding-bottom: 10px;
}
@media screen and (max-width: 500px) {
  .section-subtitle {
    margin-left: 0px;
    text-align: center;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#header {
  display: flex;
  padding: 80px;
  align-items: center;
  background-color: #ff3e41;
  color: white;
  text-align: center;
}
@media screen and (max-width: 900px) {
  #header img {
    width: 300px;
  }
  #header {
    flex-flow: column;
  }
}
@media screen and (max-width: 500px) {
  #header img {
    width: 200px;
  }
  #header {
    padding: 20px;
  }
}
#header p {
  font-size: 30px;
  text-align: center;
}

.section-title {
  text-align: center;
  font-size: 40px;
}

#example {
  background-color: #3c3744;
  color: white;
}

.imagesContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.imagesContainer a {
  margin: 20px 20px 0 20px;
}
.imagesContainer img {
  width: 250px;
  height: 250px;
  border: 5px solid white;
  transition: all 0.4s;
}
@media screen and (max-width: 500px) {
  .imagesContainer img {
    width: 100%;
    height: 100%;
  }
}
.imagesContainer img:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 15px black;
}

.ex2 {
  background-color: #848fa5 !important;
}

#doc {
  background-color: #e0e0e0;
}

/*# sourceMappingURL=style.css.map */