* {
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
}

h1, h2, h3, h5, a {
  color: var(--orange);
}

h1 {
  font-size: 30px;
  padding: 54px;
  font-weight: 700;
  letter-spacing: 4.5px;
}

h2 {
  font-size: 30px;
  padding: 38px;
  font-weight: 500;
  letter-spacing: 3px;
}

h3 {
  font-size: 26px;
  font-weight: 300;
  color: var(--black);
  letter-spacing: 3px;
}

h4 {
  color: var(--darkGrey);
  font-size: 15px;
  padding: 0 0 8px 0;
  font-weight: 500;
  letter-spacing: 3px;
}

h5 {
  font-size: 20px;
  padding: 0 0 4px 0;
  font-weight: 500;
  letter-spacing: 3px;
}

h6 {
  color: var(--darkGrey);
  font-size: 12px;
  padding: 0 0 12px 0;
  font-weight: 300;
  letter-spacing: 3px;
}

a {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.4px;
  transition: 0.15s;
}

p, address {
  font-size: 24px;
  line-height: 2;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--black);
}

label {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 2;
  color: var(--black);
}

/* MARK: Custom properties */
/* MARK: Colors */
:root {
  --black: rgba(0%, 0%, 0%, 100%);
  --darkGrey: rgba(45%, 45%, 45%, 100%);
  --darkerGrey: rgba(35%, 35%, 35%, 100%);
  --mediumGrey: rgba(75%, 75%, 75%, 100%);
  --darkestGrey: rgba(5%, 5%, 5%, 100%);
  --grey: rgba(92%, 92%, 92%, 100%);
  --lightGrey: rgba(96%, 96%, 96%, 100%);
  --white: rgba(100%, 100%, 100%, 100%);

  --orange: rgba(100%, 50%, 11%, 100%);
  --orangeDark: rgba(85%, 40%, 6%, 100%);
  --orangePale: rgba(100%, 70%, 41%, 100%);
  --orangeTransparent: rgba(100%, 50%, 11%, 97%);
  --orangeMoreTransparent: rgba(100%, 50%, 11%, 70%);

  --uglyYellow: rgba(84%, 78%, 0%, 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: rgba(100%, 100%, 100%, 100%);
    --darkGrey: rgba(55%, 55%, 55%, 100%);
    --mediumGrey: rgba(25%, 25%, 25%, 100%);
    --darkestGrey: rgba(95%, 95%, 95%, 100%);
    --grey: rgba(8%, 8%, 8%, 100%);
    --lightGrey: rgba(4%, 4%, 4%, 100%);
    --white: rgba(0%, 0%, 0%, 100%);
  }
}

/* MARK: Fade animations for main.css file */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.navbar-container {
  z-index: 3;
  display: inline;
  position: fixed;
  top: 0;
  width: 100%;
  height: 74px;
  background-color: var(--white);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.18), 0 1px 8px 0 rgba(0, 0, 0, 0.18);
}

.navbar-max-width-items-container {
  position: relative;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.navbar-slim-width-container {
  position: relative;
  margin-left: 18px;
  margin-right: 18px;
}

.navbar-max-width-items-container img {
  float: left;
  width: 52px;
  margin-left: -10px; /* MARK: margin-left set to -10px to compensate for navbar-max-width-items-container's img tag's padding, which is 10px */
  padding: 8.805px 10px; /* MARK: Peculiar top and bottom padding set to handle image's (logo's) slightly awkward crop */
}

.navbar-max-width-items-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar-max-width-items-container li {
  float: left;
}

.navbar-max-width-items-container li a {
  display: block;
  text-align: center;
  padding: 26px 10px;
  text-decoration: none;
  color: var(--darkestGrey);
}

.list-items-container {
  float: right;
  margin-right: -10px; /* MARK: margin-right set to -10px to compensate for navbar-max-width-items-container's li and a tags' padding, which is 10px */
}

.overlay, .hamburger-menu {
  display: none;
  visibility: hidden;
}

a.anchor {
  display: block;
  position: relative;
  top: -74px; /* MARK: Anchor's top set to -74px to compensate for navbar's height when user clicks on links in navbar */
  visibility: hidden;
}

.main-max-width-container {
  position: relative;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.main-slim-width-container {
  position: relative;
  margin-left: 18px;
  margin-right: 18px;
}

#main-navbar-height-compensation-container {
  margin-top: 74px;
}

.intro-container {
  position: relative;
  display: inline-block;
  padding-bottom: 60px;
}

.main-logo {
  height: 320px;
  position: relative;
  opacity: 0;
  animation: fade-in 0.9s ease-in forwards;
}

.main-logo img, .supplier-logo img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 540px;
}

