/*++++++++++++++++++++++*/
/*                      */
/* variable definitions */
/*                      */
/*++++++++++++++++++++++*/

:root {
  /* theme colors */
  --white: #fafafa;
  --petrol: #4f6d7a;
  --petrol-darmkode: #618394;
  --silver: #e9e9e9;
  --black: #030303;
  --dark-grey: #222;
  --light-grey: #bbbbbb;

  /*++++++++++++++++++++++*/
  /*                      */
  /*     light mode       */
  /*                      */
  /*++++++++++++++++++++++*/

  /* text colors */
  --color-main: var(--black);
  --color-main-title: var(--white);
  --color-hero-text: var(--light-grey);
  --color-text: var(--dark-grey);


  /* background color */
  --color-background: var(--white);

  /* hover color */
  --color-highlight: var(--petrol);

  /* colors for feature section */
  --color-text-feature: var(--black);
  --color-feature-background: var(--silver);

  /* color for decoration */
  --color-decoration: var(--light-grey);


  /* other variables */

  /* font weight */
  --font-weight: 200;

  /* animation duration */
  --transistion-time: 300ms;

  /* maximal width for content */
  --maxwidth: 1200px;

  /* side spaceing for content */
  --side-padding: 16px;

  /* fontsize mobile */
  --font-mobile: 1rem;

  /* fontsize tablet */
  --font-tablet: 1.05rem;

  /* fontsize laptop */
  --font-laptop: 1.1rem;

}

/*++++++++++++++++++++++++++++++*/
/*                              */
/*    darkmode colors           */
/*                              */
/*++++++++++++++++++++++++++++++*/

.dark-mode {
  /* color for text */
  --color-main: var(--white);
  --color-main-title: var(--white);
  --color-hero-text: var(--light-grey);
  --color-text: var(--light-grey);

  /* background color */
  --color-background: var(--black);

  /* hover color */
  --color-highlight: var(--petrol-darmkode);

  /* colors for feature section */
  --color-text-feature: var(--white);
  --color-feature-background: var(--dark-grey);

  /* color for decoration */
  --color-decoration: var(--dark-grey);
}


/* remove all margins and paddings by default */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


/*++++++++++++++++++++++++++++++*/
/*                              */
/*     Body & Header            */
/*                              */
/*++++++++++++++++++++++++++++++*/

body {
  margin: 0px;
  background-color: var(--color-background);
  font-family: "Roboto";
  font-weight: var(--font-weight);
  overflow-y: scroll;
  scroll-behavior: smooth;
}

/* Sticky Header with menu */

