:root {
  --color-primary: #b8ddee;
  --color-accent1: #e953fc;
  --color-background: #111;
  --color-background_brighter: #17252c;
  --padding-vertical: 2rem;
}

html {
  /* standard font size by browser is 16px -> set 1rem to 10px */
  font-size: 62.5%;
}

body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.8rem;
  line-height: 1.5;
  /* padding: 0rem 10rem; */
  background-color: var(--color-background);
  color: var(--color-primary);
  margin: 0;
}

@media screen and (max-width: 768px) {
  body {
    /* padding: 0rem 20px; */
  }
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

h1 {
  /* text-align: center; */
  margin-bottom: 5rem;
}


/* Table */
td {
  padding: 0 1rem;
}


/* Navigation */
.nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1rem 2rem;
  align-items: center;
  background-color: var(--color-background);
  /* nav sticks to top */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* nav is in foreground */
  z-index: 1;
}

.nav__logo {
  width: 200px;
  padding: 1rem 2rem;
  border-radius: 40px;
  opacity: 0.8;
}

.nav__logo:hover {
  box-shadow: 0 0 25px 1px var(--color-primary);
  transition: 0.3s;
}

.nav__icon {
  
  align-items: center;
  color: var(--color-primary);
  opacity: 0.8;
  border-radius: 1rem;
}

.nav__icon:hover {
  transition: 0.3s;
  color: #fff;
  opacity: 1;
}


/* hide menu links per default */
.nav__sub_menu {
  width: 100%;
}

.collapsible__content {
  /* display none can not be transformed use max-height and overflow instead */
  max-height: 0;
  overflow: hidden;
  opacity: 0.2;
  transition: all 0.4s;
}

.collapsible--expanded .collapsible__icon {
  transform: rotate(90deg);
  transition: transform 0.3s;
}

.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 0.8;
}

.nav__item {
  color: var(--color-primary);
  border-bottom: 1px solid #222;
  padding: 1rem 2rem;
  text-decoration: none;
  font-size: 1.8rem;
  text-align: right;
  display: block;
  transition: 0.3s;
  /* opacity: 0.8; */
}

/* style mouse hover */
.nav a:hover {
  color: #fff;
  opacity: 1;
  /* text-shadow: 0px 0px 5px #fff, 0px 5px 10px var(--color-accent1); */
}
/* menu end */

.container {
  max-width: 1140px;
  margin: 0 auto;
}

/* Grids */
.grid {
  display: grid;
}

/* on tables grid is set to two columns - fr means fraction */
@media screen and (min-width: 768px) {
  .grid--1x2 {
      grid-template-columns: repeat(2, 1fr);
  }
}
/* End Grids */


/* Blocks */
.block {
  padding: var(--padding-vertical);
}

.block__heading {
  font-size: 4rem;
}

.block--skewed-right {
  clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%);
  background: #17252c;
  background: radial-gradient(circle, #17252c 10%, #111 80%);
}
/* End Blocks */


/* Hero */
.hero__tagline {
  font-size: 2rem;
  letter-spacing: 1px;
  margin-bottom: 5rem;
}

.hero__image {
  width: 100%;
  padding-bottom: 5rem;
}

@media screen and (min-width: 768px) {
  .hero__content {
    align-self: center;
    padding: 0 1rem;
  }
}
/* End Hero */


/* Feature */
.feature {
  /* rows columns */
  gap: 4rem 2rem;
  margin: 12rem 0;
}

.feature__heading {
  margin: 1rem 0;
}

.feature__image {
  width: 100%;
  border-radius: 3rem;
  box-shadow: 0 0 40px 2px var(--color-background_brighter);

}

@media screen and (min-width: 768px) {
  .feature:nth-of-type(even) .feature__content {
    order: 2;
  }
  
}
/* End Feature */

.image--responsive {
  width: 100%;
  height: auto;
}

.link {
  color: var(--color-primary);
  font-size: 1.8rem;
  transition: color 0.2s;
}

.link:hover {
  color: #fff;
}

.link--arrow {
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
}


.link--arrow::before {
  content: '';
  margin-right: 0px;
  transition: margin-right 0.2s;
}

.link--arrow:hover::before {
  margin-right: 0.5rem;
}

.link--img {
  transition: box-shadow 0.2s;
}

.link--img:hover {
  box-shadow: 0 0 20px 2px var(--color-primary);
}

.container__calculator {
  margin: 5rem 0rem;
  display: grid;
  grid-template: repeat(8, 2rem) / repeat(2, 20rem);
  grid-template-areas:
    "r1c1 r1c2"
    "r2c1 r2c2"
    "r3c1 r3c2"
    "r4c1 r4c2"
    "r5c1 r5c2"
    "r6c1 r6c2"
    "r7c1 r7c2"
    "r8c1 r8c2";
  justify-content: center;
  justify-items: right;
  align-items: center;
  gap: 0.8rem 2%;
}

input {
  justify-self: left;
  width: 10rem;
  text-align: end;
  border-radius: 5px;
}

/* to hide up and down errows in input field Safari, Edge, Chrome and Opera*/
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* to hide up and down errows in input field Firefox */
input[type=number]{
  -moz-appearance: textfield;
}

.btn_calc {
  background: #333;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 20px;
  width: 11rem;
  grid-area: r5c2;
  text-align: center;
}

.btn_calc:hover {
  transition: 0.3s;
  color: #fff;
  border-color: #fff;
}

.container_chart {
  display: flex;
  justify-content: center;
}

#wealth_chart {
  margin-top: 5vh;
  margin-left: 3vw;
  margin-right: 3vw;
}


/* Affiliate section */
.affiliate__book {
  margin-bottom: 5rem;
}


.social_icons {
  display: flex;
  justify-content: center;
}
.social_icons img {
  width: 3rem;
  margin: 0 1rem;
  border-radius: 20%;
  transition: 0.2s;
}

.social_icons img:hover {
  box-shadow: 0 0 20px 2px var(--color-primary);
  transform: rotate(10deg);
}


/* Footer */
.footer {
  background: #e953fc;
  background: linear-gradient(0deg, #A8FFF6 0%, #111 90%);
}

.footer__section {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer__logo {
  margin-top: 5rem;
  text-align: center;
}
.footer__logo img {
  width: 100%;
  max-width: 200px;
}
.footer__copyright {
  opacity: 0.8;
}
/* End Footer */