.intro-text-computer-tablet {
  position: relative;
  float: left;
  width: 40%;
}

.intro-text-smartphone {
  display: none;
  visibility: hidden;
}

.intro-text-computer-tablet a {
  font-size: 24px;
}

.contact-form {
  margin-top: 4px;
  position: relative;
  float: right;
  width: 40%;
}

.contact-form label {
  font-size: 15px;
  font-weight: 500;
}

.contact-form input::placeholder, textarea::placeholder {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 2px;
}

input[type=text], input[type=email], textarea {
  margin-top: 3px;
  width: 100%;
  margin-bottom: 20px;
  padding: 10.5px;
  font-size: 17px;
  letter-spacing: 2px;
  transform: translateY(-2px);
  background-color: var(--grey);
  color: var(--black);
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

input:focus, textarea:focus {
  outline: none !important;
  border: 2px solid var(--orange);
}

input:focus {
  margin-bottom: 16px;
}

input, textarea {
  resize: none;
}

textarea:focus {
  margin-bottom: 20px;
}

button {
  display: inline;
  background-color: var(--orange);
  font-size: 20px;
  color: white; /* MARK: Keep color on orange buttons etc. white in both light and dark modes, ie no custom white color */
  width: 100%;
  margin-bottom: 20px;
  padding: 9px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.22), 0 1.5px 4px 0 rgba(0, 0, 0, 0.22);
}

@keyframes top-cricle {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(335deg);
  }
}

@keyframes bottom-cricle {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(345deg);
  }
}

#spinner-container {
  display: none;
  line-height: 24px;

  #spinner {
    padding-bottom: 2px;
    padding-right: 26px;

    & > span {
      display: inline-block;
      position: absolute;
      border-radius: 100px;
      padding: 10px;
      border: 3px solid transparent;

      animation: top-cricle 1s ease-in-out infinite;
      border-top: 3px solid var(--white);

      &:nth-child(1) {
        animation-delay: -0.15s;
      }
    }
  }
}

.contact-form p, .contact-form a {
  font-size: 15px;
}

.full-width-container {
  position: relative;
  display: inline-block;
  margin-top: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--grey);
  padding-bottom: 60px;
}

.blog-post-container {
  width: 49%;
  height: 185px;
  margin: 2px;
  padding: 30px 20px;
  background-color: var(--lightGrey);

  #spinner0,
  #spinner1,
  #spinner2,
  #spinner3,
  #spinner4,
  #spinner5,
  #spinner6,
  #spinner7,
  #spinner8,
  #spinner9 {
    & > span {
      display: inline-block;
      position: relative;
      border-radius: 300px;
      padding: 20px;
      border: 3px solid transparent;
      top: 29.5px;
      left: 227.4765px;
      animation: top-cricle 1s ease-in-out infinite;
      border-top: 3px solid var(--orange);
      &:nth-child(1) {
        animation-delay: -0.15s;
      }
    }
  }
}

.blog-post-container p, a {
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: normal;
}

.post-title {
  font-size: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

#left-blog-post-article {
  float: left;
}

#right-blog-post-article {
  float: right;
}

.blog-link-computer-tablet {
  display: inline;
  float: left;
  padding: 20.5px 0 20.5px 22px;
}

.blog-link-computer-tablet a {
  font-size: 15px;
}

.blog-link-smartphone {
  display: none;
}

.pagination {
  display: inline;
  position: relative;
  float: right;
  padding: 16px 0;
}

.pagination a {
  color: var(--black);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 300;
  font-size: 14px;
}

#active {
  background-color: var(--orange);
  color: white; /* MARK: Keep color on orange buttons etc. white in both light and dark modes, ie no custom white color */
  border-radius: 5px;
}

#notActive {
  background-color: var(--grey);
  color: var(--black);
  border-radius: 5px;
}

.suppliers-container {
  position: relative;
  display: inline-block;
  padding-bottom: 60px;
}

#ampleon-logo img {
 width: 280px;
}

#skyworks-logo img {
 width: 320px;
}

#ctscorp-logo img {
  width: 130px;
}

#evissap-logo img {
  width: 170px;
}

.supplier-logo {
  height: 280px;
  position: relative;
}