header {

  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--color-background);
  z-index: 100;

  /* Top Navigation container mobile */

  #topnav-bar {
    padding-top: 33px;
    padding-bottom: 28px;
    margin-left: 0rem;
    display: flex;
    flex-direction: column;
    row-gap: 0rem;
    column-gap: 4rem;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    width: fit-content;

    /* Top navigation container laptop */

    @media only screen and (min-width: 824px) {
      flex-direction: row;
      max-width: var(--maxwidth);
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }

    /* navigation links inside */

    a,
    li {
      font-size: var(--font-laptop);
      width: fit-content;
      line-height: 1;

      @media only screen and (min-width: 824px) {
        align-self: center;
      }
    }
  }

  /* Top Navigation menu link liste mobile */

  #topnav-menu {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    column-gap: 4rem;
    width: 100vw;
    visibility: hidden;
    padding-top: 0rem;
    max-height: 0;
    overflow: hidden;
    margin-left: auto;
    transition:
      opacity var(--transistion-time) ease-in-out,
      transform var(--transistion-time) ease-in-out,
      max-height var(--transistion-time) ease-in-out,
      padding-top var(--transistion-time) ease-in-out,
      visibility 0s linear var(--transistion-time),
      color var(--transistion-time) ease-in-out;

    /* Top Navigation menu link liste desktop */

    @media only screen and (min-width: 824px) {
      flex-direction: row;
      width: fit-content;
      visibility: visible;
      transition: none;
      max-height: none;
      overflow: visible;
      height: fit-content;
    }

    /* Top Navigation menu link liste mobile */

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

      /* mobile menu default hidden */

      transform: translateY(-32px);
      padding-top: 0rem;
      padding-right: var(--side-padding);
      opacity: 0;
      max-height: 0;

      li {
        width: 100%;
        text-align: center;
      }

      /* mobile menu visible */

      &.visible {
        visibility: visible;
        padding-top: 10dvh;
        padding-bottom: 10dvh;
        max-height: 500px;
        transform: translateY(0);
        opacity: 1;
        transition:
          opacity var(--transistion-time) ease-in-out,
          transform var(--transistion-time) ease-in-out,
          max-height var(--transistion-time) ease-in-out,
          padding-top var(--transistion-time) ease-in-out,
          visibility 0s linear 0s;
      }
    }
  }

  /* dark mode toggler */

  #darkModeToggler {
    color: var(--color-main);
    background-color: var(--color-background);
    padding: 0px;
    margin: 0px;
    border: none;
    cursor: pointer;
    font-size: var(--font-laptop);

    /* dark mode icon */

    i {
      rotate: 0deg;
      transition:
        rotate var(--transistion-time) ease-in-out;
    }

    /* dark mode toggler hover rotation anmiation */

    i:hover {
      rotate: 90deg;
    }
  }

  /* hamburger icon for mobile menu */

  #hamburger-icon {
    top: 0px;
    position: absolute;
    right: 0px;
    margin-top: 1.8rem;
    display: block;
    margin-right: var(--side-padding);
    border: none;
    background-color: var(--color-background);

    /* animation for hamburger icon */

    &.hamburger .line {
      width: 24px;
      height: 2px;
      background-color: var(--color-main);
      display: block;
      margin: 5px auto;
      -webkit-transition: all var(--transistion-time) ease-in-out;
      -o-transition: all var(--transistion-time) ease-in-out;
      transition: all var(--transistion-time) ease-in-out;

    }

    .hamburger:hover {
      cursor: pointer;
    }

    /* draw hamburger icons with lines */

    &.is-active .line:nth-child(2) {
      opacity: 0;
    }

    &.is-active .line:nth-child(1) {
      -webkit-transform: translateY(-4px) rotate(45deg);
      -ms-transform: translateY(0px) rotate(45deg);
      -o-transform: translateY(0px) rotate(45deg);
      transform: translateY(7px) rotate(-45deg);
    }

    &.is-active .line:nth-child(3) {
      -webkit-transform: translateY(0px) rotate(-45deg);
      -ms-transform: translateY(0px) rotate(-45deg);
      -o-transform: translateY(0px) rotate(-45deg);
      transform: translateY(-7px) rotate(45deg);
    }

    /* hamburger icon hidden on laptop */

    @media only screen and (min-width: 824px) {
      display: none;
    }
  }

}

/* text design for all navigation items in header and footer */

nav a {
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  transition:
    color var(--transistion-time) ease-in-out,
    border-color var(--transistion-time) ease-in-out;
  border-bottom: 1px solid var(--color-background);

  &:hover {
    color: var(--color-main);
    border-color: var(--color-main);
  }

  &.active {
    border-bottom: 3px solid var(--color-main);
  }

  vertical-align: middle;
}


/*++++++++++++++++++++++++++++++*/
/*                              */
/*    hero section              */
/*                              */
/*++++++++++++++++++++++++++++++*/

/* hero image */

.hero-image {
  height: clamp(360px, 80vw, 80dvh);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: sticky;
  margin-left: auto;
  margin-right: auto;
  top: 82px;
  z-index: -10;

  /* position hero text */

  .hero-text {
    text-align: center;
    position: absolute;
    bottom: 24%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    width: 100%;

    /* page title as hero text */

    h1 {
      color: var(--color-main);
      text-transform: uppercase;
      font-size: clamp(3rem, 10vw, 7rem);
      line-height: 1;
      color: var(--color-main-title);
      letter-spacing: -0.05em;
      font-family: "Roboto";
      font-weight: 100;
    }

    /* second line hero text */
    p {
      color: var(--color-hero-text);
      padding-bottom: 0rem;
    }

    @media only screen and (max-height: 400px) {
      bottom: 30%;
    }
  }

}

