/* 
Theme colors
  $flamapink: #e80058;
  $flamayellow: #e8bd00;
*/

/* GOOGLE FONT */
@import url(https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap);

:root {
  --flama-pink: #e80058;
  --flama-yellow: #e8bd00;
}

/* reset */
*,
:after,
:before {
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* base classes */
.font-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.underline {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.justify-between {
  justify-content: space-between;
}
.items-center {
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.w-full {
  width: 100%;
}
.flex {
  display: flex;
}
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.items-start {
  align-items: flex-start;
}
.flex-col {
  flex-direction: column;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.overflow-hidden {
  overflow: hidden;
}
.flex-1 {
  flex: 1 1;
}
.text-center {
  text-align: center;
}
#main-menu #btn-close,
#main-menu input[type="checkbox"] {
  display: none;
}
[role="button"],
button {
  cursor: pointer;
}
svg:not(:root).svg-inline--fa,
svg:not(:host).svg-inline--fa {
  overflow: visible;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px); /* For Safari compatibility */
  backdrop-filter: blur(4px);
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:text-left {
    text-align: left;
  }
  .md\:w-3\/5 {
    width: 60%;
  }
  .md\:w-2\/5 {
    width: 40%;
  }
  .md\:w-4\/5 {
    width: 80%;
  }
  .md\:w-1\/3 {
    width: 33.333333%;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
  .xl\:w-1\/6 {
    width: 16.666667%;
  }
  .xl\:pt-32 {
    padding-top: 8rem;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* custom */
.flama-pink {
  color: var(--flama-pink);
}
.flama-yellow {
  color: var(--flama-yellow);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "PT Sans", sans-serif;
  line-height: inherit;
  margin: 0;
}

.favicon {
  max-height: 35px;
}

#header {
  width: 100%;
  z-index: 30;
  top: 0;
  position: fixed;
  /* border: 1px rgb(209 213 219 / 1) solid; */
  border-bottom: 1px rgb(209 213 219 / 1) solid;
  background-color: hsla(0, 0%, 100%, 0.8);

  .container {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

.logo {
  padding-left: 1rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

#main-menu {
  padding-right: 1rem;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
  }
  /*Create a horizontal list with spacing*/
  li {
    display: inline-block;
    margin-left: 1em;
    text-transform: uppercase;
    font-size: 0.9rem;
    z-index: 1000;

    a {
      color: #000;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  }

  /*Style 'show menu' label button and hide it by default*/
  .show-menu {
    text-decoration: none;
    display: none;
  }
  #show-menu-label {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23000' d='M1,4 H18 V6 H1 V4 M1,9 H18 V11 H1 V7 M3,14 H18 V16 H1 V14' /%3E%3C/svg%3E");
  }

  /*Hide checkbox*/
  #btn-close,
  input[type="checkbox"] {
    display: none;
  }
  /*Show menu when invisible checkbox is checked*/
  input[type="checkbox"]:checked ~ #menu {
    display: block;
  }
  input[type="checkbox"]:checked ~ #show-menu-label {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20d%3D%22M3%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M9%209L15%2015M15%209L9%2015%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  }
}

#about {
  padding-top: 6rem;

  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  h1 {
    font-size: 3.75rem;
    line-height: 1;
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-weight: 700;
  }

  .caption {
    line-height: 1.5;
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}

.text-gradient {
  background: linear-gradient(
    90deg,
    var(--flama-pink) 0%,
    var(--flama-yellow) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient {
  background: linear-gradient(
    90deg,
    var(--flama-pink) 0%,
    var(--flama-yellow) 100%
  );
}
.gradient-bar {
  height: 0.25rem;
  width: 16rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  padding-bottom: 0;
  padding-top: 0;
  opacity: 0.25;
}

.gradient-bar-white {
  background-color: #fff;
}

#moreAbout {
  position: relative;
  padding-bottom: 1.5rem;
  padding-top: 1rem;
  color: #fff;

  .container {
    z-index: 10;
    position: relative;
  }

  h2 {
    line-height: 1.25;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    font-weight: 700;
    width: 100%;
  }

  .divider {
    margin-bottom: 2rem;
  }

  .shape {
    background: url("../img/gplay.png") repeat 0 0;
    background-color: rgb(31 41 55);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    transform-origin: 100% 0;
    transform: skewY(5deg);
    overflow: hidden;
  }

  .col {
    padding-top: 0;
    padding: 0.5rem;

    .flex-1 {
      padding: 0.5rem;
    }
    .text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
    .text-base {
      font-size: 1rem;
      line-height: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .svg-inline--fa {
      font-size: 1.875rem;
      line-height: 2.25rem;
      margin-bottom: 0.75rem;
    }
  }
}

.btn-all,
.web .btn-web,
.design .btn-design,
.mix .btn-mix {
  background-color: rgb(31 41 55);
}

.web .btn-all,
.design .btn-all,
.mix .btn-all {
  background-color: var(--flama-pink) !important;
}

.web .design,
.web .mix,
.design .web,
.design .mix,
.mix .web,
.mix .design {
  display: none;
}

#portfolio {
  min-height: 2030px;
  padding-bottom: 2rem;
  background-color: rgb(243 244 246 / 1);

  .h2-container {
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;

    h2 {
      color: rgb(31 41 55 / 1);
      line-height: 1.25;
      font-size: 3rem;
      margin-bottom: 0.5rem;
      margin-top: 0.5rem;
    }
  }

  .divider {
    margin-bottom: 1.5rem;
  }
}

.portfolio-box {
  position: relative;
  overflow: hidden;

  .hover-text {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    color: #ffffff;
    background: linear-gradient(
      180deg,
      var(--flama-pink) 0%,
      var(--flama-yellow) 0 100%
    );
    padding: 25% 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: all 0.5s;

    h4 {
      transform: translateY(0);
      transition: all 0.3s;
    }
  }
}

.embedsocial-hashtag {
  padding-top: 15px;
}

.appendix {
  line-height: 2.5rem;
  padding-bottom: 3rem;

  a {
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: #fff;
    background-color: var(--flama-pink);
    border-radius: 0.375rem;
  }
  a:hover {
    background-color: #000;
  }
}

#contact-wrapper {
  letter-spacing: 0;
  line-height: 1.5;
  padding-bottom: 3rem;
  color: #fff;

  .container {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

  h1 {
    font-size: 3rem;
    line-height: 1.25;
  }

  .w-full {
    margin-bottom: 1rem;
  }

  .svg-inline--fa {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  a {
    margin-left: 1rem;
  }

  #contact {
    margin-bottom: 1rem;
  }
}

/*Responsive Styles*/
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Mobile */
@media screen and (max-width: 760px) {
  #moreAbout .shape {
    height: 106%;
  }

  #main-menu {
    /*Make dropdown links appear inline*/
    ul {
      display: none;
      position: absolute;
      top: 52px;
      left: 0;
      margin-top: 1px;
      border-bottom: solid 1px rgb(209, 213, 219);
      background-color: hsla(0, 0%, 100%, 0.8);
    }
    /*Create vertical spacing*/
    li {
      font-size: 1rem;
    }
    /*Make all menu links full width*/
    ul li,
    li a {
      margin: 0;
      width: 100%;
    }
    li a {
      display: inline-block;
      padding: 1em 1em 0.5em;
      font-weight: bold;
    }
    li:last-child a {
      padding-bottom: 1em;
    }
    /*Display 'show menu' link*/
    .show-menu {
      display: block;
    }
  }
}

@media (max-width: 1023px) {
  .logo {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

/* Desktop */
@media screen and (min-width: 1025px) {
  .portfolio-box:hover .hover-text {
    opacity: 1;
    transition: all 0.5s;

    h4 {
      transform: translateY(10%);
      transition: all 0.3s;
      font-size: 35px;
    }
  }
}
@media screen and (min-width: 1280px) {
  #moreAbout .shape {
    height: 140%;
  }
}
@media screen and (min-width: 1440px) {
  #moreAbout .shape {
    height: 158%;
  }
}