.supplier-text p, .supplier-text a, .supplier-text address {
  font-size: 22px;
}

.supplier-headline h2 {
  padding: 24px 0;
}

.supplier-headline a {
  font-size: 22px;
}

.supplier-text {
  padding: 0;
}

.contact-container {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 60px;
}

.contact-items {
  padding-bottom: 30px;
}

.regular-contact-items {
  position: relative;
  display: inline-block;
  width: 50%;
}

.email-phone-address {
  position: relative;
  display: inline-block;
  float: left;
  width: 49%;
  text-align: right;
  padding-right: 10px;
}

.contact-responses {
  position: relative;
  display: inline-block;
  float: right;
  width: 51%;
  text-align: left;
  padding-left: 10px;
}

.contact-responses p, .contact-responses a, .contact-responses address {
  font-size: 20px;
}

.social-media-items {
  display: inline-block;
  float: right;
  width: 50%;
  text-align: center;
}

.social-media-items h3 {
  margin-left: auto;
  margin-right: auto;
}

.social-media-items img {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background-color: var(--orange);
  top: 20px;
  border-radius: 10px;
  box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.22), 0 1.5px 4px 0 rgba(0, 0, 0, 0.22);
}

.about-container {
  position: relative;
  display: inline-block;
  padding-bottom: 60px;
}

.about-container h2 {
  padding: 0 0 14px 0;
  color: var(--black);
  font-size: 22px;
}

.individual-profile {
  float: left;
  padding-bottom: 60px;
}

.individual-profile img {
  float: left;
  border-radius: 50%;
  margin-right: 40px;
}

.individual-profile p {
  font-size: 22px;
}

.section-info-text {
  position: relative;
}

.section-info-text a {
  font-size: 24px;
}

.footer-background-color {
  position: relative;
  width: 100%;
  background-color: var(--darkGrey);
}

.footer-container {
  position: relative;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding: 54px 0;
}

.footer-slim-width-container {
  position: relative;
  margin-left: 18px;
  margin-right: 18px;
}

.footer-container h1 {
  padding: 0;
  font-size: 20px;
}

.footer-container p, .footer-container a, .footer-container label, .footer-container address {
  padding: 0;
  font-size: 16px;
}

.footer-container h1, .footer-container p, .footer-container label, .footer-container address {
  color: var(--white);
}

.main-footer {
  display: flex;
  margin-bottom: 100px;
}

.column {
  padding-right: 120px;
}

.column li {
  line-height: 2;
}

.column li::marker {
  color: var(--white);
}

#first-column-width {
  width: 50%;
}

#second-column-width {
  width: 30%;
}

#third-column-width {
  width: 20%;
}

#third-column-width ul {
  margin-left: -18px;
}

.developer-footer {
  display: flex;
  margin-bottom: 40px;
}

.developer-footer-copyright {
  float: left;
  width: 50%;
}

.developer-footer-contact {
  float: right;
  width: 50%;
}

.scroll-to-top-btn-container {
  display: none;
  visibility: hidden;
}

/* MARK: Hover effects for pointing devices, ie. desktops/laptops */
@media (pointer: fine) {
  a:hover {
    color: var(--orangePale);
  }

  .navbar-max-width-items-container a:hover {
    color: var(--orange);
  }

  button:hover {
    background-color: var(--orangeDark);
    color: var(--white);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.18), 0 1px 4px 0 rgba(0, 0, 0, 0.18);
  }

  .pagination a:hover:not(.active) {
    background-color: var(--mediumGrey);
    color: var(--black);
    border-radius: 5px;
    transition: background-color .4s;
  }

  #notActive:hover, #prev:hover, #next:hover { 
    background-color: lightgrey;
    color: black;
    border-radius: 5px;
    transition: background-color .2s;
  }

  .social-media-items img:hover {
    background-color: var(--orangeDark);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.18), 0 1px 4px 0 rgba(0, 0, 0, 0.18);
  }
}