/* outer container for content with hero section */

.outer {

  background-color: var(--color-background);
  padding-top: 32px;
  position: relative;
  z-index: 10;
  top: 82px;

  @media only screen and (min-width: 824px) {
    padding-top: 80px;
  }
}

/* outer container for feature section */

.outer-feature {
  background-color: var(--color-feature-background);
  padding-top: 0rem;
  position: relative;
  z-index: 10;
  top: 82px;

  section {
    margin-bottom: 0rem;
  }
}

/* outer container for page without hero section */

.outer-single {
  background-color: var(--color-background);
  max-width: var(--maxwidth);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  top: 82px;
  padding-top: 32px;

  @media only screen and (min-width: 824px) {
    padding-top: 80px;

  }
}


/*++++++++++++++++++++++++++++++*/
/*                              */
/*     font                     */
/*                              */
/*++++++++++++++++++++++++++++++*/

/* custom font face */

@font-face {
  font-family: "Roboto";
  src: url("../assets/font/Roboto-VariableFont_wdth\,wght.ttf");
}


/* pagetitle headline without a hero section */

h1.single-title {
  color: var(--color-main);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.05em;
  font-weight: 100;
  text-transform: uppercase;
  line-height: 1;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);

  @media only screen and (min-width: 824px) {
    margin-bottom: 5rem;
  }
}

/* headline h2 */

h2 {
  color: var(--color-main);
  margin: 0 0 1rem 0;
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-family: "Roboto";
  font-weight: 100;
  line-height: 1;

  @media only screen and (min-width: 576px) {
    margin-bottom: 2rem;
  }

  @media only screen and (min-width: 824px) {
    margin-bottom: 3rem;
  }
}

/* headline h3*/

h3 {
  color: var(--color-main);
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  font-weight: var(--font-weight);
}

/* headline h4 */

h4 {
  color: var(--color-main);
}

/* font size all other text elements */

p,
address,
a,
h3,
.button-cta,
h3.grid-item-title,
h4,
nav a,
.button-nav,
li,
input,
label,
select,
textarea {
  font-size: var(--font-mobile);
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-family: 'Roboto';

  @media only screen and (min-width: 576px) {
    font-size: var(--font-tablet);
  }

  @media only screen and (min-width: 824px) {
    font-size: var(--font-laptop);
  }

}

/* home link on navbar */

#home {
  font-weight: 300;
}

/* focus */
button:focus-visible,
a:focus-visible,
a:focus-visible figure,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-highlight);
  z-index: 9999;
  border-radius: 1px;
  overflow: visible;
}



/* paragraph */

p {
  color: var(--color-text);
  padding: 0 0 1.5em 0;
  margin: 0;
}

/* address */

address {
  color: var(--color-text);
  margin: 0;

  p {
    padding: 0;
  }
}

/* Link */

a {
  color: var(--color-main);
  transition:
    color var(--transistion-time) ease-in-out,
    border-color var(--transistion-time) ease-in-out;

  word-break: break-word;
  border-bottom: 1px solid var(--color-main);
  text-decoration: none;

  &:hover {
    color: var(--color-highlight);
    border-color: var(--color-highlight);
  }
}

/* link with icon */

.link-with-icon {
  text-decoration: none;
  display: inline-block;

  i {
    transition: padding-left var(--transistion-time) ease-in-out;
  }

  &:hover {
    i {
      padding-left: 1em;
    }

  }
}

/* center position where its needed */

.center {
  text-align: center;
}

h2.center {
  text-align: left;

  @media only screen and (min-width: 576px) {
    text-align: center;
  }
}


/*++++++++++++++++++++++++++++++*/
/*                              */
/*  Buttons                     */
/*                              */
/*++++++++++++++++++++++++++++++*/

/* call to action button */

