/*
  New Website CSS design 
  Author: Antoni/Loren
*/

/*======================================================================================*/
/* Featured Post Sylization*/

.featured-post{
    align-items: center;

    background: linear-gradient(
        0deg,
        rgba(80,74,60, 1) 0%,
        rgba(80,74,60,0) 60%),
      url(../img/new_design/BackgroundImages/updates-hero.png);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 180px 0px var(--website-spacing-lg) 0px;
}

.featured-post .wrapper{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap:var(--website-spacing-lg);
    padding: 0 var(--website-side-padding);
    position: relative;
}

.featured-post .title{
    color: var(--primitives-colors-white);
    font-size: var(--mainHeader2-desktop-font-size);
    font-family: var(--mainHeader2-desktop-font-family);
    font-style: var(--mainHeader2-desktop-font-style);
    font-weight: var(--mainHeader2-desktop-font-weight);
    letter-spacing: var(-mainHeader2-desktop-letter-spacing);
    line-height: var(--mainHeader2-desktop-line-height);
    position: relative;
    text-shadow: 0px 3px 4px #00000040;
    width: fit-content;
}

.featured-post .featured-card{
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    overflow: hidden;
    position: relative;
    width: 100%;
    gap: 24px;
}

.featured-post .image-group{
    position: relative;
    background-image: url(../img/new_design/GraphicAssets/ZBorder.png);
    background-size: 100% 100%;
    width: fit-content;
    max-width: clamp(200px, 100%, 672px);
}



.featured-post .featured-image{
    padding: 2%;
    max-width: clamp(200px, 100%, 672px);
}


.featured-post .featured-text{
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 0px 12px 12px;
    position: relative;
    width: 100%;
    justify-content: space-between;
}

.featured-post .featured-text .header{
    color: var(--primitives-colors-white);
    font-family: var(--smalltext2-desktop-font-family);
    font-size: var(--smalltext2-desktop-font-size);
    font-style: var(--smalltext2-desktop-font-style);
    font-weight: var(--smalltext2-desktop-font-weight);
    letter-spacing: var(--smalltext2-desktop-letter-spacing);
    line-height: var(--smalltext2-desktop-line-height);
    position: relative;
    width: fit-content;
}


.featured-post .featured-text .title{
    color: var(--primitives-colors-white);
    font-size: var(--header3-desktop-font-size);
    font-family: var(--header3-desktop-font-family);
    font-style: var(--header3-desktop-font-style);
    font-weight: var(--header3-desktop-font-weight);
    letter-spacing: var(--header3-desktop-letter-spacing);
    line-height: var(--header3-desktop-line-height);
    position: relative;
    width: fit-content;
}


/*======================================================================================*/
/* Posts Block Sylization*/

.post-block-date {
  color: var(--primitives-colors-white);
  font-size: var(--body2-desktop-font-size);
  font-family: var(--body2-desktop-font-family);
  font-style: var(--body2-desktop-font-style);
  font-weight: var(--body2-desktop-font-weight);
  letter-spacing: var(--body2-desktop-letter-spacing);
  line-height: var(--body2-desktop-line-height);
  /* margin-top: 0px; */
  position: relative;
  white-space: nowrap;
  width: fit-content;
  left: -10px;
}

.post-block-title {
  color: var(--primitives-colors-white);
  font-size: var(--smalltext1-desktop-font-size);
  font-family: var(--smalltext1-desktop-font-family);
  font-style: var(--smalltext1-desktop-font-style);
  font-weight: var(--smalltext1-desktop-font-weight);
  letter-spacing: 1.5px;
  line-height: var(--smalltext1-desktop-line-height);
  /* margin-top: 0px; */
  position: relative;
  white-space: nowrap;
  width: 100%;
  left: -10px;
  margin-top: -15px;
  line-height: 36px;
}

/*======================================================================================*/
/* Individual Posts Block Sylization*/
.individual-post-image{
    width: 100%;
    height: 600px;
    top: 0px;
    left: 0px;
    position: relative;
    object-fit: cover;
}

.individual-post{
    align-items: flex-start;
    background-color: var(--website-color-surface-primary);
    display: flex;
    flex-direction: column;
    gap:var(--website-spacing-lg);
    padding: var(--website-spacing-lg) var(--website-side-padding) var(--website-spacing-lg) var(--website-side-padding);
    position: relative;
}

.individual-post .text-group{
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 100%;
}

.individual-post .date-text{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-family: var(--smalltext2-desktop-font-family);
    font-size: var(--smalltext2-desktop-font-size);
    font-style: var(--smalltext2-desktop-font-style);
    font-weight: var(--smalltext2-desktop-font-weight);
    letter-spacing: var(--smalltext2-desktop-letter-spacing);
    line-height: var(--smalltext2-desktop-line-height);
    position: relative;
    text-shadow: 0px 3px 4px #00000040;
}