/* MARK: Tablet format */
@media only screen and (min-width: 641px) and (max-width: 1024px) {

  h3 {
    font-size: 18px;
  }

  a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
  }

  label {
    font-size: 16px;
  }

  p, address {
    font-size: 20px;
  }

  .navbar-container {
    height: 65px;
  }

  .navbar-max-width-items-container img {
    padding: 4.313px 10px; /* MARK: Peculiar top and bottom padding set to handle image's (logo's) slightly awkward crop */
  }

  .navbar-max-width-items-container li a {
    padding: 24px 10px;
  }

  a.anchor {
    display: block;
    position: relative;
    top: -65px; /* MARK: Anchor's top set to -65px to compensate for navbar's height when user clicks on links in navbar */
    visibility: hidden;
  }

  .intro-text-computer-tablet {
    width: 46%;
  }

  .intro-text-computer-tablet a {
    font-size: 20px;
  }

  .contact-form {
    width: 46%;
  }

  .supplier-text p, .supplier-text a, .supplier-text address {
    font-size: 18px;
  }

  .email-phone-address {
    width: 33%;
    padding-right: 3px;
  }

  .email-phone-address label {
    font-size: 15px;
  }

  .contact-responses {
    float: left;
    width: 67%;
    padding-left: 3px;
  }

  .contact-responses p, .contact-responses a, .contact-responses address {
    font-size: 15px;
  }

  .individual-profile h2 {
    padding: 0 0 10px 0;
    font-size: 18px;
  }

  .individual-profile p {
    font-size: 18px;
  }

  .section-info-text a {
    font-size: 20px;
  }

  .footer-container h1 {
    font-size: 18px;
    line-height: 2.0;
  }

  .footer-container p, .footer-container a, .footer-container label, .footer-container address {
    font-size: 14px;
    line-height: 1.8;
  }

  .main-footer {
    display: inline-block;
  }

  .column {
    padding-bottom: 40px;
    padding-right: 0;
  }

  #first-column-width {
    position: relative;
    display: block;
    width: 100%;
  }

  #second-column-width {
    position: relative;
    display: inline-block;
    float: left;
    width: 50%;
  }

  #third-column-width {
    position: relative;
    display: inline-block;
    width: 50%;
  }  

  .developer-footer-copyright {
    position: relative;
    display: inline-block;
    width: 50%;
  }

  .developer-footer-contact {
    position: relative;
    display: inline-block;
    width: 50%;
  }
}