.button-cta {
  display: inline-block;
  padding: 0.6em 0.6em;
  margin: 0;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.5rem;
  border: none;
  background-color: var(--color-main);
  color: var(--color-background);
  font-weight: var(--font-weight);

  transition:
    background-color var(--transistion-time) ease-in-out,
    color var(--transistion-time) ease-in-out,
    padding var(--transistion-time) ease-in-out;

  &:hover {
    background-color: var(--petrol);
    color: var(--white);
  }
}

/* navigation link with button style */

.button-nav {
  color: var(--color-main);
  border: 1px solid var(--color-main);
  padding: 0.6em 0.6em;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 0.5rem;
  line-height: 1;

  transition:
    background-color var(--transistion-time) ease-in-out,
    border-color var(--transistion-time) ease-in-out,
    color var(--transistion-time) ease-in-out,
    padding var(--transistion-time) ease-in-out;

  i {
    padding: 0 0.6em 0 0em;
    opacity: 0.8;
    transition:
      opacity var(--transistion-time) ease-in-out,
      padding var(--transistion-time) ease-in-out;
  }

  &:hover {
    color: var(--white);
    border: 1px solid var(--petrol);
    background-color: var(--petrol);

    i {
      opacity: 1;
    }

    &.nav-back {
      padding-left: 0.3em;

      i {
        padding-right: 0.9em;
      }
    }
  }
}

/* spacer for no space on top and bottom where its needed */

.mtb-0 {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/* spacer for a little space on the bottom where its neede */
.mtb-2 {
  padding-top: 0px;
  padding-bottom: 1rem;

  @media only screen and (min-width: 824px) {
    padding-bottom: 2rem;
  }
}

/* unsorted list */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 1rem;

  li {
    width: fit-content;

    a {
      margin-top: 0rem;
    }
  }
}

/*++++++++++++++++++++++++++++++*/
/*                              */
/*   Sections / Grids / Flex    */
/*                              */
/*++++++++++++++++++++++++++++++*/

/* sections */
section {
  max-width: var(--maxwidth);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 32px;

  padding-left: var(--side-padding);
  padding-right: var(--side-padding);

  @media only screen and (min-width: 576px) {
    padding-bottom: 80px;
  }

  @media only screen and (min-width: 824px) {
    padding-bottom: 160px;
  }
}

/* Grid with up to 4 columns */

.grid-4 {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 2rem;
  column-gap: 2%;

  @media only screen and (min-width: 576px) {
    grid-template-columns: 49% 49%;
  }

  @media only screen and (min-width: 824px) {
    grid-template-columns: 32% 32% 32%;
  }

  @media only screen and (min-width: 1024px) {
    grid-template-columns: 23.5% 23.5% 23.5% 23.5%
  }

  /* show no entries in the grid */

  li {
    display: none;
  }

  /* show all entries in the grid */

  .all-grid-items {
    display: list-item;
  }

  /* show more button */

  +#load-more-button {
    cursor: pointer;
    ;
    margin: 1rem 0;
  }

  /* up to  575px: show only first grid element */

  li:nth-of-type(1) {
    display: list-item;
  }

  /* 576px to 823px: only first and second element */

  @media (min-width: 576px) and (max-width: 823px) {
    li:nth-of-type(-n+2) {
      display: list-item;
    }
  }

  /* from 824px show all elements */

  @media (min-width: 824px) {
    li {
      display: list-item;
    }

    /* hide show more button */

    +#load-more-button {
      display: none;

    }
  }

  /* setup transition for hover on link when its a figure */

  a figure {
    scale: 1;
    transition:
      scale var(--transistion-time) ease-in-out;
  }

  /* scale figure when its a link on hover */

  a:hover figure {

    scale: 1.02;

    @media only screen and (min-width: 576px) {
      scale: 1.03;
    }

    @media only screen and (min-width: 824px) {
      scale: 1.04;
    }

  }

  /* text under the figure */

  figcaption {
    padding: 1rem 0.5rem 1rem 0.5rem;
    margin: 0rem;
    color: var(--color-text);
    text-transform: uppercase;

    /* Überschrift H3 */

    h3 {
      text-align: center;
      font-size: var(--font-mobile);
      line-height: 1.3;
      font-weight: 300;
      margin: 0;

      @media only screen and (min-width: 576px) {
        font-size: var(--font-tablet);
      }

      @media only screen and (min-width: 824px) {
        font-size: var(--font-laptop);
      }
    }

    p {
      text-align: center;
      font-weight: var(--font-weight);
      line-height: 1.3;
      padding-bottom: 0;
    }

  }
}

