/*MARK:_______________ GENERAL
*/

* {box-sizing: border-box;}

body {
  color: #ffffffb2;
  background: #0F0729;
  font-size: 1.2rem;
  font-family: regular;
  height: 100%;
  margin: 0px;
  background-image: url(../graphics/background_noise.png);
}

/*MARK:________________ FONTS
*/

@font-face {
  font-family: title;
  src: url(../fonts/JosefinSans-Bold.ttf);
}

@font-face {
  font-family: subtitle;
  src: url(../fonts/JosefinSans-Regular.ttf);
}

@font-face {
  font-family: regular;
  src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
  font-family: bold;
  src: url(../fonts/Poppins-Medium.ttf);
}

a {color: #FF9B8D;}
a:hover {color: #ffffff;}

#orange {color:#FF9B8D;}
#blue {color: #ac92ff;}
#pink {color: #ff80c3;}
#white {color: #ffffff;}


h1 {
  font-family: title;
  font-size: 2.8rem;
  margin:0;
  padding:0;
}

h2 {
  font-size:2rem;
  font-family: subtitle;
  color:#ffffff;
  margin:0;
  padding:0;
  font-weight: bold;
}

h3 {
  font-size:1.4rem;
  margin:0;
  padding:0;
}

.hero h1 {
  background: linear-gradient(90deg,#ac92ff 0%,#ff80c3 50%);
  background-clip: text;
  color: transparent;
}

.hero h3 {color:white;}


b {
  color:#ac92ff;
  opacity:1;
}

ul, li {margin:0;}

p {margin-top:12px;}



/*MARK:________________ MENU 
*/

.logo h2 {
  color: #FF9B8D;
  font-family: title;
  width:170px;
  align-self:last baseline;
  font-size:1.4rem;
}

.logo IMG {width:32px; margin-right:8px;}

.logo {
  display: flex !important;  
  flex-wrap: nowrap;  
  margin-top:8px;
}

.topnav-left a {text-decoration: none;}

.topnav {display: flex; padding-top:8px;}

.topnav-right  a:after {
  display: block;
  content: "";
  border-bottom: solid 3px #ffffff;
  transform: scaleX(0);
  transition: transform 150ms ease-in-out;
  padding: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

.topnav-right  .active:after {
  border-bottom: solid 3px #ffffff;
  transform: none;
}

.topnav-right .active {color: #ffffff;}

.topnav-right  a:hover:after {transform: scaleX(1);}

.topnav-right {
  overflow: hidden;  
  display:flex;
  width:100%;
  justify-content: right;
}

.topnav-right a {
  padding: 14px 16px;
  text-decoration: none;
}

.topnav-right .icon {
  display: none; 
  font-size:32px;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 1.2rem;   
  border: none;
  outline: none;
  color: #FF9B8D;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor:pointer;
}

.dropdown:hover .dropbtn {color:#ffffff;}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000;
  max-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {display: block;}



/*MARK:______________ CONTENT
*/

.space {height: 32px;}

.content {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hero {
  margin-top:120px;
  margin-bottom:120px;
}


.product-page-header {
  display:flex;
  justify-content: space-between;
}

.topic {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  text-align: center;
  padding: 0;
}

.topic li {
  background: #ac92ff78;
  width: 100%;
  height: 1px;
  margin-bottom: 16px;
}

.topic h3 {
  width: 240px;
  background-image: url(../graphics/background_noise.png);
  margin: 0 auto;
  margin-top: 0px;
  margin-top: -16px;
  color: #fff;
}

/*MARK:______________ PACKS
*/

.price {
  position: absolute;
  background:#ff80c3;
  color: #0F0729 !important;
  border-radius:4px;
  padding-top:16px;
  padding-bottom:16px;
  padding-left:8px;
  padding-right:8px;
  bottom:4px;
  right:4px;
}


.pack {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  padding:0;
  margin:0;
  background-image: url(../graphics/background_noise2.png);
}

.pack:hover {
  filter:brightness(110%); 
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}

.pack a {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  line-height:0;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}

.pack:hover h3 {text-decoration: underline;}

.pack p {
  margin:0;
  color:rgba(255, 255, 255, 0.826);
}

.pack-image {width:100%;   position: relative;}

.pack-image IMG {width:100%;}

.pack-text {
  text-align: center;
  line-height: initial;
  width:100%;
  margin-left: 8px;
  margin-right:8px;
  margin-top:16px;
  margin-bottom:24px;
  position: relative;
}

.mobile {display:none;}


/*MARK:__________________ GRID
*/

.grid-container#packs {  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.grid-container#user {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top:20px;
  grid-gap: 48px;
}

.grid-container#user p {margin-bottom:-8px;}

.grid-container#quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 96px;
}

#user IMG {margin-bottom:-16px; opacity:0.8;}

/*MARK:____________ ACCORDION
*/

.accordion {
  display:flex;
  background-color: #eeeeee00;
  cursor: pointer; 
  width: 100%;
  border: none;
  transition: 0.4s;
  font-size:24px;
  color:#FF9B8D;
  justify-content: space-between;
  border-bottom: 1px solid #ac92ff78;
  text-align: left;
  line-height:20px;
  margin:0;
}

button.accordion p {
  padding:0; 
  margin:0;
  padding-bottom:8px;
  font-family: regular;
  font-size:1.2rem;
  padding-left:0;
}

button.accordion {
  padding:0; 
  padding-right:8px;
}

.accordion:after {content: '\002B';}

.activeaccordion:after {content: "\2212";}

.accordionpanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out; 
  text-align:left;
}

.accordionpanel {max-width:960px;}

.accordion:hover {
  color:white;
  transition: max-height 0s ease-out; 
}

/*MARK:_________________ VIDEO
*/

.videoWrapper {
  position: relative;
  padding-bottom: 50%;
  /* 16:9 */
  height: 0;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left:auto;
  margin-right:auto;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*MARK:______________ BUTTONS
*/

.button {
  display:block;
  border-radius: 8px;
  height: 48px;
  color: rgba(0, 0, 0, 0.91);
  text-decoration: none;
  line-height: 48px;
  text-align: center;
  background-color:#FF9B8D;
  margin-left: auto;
  margin-right: auto;
  margin-top:16px;
  margin-bottom:16px;
  transition:50ms;
  transition-timing-function: ease-in-out;
  width:320px;
  cursor: pointer; 
}

.button:hover {
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.902);
  text-decoration: underline;
  border-bottom:4px solid rgba(0, 0, 0, 0);
}

/*MARK:_______________ FOOTER
*/

footer {
  width: 100%;
  padding: 32px;
  text-align: center;
  background: linear-gradient(0deg, rgba(255,155,141,0.15) 0%, rgba(255,155,141,0) 100%);
}

footer .somed svg {
  margin-left: 8px;
  margin-right: 8px;
  fill: #FF9B8D;
  width: 40px;
  height: 40px;
}

footer .somed svg:hover {fill: #ffffff;}

footer .copyright {
  font-family: regular;
  display: flex;
  justify-content: center;
  font-size:0.8rem;
  opacity:0.5;
}

footer .copyright #year {margin-left: 4px;}

/*MARK:________ GUMROAD FORM
*/

#gumroad-follow-form-embed{
  display: grid; 
  grid-auto-flow: column; 
  column-gap: 16px; 
  justify-content: center;
  width:100%;
  font-size:1.2rem;
  font-family: regular;
}

#gumroad-follow-form-embed-button {
  cursor: pointer; 
  color: unset; 
  font-family: unset; 
  font-size: 1.1rem; 
  font-weight: unset; 
  background: unset;  
  border: unset; 
  margin-block: unset;    
  padding: unset;
  cursor: pointer;
  background-color:#FF9B8D;
  color: rgba(0, 0, 0, 0.91);
  width:88px;
  font-family: regular;
}

#gumroad-follow-form-embed-button:hover {
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.902);
  text-decoration: underline;
}
  
#gumroad-follow-form-embed-input {
  max-width: 100%; 
  padding: 0.75rem 1rem; 
  font-size:1.1rem;
  border: solid 1px rgb(221 221 221/0.35); 
  border-radius: 8px; 
  display: block; 
  width:100%;
  background-color: rgb(0 0 0); 
  color: rgb(221 221 221); 
  font-family: regular;
}
  
    
#gumroad-follow-form-embed-input:focus-within {outline: 2px solid #FF9B8D;}