/* MARK: Smartphone format */
@media only screen and (max-width: 640px) {

  h1 {
    padding: 66px 0 40px 25px;
  }

  p, address, .intro-text-smartphone a {
    font-size: 18px;
  }

  .navbar-container {
    height: 60px;
  }

  .navbar-max-width-items-container img {
    position: fixed;
    float: left;
    margin-left: 50%;
    left: -21.0811px;  /* MARK: Negative left margin set to position logo horizontally in center of navbar */
    background-color: var(--white);
    padding: 6px 7.5px;  /* MARK: Peculiar top and bottom padding set to handle image's (logo's) slightly awkward crop */

    width: 42.1622px;
  }

  .list-items-container {
    display: none;
    visibility: hidden;
  }

  .overlay {
    display: inline-block;
    visibility: visible;
  }

  .overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    text-decoration: none;
    background-color: var(--orangeTransparent);
    overflow-y: hidden;
    transition: 0.3s;
  }

  .overlay a {
    text-decoration: none;
    font-size: 36px;
    display: block;
    transition: 0.3s;
  }

  .overlay-content {
    margin: 74px 20px 0 20px;
  }

  .overlay-content ul {
    padding: 0;
    list-style-type: none;
  }

  .overlay-content li {
    padding: 12px 0;
  }

  .overlay-content a {
    color: white; /* MARK: Keep color on orange buttons etc. white in both light and dark modes, ie no custom white color */
    border-bottom: solid 2px white;
  }

  .closebtn-container a {
    padding-top: 7px;
    padding-left: 17px;
    font-size: 26px;
  }

  .closebtn {
    display: block;
    position: relative;
    float: right;
    top: 7px;
    right: 7px;
    width: 48px;
    height: 47px;
    color: var(--orange);
    background-color: var(--white);
    border: none;
    border-radius: 4px;
    box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.22), 0 1.5px 4px 0 rgba(0, 0, 0, 0.22);
  }

  .hamburger-menu {
    display: inline-block;
    visibility: visible;
    float: right;
    font-size: 25px;
    margin-top: 7px;
    margin-right: 7px;
    padding: 5px 13px 10px 13px;
    color: var(--white);
    background-color: var(--orange);
    border: none;
    border-radius: 4px;
    box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.22), 0 1.5px 4px 0 rgba(0, 0, 0, 0.22);
  }

  a.anchor {
    display: block;
    position: relative;
    top: -60px; /* MARK: Anchor's top set to -60px to compensate for navbar's height when user clicks on links in navbar */
    visibility: hidden;
  }

  .main-logo {
    margin-top: -90px;
    margin-bottom: -90px;
  }

  .main-logo img {
    width: 80%;
  }

  .intro-container {
    display: block;
    width: 100%;
  }

  .intro-text-computer-tablet {
    display: none;
    visibility: hidden;
  }

  .intro-text-smartphone {
    display: inline-block;
    visibility: visible;
    float: none;
    width: 100%;
    padding: 0 0 30px 0;
  }

  .contact-form {
    display: inline-block;
    float: none;
    width: 100%;
  }

  .blog-post-container {
    width: 100%;
    margin: 2px 0;

    #spinner0,
    #spinner1,
    #spinner2,
    #spinner3,
    #spinner4,
    #spinner5,
    #spinner6,
    #spinner7,
    #spinner8,
    #spinner9 {
      & > span {
        left: 154px;
      }
    }
  }

  #left-blog-post-article {
    float: none;
  }

  #right-blog-post-article {
    float: none;
  }

  .blog-link-computer-tablet {
    display: none;
  }

  .blog-link-smartphone {
    display: block;
    padding: 20px 0 0 0;
    text-align: center;
  }

  .blog-link-smartphone a {
    font-size: 16px;
  }

  .pagination {
    float: none;
    display: flex;
    justify-content: center;
  }

  #ampleon-logo img {
    width: 200px;
  }

  #skyworks-logo img {
    width: 250px;
  }

  #ctscorp-logo img {
    width: 100px;
  }

  #evissap-logo img {
    width: 150px;
  }

  .supplier-logo {
    height: 180px;
  }

  .supplier-text p, .supplier-text a, .supplier-text address {
    font-size: 16px;
  }

  .supplier-headline h2 {
    padding: 20px 0;
  }

  .supplier-headline a {
    font-size: 18px;
  }

  .contact-items {
    position: relative;
    display: block;
    padding-bottom: 60px;
  }

  .regular-contact-items {
    width: 100%;
  }

  .email-phone-address {
    width: 40%;
    padding-right: 6px;
  }

  .contact-responses {
    width: 60%;
    padding-left: 6px;
  }

  .email-phone-address label {
    font-size: 18px;
  }

  .contact-responses p, .contact-responses a, .contact-responses address {
    font-size: 18px;
    float: left;
  }

  .social-media-items {
    position: relative;
    display: block;
    float: none;
    width: 100%;
    padding-top: 30px;
  }

  .individual-profile {
    margin-top: 20px;
  }

  .individual-profile img {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }

  .individual-profile h2 {
    padding: 0 0 16px 0;
    color: var(--black);
    font-size: 22px;
  }

  .individual-profile h4 {
    font-size: 12px;
    padding-bottom: 10px;
  }

  .individual-profile p {
    font-size: 18px;
  }

  .section-info-text a {
    font-size: 18px;
  }

  .footer-container h1 {
    font-size: 18px;
  }

  .footer-container p, .footer-container a, .footer-container label, .footer-container address {
    font-size: 15px;
    line-height: 1.6;
  }

  .main-footer {
    display: block;
    padding-left: 0;
  }

  .column {
    width: 100%;
    padding-right: 16px;
  }

  #first-column-width {
    width: 100%;
  }

  #second-column-width {
    width: 100%;
  }

  #third-column-width {
    width: 100%;
  }

  #third-column-width ul {
    margin-left: -22px;
  }

  .developer-footer {
    display: inline-block;
    width: 100%;
    padding-right: 0;
  }

  .developer-footer p, .developer-footer a {
    font-size: 15px;
  }

  .developer-footer-copyright {
    width: 100%;
  }

  .developer-footer-contact {
    float: left;
    width: 100%;
  }

  .scroll-to-top-btn-container {
    display: block;
    visibility: visible;
  }

  #scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 60px;
    height: 60px;
    padding-left: 10px;
    z-index: 1;
    background-color: var(--orangeMoreTransparent);
    font-size: 35px;
    color: var(--white);
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.22), 0 1.5px 4px 0 rgba(0, 0, 0, 0.22);
  }

  .scroll-to-top-btn-container button {
    padding-bottom: 5px;
    -webkit-padding-before: 5px;
    font-family: 'Lato', sans-serif;
  }

  @-moz-document url-prefix() {
    .scroll-to-top-btn-container button {
      padding-top: 0;
    }
  }

  @-moz-document url-prefix() {
    #scrollToTopBtn {
      padding-bottom: 10px;
    }
  }
}