/* Grid Container for concert dates */

.grid-table-container {
  display: grid;
  grid-template-columns: auto;
  row-gap: 0.5rem;
  margin-bottom: 1rem;

  /* Grid Items for concert dates */

  .grid-table-row {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0;
    align-items: center;

    /* make the call to action button for tickts a bit smaller */

    .button-cta {
      margin-top: 1rem;
      line-height: 1;
      padding: 0.6em;
      font-size: 0.8em;

      i {
         padding-right: 0.6em;
        transition:
          padding var(--transistion-time) ease-in-out;
      }

      &:hover {
        padding-right: 0.3em;

        i {
          padding-right: 0.3em;
          padding-left: 0.9em;
        }
      }
    }

    @media only screen and (min-width: 824px) {
      grid-template-columns: 20% 20% 20% 20% 20%;

      .button-cta {
        margin-top: 0rem;
      }
    }
  }

  section.grid-table-row {
    margin-bottom: 0rem;
  }

  h3,
  p {
    margin: 0em;
    padding: 0rem;

  }
}

/* line */

.table-line {
  border-color: var(--color-decoration);
  border-width: 0.5px;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* columns for long text */

.columns-2,
.columns-3 {
  columns: 1 auto;
  column-gap: 5%;
  orphans: 2;
  widows: 2;

  article {
    break-inside: avoid;
  }

  p:last-child {
    padding-bottom: 0rem;
  }

  @media only screen and (min-width: 576px) {
    columns: 2 auto;
  }
}


.columns-3 {

  @media only screen and (min-width: 824px) {
    columns: 3 auto;
  }
}


/* grid for upt to 2 columns */

.grid-2 {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 2rem;
  column-gap: 10%;
  justify-content: center;

  .button-nav {
    margin-top: 0.5rem;
  }

  @media only screen and (min-width: 576px) {
    grid-template-columns: 47.5% 47.5%;
    column-gap: 5%;

    /* swap column for image */

    .grid-image-right {
      grid-column: 2;
      grid-row: 1;
    }

    /* swap column for text */

    .grid-text-left {
      grid-column: 1;
      grid-row: 1;
    }

    article {
      height: fit-content;
      margin-top: auto;
      margin-bottom: auto
    }

    .button-nav {
      margin-top: 5%;
    }
  }

  @media only screen and (min-width: 1200px) {
    grid-template-columns: 45% 45%;
    column-gap: 10%;

  }
}

/* Grid Feature with 2 columns */

.grid-2-feature {
  display: grid;
  grid-template-columns: 100%;
  background-color: var(--color-feature-background);
  padding-top: 32px;
  padding-bottom: 32px;
  row-gap: 2rem;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);

  h1 {
    color: var(--color-text-feature);
    margin-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
  }

  h2 {
    color: var(--color-text-feature);
    ;
  }

  p,
  li {
    color: var(--color-text-feature);
  }

  ul {
    display: block;
  }

  .button-nav {
    color: var(--color-text-feature);
    border-color: var(--color-text-feature);
    margin-top: 0.5rem;
  }

  .button-nav:hover {
    color: var(--white);
    border-color: var(--color-highlight);
  }

  img {
    filter: drop-shadow(0px 10px 10px);
    margin-left: auto;
    margin-right: auto;
  }

  @media only screen and (min-width: 824px) {
    padding-top: 80px;
    padding-bottom: 80px;
    grid-template-columns: 47.5% 47.5%;
    column-gap: 5%;

    h1 {
      margin-bottom: 2rem;
    }

    .button-nav {
      margin-top: 5%;
    }

  }

  @media only screen and (min-width: 1200px) {
    grid-template-columns: 45% 45%;
    column-gap: 10%;

  }
}