/*MARK:________________ MOBILE
*/

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

  /*__GENERAL */

  h1 {font-size:1.9rem;}
  h2 {font-size:1.5rem;}
  h3 {font-size:1.2rem;}
  p {font-size:1rem;}

  .topic h3 {width: 160px;}

  .hero {margin-top:48px; margin-bottom:48px;}

  .product-page-header {
    display:initial;
    text-align: center;
  }

  .button {width:100%;}

  #animate:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

    /*MARK:_________ MENU MOBILE
  */

  .logo h2 {margin-top:10px;}

  .topnav-right {display:block;}

  .topnav  a:not(:first-child), .dropdown .dropbtn {display: none;}

  .topnav a.icon {
    float: right;
    display: block;
    padding:0;
    margin:0;
    position:relative;
    right: 0;
  }

  .topnav a.icon::after {border-bottom: solid 3px transparent;}

  .topnav-right  a:after, .topnav .active:after {border-bottom: solid 2px #ffffff;}

  .topnav-right a:nth-child(2) {margin-top:24px;}

  .topnav.responsive {position: relative; display: block;}

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top:8px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .logo IMG {width:32px;}

  .logo  {width:220px;}

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {display: none !important;}

  .dropdown a:hover {background-color: #ddd;}

  .show {display: block !important;}


  /*MARK:___________ GRID MOBILE
  */

.grid-container#packs {grid-template-columns: repeat(1, 1fr); gap: 32px;}

.grid-container#user {
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40px;
}

.grid-container#quotes {
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 24px;
}


/*MARK:__________ PACKS MOBILE
*/
.price {display:none;}

.mobile {display:block; text-align: center;}

.pack {padding-bottom:0; border-radius:16px; background:none;}
.pack #free { background-image: url(../graphics/background_noise2.png);}

.pack-image #free {padding-top:10%;}

.pack p {font-size:1rem; margin-top:4px;}

.pack a {
  display: flex;
  flex-wrap:nowrap;
  flex-direction: row-reverse;
}

.pack-image {width:50%;}

.pack-image IMG {border-radius:4px;}

.pack-text {
  width: 50%; 
  margin:0;
  margin-left: 12px; 
  text-align: left;
  margin-top:0px;
  line-height: 1.2;
}

.pack-text h3 {
  font-size:1rem !important;
}
  
}