.individual-post .title-text{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-size: var(--header3-desktop-font-size);
    font-family: var(--header3-desktop-font-family);
    font-style: var(--header3-desktop-font-style);
    font-weight: var(--header3-desktop-font-weight);
    letter-spacing: var(--header3-desktop-letter-spacing);
    line-height: var(--header3-desktop-line-height);
    position: relative;
    text-shadow: 0px 3px 4px #00000040;
}

.individual-post .body-text{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-size: var(--body2-desktop-font-size);
    font-family: var(--body2-desktop-font-family);
    font-style: var(--body2-desktop-font-style);
    font-weight: var(--body2-desktop-font-weight);
    letter-spacing: var(--body2-desktop-letter-spacing);
    line-height: var(--body2-desktop-line-height);
    position: relative;
    text-shadow: 0px 3px 4px #00000040;
}


/*======================================================================================*/
/* Login Widget Sylization*/

.login-widget {
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 14.24%,
    rgba(0, 0, 0, 0) 84.55%,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: url(../img/new_design/GraphicAssets/Sign\ up\ panel.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 612px;
  width: 648px;
}

.login-widget .dreamworld-sign-up {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin-top: 62px;
}

.login-widget .title {
  align-self: stretch;
  color: var(--primitives-colors-white);
  font-family: var(--mainHeader-desktop-font-family);
  font-size: 4.5rem;
  font-style: var(--mainHeader-desktop-font-style);
  font-weight: var(--mainHeader-desktop-font-weight);
  letter-spacing: var(--mainHeader-desktop-letter-spacing);
  line-height: var(--mainHeader-desktop-line-height);
  position: relative;
  text-align: center;
  width: fit-content;
  margin: 0px auto 6px auto;
}

.login-widget .small-title {
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-family: var(--mainHeader2-desktop-font-family);
    font-size: var(--mainHeader2-desktop-font-size);
    font-style: var(--mainHeader2-desktop-font-style);
    font-weight: var(--mainHeader2-desktop-font-weight);
    letter-spacing: 0;
    line-height: 100%;
    position: relative;
    text-align: center;
    width: fit-content;
    margin: auto;
  }


.login-widget .description {
  align-self: stretch;
  color: var(--primitives-colors-white);
  font-family: var(--smalltext2-desktop-font-family);
  font-size: var(--smalltext2-desktop-font-size);
  font-style: var(--smalltext2-desktop-font-style);
  font-weight: var(--smalltext2-desktop-font-weight);
  letter-spacing: var(--smalltext2-desktop-letter-spacing);
  line-height: var(--smalltext2-desktop-line-height);
  position: relative;
  text-align: center;
  margin: 0px 8px;
}

.login-widget .small-description {
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-family: var(--body2-desktop-font-family);
    font-size: var(--body2-desktop-font-size);
    font-style: var(--body2-desktop-font-style);
    font-weight: var(--body2-desktop-font-weight);
    letter-spacing: var(--body2-desktop-letter-spacing);
    line-height: var(--body2-desktop-line-height);
    position: relative;
    text-align: center;
    padding: 0px 8px;
  }
  

.login-widget .alpha-text {
  color: var(--primitives-colors-white);
  font-family: var(--smalltext2-desktop-font-family);
  font-size: var(--smalltext2-desktop-font-size);
  font-style: var(--smalltext2-desktop-font-style);
  font-weight: var(--smalltext2-desktop-font-weight);
  letter-spacing: var(--smalltext2-desktop-letter-spacing);
  line-height: var(--smalltext2-desktop-line-height);
  position: relative;
  text-align: center;
  width: fit-content;
  margin-top: 54px;
  margin-left: 8px;
  margin-right: 8px;
}

.login-widget .login-form {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  gap: 32px;
  margin: auto;
  position: relative;
}


/*======================================================================================*/
/* PURCHASE WIDGET*/
.login-widget .purchase-text {
    color: var(--primitives-colors-white);
    font-family: var(--header2-desktop-font-family);
    font-size: var(--header2-desktop-font-size);
    font-style: var(--header2-desktop-font-style);
    font-weight: var(--header2-desktop-font-weight);
    letter-spacing: 0px;
    line-height: var(--header2-desktop-line-height);
    position: relative;
    text-align: center;
    width: fit-content;
    margin-top: 54px;
  }
  

/*======================================================================================*/
/* CTA BUTTON WIDGET*/
.CTA {
    all: unset;
    align-items: center;
    box-shadow: 0px 3.69px 3.69px #00000040;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
  }
  
  .CTA .CTA-button {
    height: 71.89px;
    position: relative;
    width: 262px;
  }
  
  .CTA .button-text {
    -webkit-text-stroke: 1px #00000033;
    color: var(--primitives-colors-white);
    font-family: "Philosopher";
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: normal;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    padding-top: 0px;
  }
  
  .CTA .button-text-disabled {
    -webkit-text-stroke: 1px #00000033;
    color: #81818193;
    font-family: "Philosopher";
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: normal;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    padding-top: 0px;
  }

  .CTA .backdrop{
    /* width: 262px; */
  }
  
/*======================================================================================*/
/* Stylized Text Block */
.stylized-text-block{
    width: 100%;
}

.stylized-text-block .text-wrapper{
    color: var(--primitives-colors-white);
    font-size: var(--body2-desktop-font-size);
    font-family: var(--body2-desktop-font-family);
    font-style: var(--body2-desktop-font-style);
    font-weight: var(--body2-desktop-font-weight);
    letter-spacing: var(--body2-desktop-letter-spacing);
    line-height: var(--body2-desktop-line-height);
    /* margin-top: 0px; */
    position: relative;
    /* width: fit-content; */
    left: -10px;
    align-self: stretch;
    text-wrap: wrap;
}


.join-the-team {
    justify-content: center;
    align-items: center;
    background-color: var(--website-color-surface-primary);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    padding: 64px var(--website-side-padding);
    flex-direction: column;
    gap: 4px;
  }
  
  .join-the-team .discord-info {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 32px;
    position: relative;
    width: 100%;
  }
  
  .join-the-discord .text-wrapper {
    color: var(--primitives-colors-white);
    font-family: var(--body-desktop-font-family);
    font-size: var(--body-desktop-font-size);
    font-style: var(--body-desktop-font-style);
    font-weight: var(--body-desktop-font-weight);
    letter-spacing: var(--body-desktop-letter-spacing);
    line-height: var(--body-desktop-line-height);
    margin-top: -1px;
    position: relative;
    text-align: center;
    width: 100%;
  }


/*=====================================================================================*/
/* FAQ WIDGETS */
.faq-frame{
    align-items: center;
    background-color: var(--website-color-surface-primary);
    display: flex;
    flex-direction: column;
    gap: var(--website-spacing-md);
    padding: var(--website-spacing-lg) var(--website-side-padding) 128px var(--website-side-padding);
    position: relative;
}

.faq-frame .faq-stack{
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--website-spacing-md);
    padding: 0px;
    position: inherit;
    width: 100%;
}