/* Container for Section Feature with 1 bigger columns within a page */

.section-feature-container {
  width: 100%;
  background-color: var(--color-background);

  .section-feature {
    max-width: calc(var(--maxwidth)/1.5);
    margin-left: auto;
    margin-right: auto;

    p {
      padding-left: 0rem;
      padding-right: 0rem;

    }
  }
}



/*++++++++++++++++++++++++++++++*/
/*                              */
/*     Bilder & Icons & Videos  */
/*                              */
/*++++++++++++++++++++++++++++++*/

/* image square with round corners */

.img-11-s {
  width: 100%;
  border-radius: 0.5rem;
  aspect-ratio: 1 / 1;
}

/* image in a grid without round cornders */

.img-grid {
  width: 100%;
  aspect-ratio: 1 / 1;

}

/* image with subtitle */

figure {
  margin: 0;
  max-width: fit-content;
}

/* Icons */

i {

  /* Icon on the ride side of a Link */

  &.link {
    padding-left: 0.3em;
  }

}

/* Spotify Player */

.spotify-player {
  box-sizing: content-box;
}

/* Youtube Player 16:9 */

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: 1rem;
  box-sizing: content-box;
}

/* Video Player: 1:1 */

.video-sq {
  aspect-ratio: 1 / 1;
  width: 100%;
  box-sizing: content-box;
}


/*++++++++++++++++++++++++++++++*/
/*                              */
/*     Footer                   */
/*                              */
/*++++++++++++++++++++++++++++++*/

/* Footer Container */

footer {
  padding-bottom: 32px;
  max-width: var(--maxwidth);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  position: relative;
  top: 82px;

  display: grid;
  grid-template-columns: 100%;
  row-gap: 2rem;
  column-gap: 0rem;

  .copyright {
    grid-column: 1 / -1;
  }

  @media only screen and (min-width: 576px) {
    padding-bottom: 80px;
  }

  @media only screen and (min-width: 824px) {
    grid-template-columns: 50% 50%;
    row-gap: 5rem;

  }

  /* Footer navigation items flex container */

  .footer-nav {
    display: flex;
    flex-direction: column;
    column-gap: 2rem;
    row-gap: 1rem;
    margin-left: auto;
    margin-right: auto;
    align-items: center;

    @media only screen and (min-width: 576px) {
      flex-direction: row;
    }

    @media only screen and (min-width: 824px) {
      margin-left: 0rem;
      margin-right: auto;
      column-gap: 4rem;
    }
  }

  /* Footer navigation items */

  .footer-nav-item {
    width: fit-content;
    text-align: center;
    font-weight: var(--font-weight);

    @media only screen and (min-width: 576px) {
      width: fit-content;
    }
  }

  /* Footer social media icon container */

  .footer-social-icons {

    text-align: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    gap: 2rem;

    a {
      border: none;
    }

    @media only screen and (min-width: 824px) {
      margin-right: 0;
    }
  }

  /* footer social media icons */

  .icon-social {
    font-size: 24px;
    line-height: 1.5;
    margin: 0px;
    transition:
      scale var(--transistion-time) ease-in-out,
      color var(--transistion-time) ease-in-out;

    &:hover {
      scale: 1.3;
    }
  }
}

/*++++++++++++++++++++++++++++++*/
/*                              */
/*     Scroll to Top Button     */
/*                              */
/*++++++++++++++++++++++++++++++*/

#toTopButton {
  display: none;
  /* Hidden by default */
  height: 44px;
  width: 44px;
  position: fixed;
  bottom: 2rem;
  right: 3vw;
  z-index: 99;
  padding-top: 2px;
  text-align: center;
  border: solid 2px;
  border-radius: 50%;
  background-color: var(--color-decoration);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-mobile);
  opacity: 0.8;
  transition: var(--transistion-time);

  &:hover {
    background-color: var(--color-highlight);
    opacity: 1;
    border-color: var(--color-highlight);
    color: var(--white);
  }
}