.faq-question-card{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var( --website-spacing-md);
    position: relative;
    width: 100%;
}

.faq-question-card .faq-question-text{
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
}

.faq-question-card .faq-question{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-size: var(--smalltext1-desktop-font-size);
    font-family: var(--smalltext1-desktop-font-family);
    font-style: var(--smalltext1-desktop-font-style);
    font-weight: var(--smalltext1-desktop-font-weight);
    letter-spacing: 0px;
    line-height: 150%;
    margin-top: -1px;
    position: relative;
}

.faq-question-card .faq-answer{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-size: var(--body2-desktop-font-size);
    font-family: var(--body2-desktop-font-family);
    font-style: var(--body2-desktop-font-style);
    font-weight: var(--body2-desktop-font-weight);
    letter-spacing: var(--body2-desktop-letter-spacing);
    line-height: var(--body2-desktop-line-height);
    margin-top: -1px;
    position: relative;
}

.faq-frame .divider{
    align-self: streth;
    background-color: var(--website-color-border-secondary);
    height: 1px;
    position: relative;
    width: 100%;
}

/*=====================================================================================*/
/* CONTACT PAGE WIDGETS */

.additional-emails{
    align-items:center;
    display: flex;
    flex-direction: column;
    gap: var(--website-spacing-md);
    justify-content: center;
    position: relative;
}

.additional-emails .text-group{
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    width: 100%;
}

.additional-emails .title{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-size: var(--smalltext1-desktop-font-size);
    font-family: var(--smalltext1-desktop-font-family);
    font-style: var(--smalltext1-desktop-font-style);
    font-weight: var(--smalltext1-desktop-font-weight);
    letter-spacing: var(--smalltext1-desktop-letter-spacing);
    line-height: var(--smalltext1-desktop-line-height);
    position: relative;
    text-align: center;
}

.additional-emails .text{
    align-self: stretch;
    color: var(--website-color-text-secondary);
    font-family: "Mulish-Bold", Helvetica;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 36px;
    position: relative;
    text-align: center;
}

.contact-intro{
    align-items: center;
    background-position: 50% 60%;
    background-size: cover;
    background-color: var(--website-color-surface-primary);
    background-image: url(../img/new_design/BackgroundImages/TundraSunset.png);

    display: flex;
    flex-direction: column;
    gap: 96px;
    position: relative;
    width: 100%;

    padding: 120px var(--website-side-padding);
    justify-content: center;
    box-shadow: inset 0 0 0 1000px rgba(46,41,34,0.8);
}

.contact-intro .text{
    align-self: stretch;
    color: var(--primitives-colors-white);
    font-size: var(--smalltext1-desktop-font-size);
    font-family: var(--smalltext1-desktop-font-family);
    font-style: var(--smalltext1-desktop-font-style);
    font-weight: var(--smalltext1-desktop-font-weight);
    letter-spacing: 0px;
    line-height: 42px;
    position: relative;
    text-align: center;
    justify-self: center;
    margin-bottom: 0px;
}