:root, .light{
  --bg-color: #f6f6f6;
  --b-g-color: #fff;
  --color-text: #282828;
  --header-color: rgba(255, 255, 255, 0.9);
  --button-color: #282828;
  --tx-color: #fff;
  --active-color: #f6f6f6;
  --scrollbar-color: #cccccc;
}
.dark{
  --bg-color: #181818;
  --b-g-color: #242526;
  --color-text: #fff;
  --header-color: rgb(36, 37, 38, 0.9);
  --button-color: #fff;
  --tx-color: #282828;
  --active-color: #2c2d2e;
  --scrollbar-color: #2c2d2e;
}
::-webkit-scrollbar{
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track{
  border-radius: 6px;
}
::-webkit-scrollbar-thumb{
  border-radius: 6px;
  background-color: var(--scrollbar-color);
}
html{
  scroll-behavior: smooth;
}
body{
  padding: 0;
  margin: 0;
  font-family: Raleway;
  overflow-x: hidden;
  background-color: var(--bg-color);
}
body.nav-open{
  overflow: hidden;
}
.bi-logo-wrapper{
  width: 57px;
  margin: 0;
  position: absolute;
  padding-top: 2px;
  z-index: 1;
}
.bi-logo{
  display: block;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}
.bi-logo:hover{
  opacity: 0.9;
}
header{
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 50px;
  width: 100%;
  box-sizing: border-box;
  height: 61px;
  transition: 0.4s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
header.active{
  background-color: var(--header-color);
}
header nav{
  float: left;
  position: absolute;
  top: 5px;
  right: 50px;
}
header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
header nav ul li {
  list-style: none;
  margin: 0px 2px;
}
header nav ul li::after{
  content: "";
  display: block;
  background-color: #fff;
  height: 2px;
  width: 0%;
  border-radius: 20px;
  transition: width 0.3s, opacity 0.3s;
  transform: translateY(3px);
  opacity: 0;
}
header nav ul li:hover::after{
  width: 100%;
  opacity: 1;
}
header nav ul li:nth-child(1)::after{
  content: "";
  display: none;
}
header nav ul li.color-change.move::after{
  content: "";
  display: block;
}
header nav ul li a{
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  display: block;
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}
header nav ul li a.color-change{
  color: var(--color-text);
}
.active-line{
  background-color: #fff;
  height: 2px;
  width: 100%;
  border-radius: 20px;
  transition: transform 0.3s;
  transform: translateY(3px);
}
header nav ul li a:hover + .hover-line{
  width: 100%;
}
.active-line.color-change, header nav ul li.color-change::after{
  background-color: var(--color-text);
}
.active-line.color-change.move{
  width: 114%;
  /*transform: translateX(265px);*/
  transform: translateX(373px) translateY(3px);
}
.menu__toggler{
  position: fixed;
  top: 10px;
  left: 16px;
  z-index: 9999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: none;
  justify-content: center;
  padding-top: 14px;
  -webkit-tap-highlight-color: transparent;
}
span.menu,
span.menu::after,
span.menu::before{
  position: absolute;
  content: '';
  width: 23px;
  height: 1.5px;
  background: #fafafa;
  border-radius: 20px;
  transition: 500ms cubic-bezier(0.77,0,0.175, 1);
}
span.menu::before{
  top: -8px;
}
span.menu::after{
  top: 8px;
}
.menu__toggler.active > span.menu{
  background: transparent;

}
.menu__toggler.active > span.menu::after,
.menu__toggler.active > span.menu::before{
  background: #fff;
  top: 0;
}
.menu__toggler.active > span.menu.color-change::after,
.menu__toggler.active > span.menu.color-change::before{
  background: var(--color-text);
}
.menu__toggler.active > span.menu::before{
  transform: rotate(-225deg);
}
.menu__toggler.active > span.menu::after{
  transform: rotate(225deg);
}
.menu.color-change, .menu.color-change::after, .menu.color-change::before{
  background-color: var(--color-text);
}
@media (max-width: 600px){
  .menu__toggler{
    display: flex;
  }
  .bi-logo-wrapper{
    width: 42px;
    padding-top: 3px;
  }
  .logo{
    height: 42px;
    width: 42px;
  }
   header{
   position: relatieve;
   height: 50px;
  }  
   .menu-toggle{
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
 }
   .menu-toggle:hover{
    opacity: 0.8;
 }
   header nav{
   position: absolute;
   width: 60%;
   height: calc(100vh - 0px);
   background: var(--b-g-color);
   top: 0px;
   left: -45%;
   transition: 0.5s;
   text-align: left;
   opacity: 0;
  }
   header nav.active{
   transform: translateX(75%);
   opacity: 1;
   }
   header nav ul{
    display: block;
    padding-top: 70px;
    transform: translateY(80px);
    -webkit-transform: translateY(80px);
    opacity: 0;
  }
  header nav.active ul{
    transform: translate(0px);
    -webkit-transform: translate(0px);
    transition: transform 1s, opacity 1s;
    opacity: 1;
    transition-delay: 0.2s;
    padding-left: 10px;
    padding-right: 10px;
  }
   header nav ul li a{
    font-size: 16px;
    color: var(--color-text);
  }
  header nav ul li a.active{
    background-color: var(--active-color);
    border-radius: 10px;
  }
  header nav ul li a.active.fadeOut{
    background-color: unset;
  }
  #link.fadeIn{
    background-color: var(--active-color);
  }
  .menu__toggler.active > span.menu::after,
  .menu__toggler.active > span.menu::before{
  background: var(--color-text);
  }
  .active-line, .active-line.color-change{
    display: none;
  }
  header nav ul li::after{
    display: none;
    content: "";
  }
}
.menu-toggle{
  color: #fff;
  float: left;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
.welcome-wrapper{
  height: 1350px;
  background-color: #000;
  text-align: center;
}
.welcome-wrapper.fadeIn{
  background-color: var(--bg-color);
}
.image-banner{
  object-fit: cover;
  height: 100vh;
  width: 100%;
  opacity: 0.45;
  position: sticky;
  position: -webkit-sticky;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
}
.bg-1{
  background-image: url('https://bi-cdn-images.bonaireinfo.org/background-1.webp');
  background-position: center;
}
.bg-2{
  background-image: url('https://bi-cdn-images.bonaireinfo.org/background-2.webp');
}
.bg-3{
  background-image: url('https://bi-cdn-images.bonaireinfo.org/background-6.webp');
  background-position: center;
}
.bg-4{
  background-image: url('https://bi-cdn-images.bonaireinfo.org/bg-image.webp');
}
.bg-5{
  background-image: url('https://bi-cdn-images.bonaireinfo.org/background-4.webp');
  background-position: center;
}
.bg-6{
  background-image: url('https://bi-cdn-images.bonaireinfo.org/background-5.jpg');
  background-position: center;
}
.welcome-text-wrapper{
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
}
.welcome-text-wrapper h1{
  color: #fff;
  font-size: 63px;
  font-weight: 500;
  padding-left: 30px;
  padding-right: 30px;
}
.arrow-animation{
  position: absolute;
  top: 80%;
  width: 100%;
  text-align: center;
  animation: arrow 2s ease-in-out infinite;
}
.arrow{
  height: 55px;
  width: 55px;
}
@keyframes arrow {
  0%{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);

  }
  50%{
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
  }
  100%{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}
.info-text-wrapper{
   position: absolute;
   width: 100%;
   top: 80%;
   opacity: 0;
}
.info-text-wrapper h1{
   text-align: center;
   color: #fff;
   font-size: 36px;
   font-weight: normal;
   margin-bottom: 15px;
   margin-top: 15px;
   letter-spacing: 0.05em;
   padding-top: 50px;
}
.info2-text-wrapper{
  position: absolute;
  width: 100%;
  top: 125%;
  opacity: 0;
}
.info2-text-wrapper h1{
  text-align: center;
  color: #fff;
  font-size: 36px;
  font-weight: normal;
  margin-bottom: 15px;
  margin-top: 15px;
  letter-spacing: 0.05em;
  padding-top: 50px;
  margin-left: 70px;
  margin-right: 70px;
}
.sunrise-sunset-wrapper{
  padding-top: 25px;
  max-width: 1020px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin: auto;
}
.sunrise-sunset{
  background: var(--b-g-color);
  border-radius: 30px;
  text-align: center;
  width: 100%;
}
.todays-date{
  padding-top: 15px;
}
.todays-text{
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--color-text);
}
.sunrise-wrapper, .sunset-wrapper{
  display: inline-block;
  padding-bottom: 15px;
}
.sunrise-time, .sunset-time{
  font-weight: normal;
  font-size: 17px;
  color: var(--color-text);
}
.sunrise-icon, .sunset-icon{
  height: 35px;
  width: 140px;
}
.sunrise-arrow, .sunset-arrow{
  fill: var(--color-text);
}
.info-column{
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding-top: 25px;
  overflow: hidden;
}
.col{
  padding: 0px 50px;
  max-width: 500px;
  box-sizing: border-box;
  flex: 100%;
  background-color: var(--b-g-color);
  border-radius: 30px;
  margin-right: 12px;
}
.col1{
  padding: 0px 50px;
  max-width: 500px;
  box-sizing: border-box;
  flex: 100%;
  background-color: var(--b-g-color);
  border-radius: 30px;
  margin-left: 12px;
}
.table h1{
  margin-bottom: 40px;
  margin-top: 40px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}
.table h2{
  font-size: 17px;
  color: var(--color-text);
  font-weight: normal;
  line-height: 1.5em;
  margin-bottom: 90px;
}
.table h3{
  font-size: 17px;
  color: var(--color-text);
  font-weight: normal;
  line-height: 1.5em;
  margin-bottom: 115px;
}
.table ul{
  padding: 10px 0px;
  list-style: none;
  margin: 40px 0px;
}
.table a{
  text-decoration: none;
  color: var(--tx-color);
  background-color: var(--button-color);
  border-radius: 30px;
  padding: 12px 0px;
  width: 212px;
  font-size: 16px;
  display: inline-block;
  font-weight: 600;
  transform: scale(1);
  transition: 0.3s transform ease-in-out;
  animation: jelly 6s ease-in-out infinite;
  -webkit-animation: jelly 6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
@keyframes jelly {
    0% {
        -webkit-transform: matrix(1,0,0,1,0,0);
        transform: matrix(1,0,0,1,0,0)
    }

    50% {
        -webkit-transform: matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1);
        transform: matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1)
    }

    to {
        -webkit-transform: matrix(1,0,0,1,0,0);
        transform: matrix(1,0,0,1,0,0)
    }
}
@-webkit-keyframes jelly {
    0% {
        -webkit-transform: matrix(1,0,0,1,0,0);
        transform: matrix(1,0,0,1,0,0)
    }

    50% {
        -webkit-transform: matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1);
        transform: matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1)
    }

    to {
        -webkit-transform: matrix(1,0,0,1,0,0);
        transform: matrix(1,0,0,1,0,0)
    }
}
.info-column-2{
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}
.col2{
  padding: 0px 50px;
  max-width: 1020px;
  box-sizing: border-box;
  flex: 100%;
  background-color: var(--b-g-color);
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: cover;
}
.table h4{
  margin-bottom: 40px;
  margin-top: 40px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}
.popular-categories-wrapper{
    padding-bottom: 60px;
}
.row-categories{
    display: flex;
    justify-content: center;
}
.category{
    padding: 20px;
    background: var(--active-color);
    border-radius: 20px;
    margin: 10px;
    width: 200px;
}
.category-name{
    font-size: 25px;
    font-weight: 600;
    color: var(--color-text);
}
.category-icon{
    padding: 20px 0px;
}
.category-icon svg{
    fill: var(--color-text);
}
.link{
    padding: 10px 0px !important;
    width: 90% !important;
}
.lt{
    padding-top: 0px;
}
/*@media (max-width: 420px){
    .category{
        width: unset;
    }
}*/
@media (max-width: 800px){
  .info2-text-wrapper h1{ 
    font-size: 30px;
  }
}
@media (max-width: 600px){
  .welcome-text-wrapper h1{
    font-size: 42px;
  }
  @keyframes drop {
    0%{
      opacity: 0;
      transform: translateY(600px);
    }
    100%{
      opacity: 1;
      transform: translateY(0px);
    }
  }
  @-webkit-keyframes drop {
    0%{
      opacity: 0;
      transform: translateY(600px);
    }
    100%{
      opacity: 1;
      transform: translateY(0px);
    }
  }
  .information-text{
    top: 450px;
    height: 160px;
  }
  .info-text-wrapper h1{
    font-size: 25px;
    padding-left: 15px;
    padding-right: 15px;

  }
  .info2-text-wrapper h1{
    font-size: 21px;
    margin-left: 25px;
    margin-right: 25px;
  }
  .col{
    padding: 0px 25px;
    margin-left: 25px;
    margin-bottom: 12px;
  }
  .col1{
    padding: 0px 25px;
    margin-right: 25px;
    margin-top: 12px;
  }
  .col2{
    padding: 0px 25px;
    margin-left: 25px;
    margin-bottom: 12px;
    margin-right: 25px;
  }
  .table ul{
    margin: 20px 0px;
  }
  .table a{
    width: 150px;
    display: inline-block;
    padding: 10px 0px;
  }
  .table h1{
    font-size: 32px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-weight: 600;
  }
  .table h4{
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 32px;
    font-weight: 600;
  }
  .table h2{
    margin-bottom: 60px;
  }
  .table h3{
    margin-bottom: 60px;
  }
}
@media (max-width: 1050px){
  .col{
    max-width: 400px;
    padding: 0px 25px;
  }
  .col1{
    max-width: 400px;
    padding: 0px 25px;
  }
  .col2{
    max-width: 820px;
  }
  .sunrise-sunset{
    max-width: 820px;
  }
}
@media (max-width: 1025px){
   .table a{
        animation: none;
   }
   .table a:hover{
       transform: scale(1.05);
   }
}
@media (max-width: 865px){
  .col{
    max-width: 300px;
  }
  .col1{
    max-width: 300px;
  }
  .col2{
    max-width: 620px;
  }
  .table h2{
    margin-bottom: 65px;
  }
  .table h3{
    margin-bottom: 85px;
  }
  .table a{
    width: 200px;
  }
  .sunrise-sunset{
    max-width: 620px;
  }
  .row-categories{
      display: block;
  }
  .category{
      margin: 15px auto;
  }
  .popular-categories-wrapper {
      padding-bottom: 30px;
  }
}
@media (max-width: 655px){
  .col{
    max-width: 280px;
  }
  .col1{
    max-width: 280px;
  }
  .col2{
    max-width: 580px;
  }
  .table h2{
    margin-bottom: 90px;
  }
  .table a{
   width: 170px;
  }
  .sunrise-sunset{
    max-width: 580px;
  }
  .category-name{
      font-size: 20px;
  }
  .category-icon svg{
      height: 40px;
  }
}
@media (max-width: 600px){
  .col{
    max-width: none;
    margin-right: 25px;
  }
  .col1{
    max-width: none;
    margin-left: 25px;
  }
  .sunrise-sunset-wrapper{
    padding-left: 25px;
    padding-right: 25px;
  }
  .todays-text{
    font-size: 21px;
    font-weight: 600;
  }
  .link{
      width: 170px !important;
  }
}
@media (max-width: 825px){
  .welcome-text{
    height: 800px;
  }
  .information-text{
    height: 200px;
  }
}
@media (max-width: 646px){
  .welcome-text{
     height: 820px;
  }
  .information-text{
     height: 220px;
  }
}
@media (max-width: 600px){
    .welcome-text{
      height: 610px;
    }
    .information-text{
      top: 450px;
      height: 160px;
     }
}
.contact-us{
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: var(--b-g-color);
  border-radius: 40px 40px 0px 0px;
}
.contact-us h1{
  margin-top: 80px;
  margin-bottom: 80px;
  font-size: 60px;
  color: var(--color-text);
  font-weight: 700;
}
.contact-info-wrapper{
  width: 100%;
}
.map{
  width: 100%;
}
#contact-form{
  float: right;
  padding-right: 120px;
  margin-bottom: 30px;
}
.contact-info h2{
  color: var(--color-text);
  font-weight: normal;
  font-size: 22px;
  line-height: 1.5em;
  float: left;
  padding-left: 120px;
  margin-top: 60px;
}
.contact-info a{
  color: var(--color-text);
  font-weight: normal;
  font-size: 22px;
  line-height: 1.5em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.contact-info a:hover{
  text-decoration: underline;
}
.closed{
  color: #d93025;
  font-weight: 500;
}
.open{
  color: #188038;
  font-weight: 500;
}
.form-control{
  font-family: Raleway;
  border: 3px solid transparent;
  background: #fff;
  outline: none;
  border-radius: 12px;
  padding: 14px;
  margin: 5px;
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
  width: 340px;
  font-size: 15px;
  -webkit-appearance: none;
}
.form-message{
  color: #188038;
}
input:focus{
  border: 3px solid rgba(0, 125, 250, .6);
}
textarea:focus{
  border: 3px solid rgba(0, 125, 250, .6);
}
button{
  text-decoration: none;
  color: var(--tx-color);
  background-color: var(--button-color);
  border-radius: 30px 30px 30px 30px;
  padding: 12px 0px;
  width: 140px;
  font-size: 16px;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  transform: scale(1);
  transition: 0.3s transform ease-in-out;
  -webkit-appearance: none;
  animation: jelly 6s ease-in-out infinite;
  -webkit-animation: jelly 6s ease-in-out infinite;
}
@media (max-width: 1025px){
  button{
   animation: none;
  }
  button:hover{
      transform: scale(1.05);
  }
}
footer{
  display: block;
  width: 100%;
  background-color: var(--b-g-color);
}
.copyright-text{
  display: block;
  padding: 0px 80px;
  height: 100px
}
.copyright-text h1{
  font-size: 16px;
  font-weight: normal;
  float: left;
  margin-top: 40px;
  color: var(--color-text);
}
.social-bar{
  display: block;
  padding-top: 40px;
  float: right;
  -webkit-tap-highlight-color: transparent;
}
.social-bar a{
  color: var(--color-text);
}
@media (max-width: 600px){
  .copyright-text{
    padding: 0px 80px;
    justify-content: center;
    float: none;
    text-align: center;
    padding: 0px;
    height: 125px;
  }
  .copyright-text h1{
    margin-top: 0px;
    position: relative;
    top: 80px;
    float: none;
  }
  .social-bar{
    float: none;
    font-size: 23px;
    padding: 0px;
  }
}
i.fab.fa-facebook::before{
  padding: 0px 10px;
  -webkit-tap-highlight-color: transparent;
}
i.fab.fa-twitter::before{
  padding: 0px 10px;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1035px){
  .contact-info-wrapper{
    text-align: center;
  }
  .contact-info h2{
    float: none;
    padding-left: 0px;
    margin-top: 0px;
  }
  #contact-form{
    float: none;
    padding-right: 0px;
    margin-top: 30px;
  }
}
@media (max-width: 600px){
  .contact-us h1{
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 37px;
    font-weight: 600;
  }
  .contact-info h2{
    font-size: 17px;
  }
  .contact-info a{
    font-size: 17px;
  }
  .form-control{
      width: 280px;
  }
  .map{
    padding: 0px 20px;
  }
  button{
    padding: 10px 0px;
  }
}
@media (max-width: 350px){
  .form-control{
    width: 240px;
  }
}
.toggle{
  position: absolute;
  right: 50px;
  background: transparent;
  border: 2px solid #00151f;
  width: 45px;
  height: 20px;
  cursor: pointer;
  border-radius: 20px;
  transition: 0.5s;
}
.toggle:before{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #00151f;
  border-radius: 50%;
  transition: 0.5s;
}
.toggle.active:before{
  left: 27px;
}
.toggle.active{
  background: transparent;
  border: 2px solid #fff;
}
.toggle.active:before{
  left: 27px;
  background: #fff;
}
.theme-switch-wrapper {
  position: fixed;
  top: 75px;
  width: 300px;
  border-radius: 20px;
  right: 10px;
  background-color: var(--b-g-color);
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
  transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1), 0.2s transform cubic-bezier(0.4, 0, 0.2, 1), 0.2s visibility cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.6);
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}
.theme-switch-wrapper h3{
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
  margin-bottom: 10px;
  padding-top: 5px;
}
.appearance-section{
  cursor: pointer;  
  padding: 12px 0px;
  margin: 0px 12px;
  border-radius: 8px;
}
.appearance-section:hover{
  background-color: var(--active-color);
}
.appearance-section h2{
  font-weight: normal;
  font-size: 15px;
  margin-left: 50px;
  margin-bottom: 0px;
  margin-top: 0px;
  color: var(--color-text);
}
.appearance-section:last-child{
  margin-bottom: 10px;
}
.check-wrapper{
  display: block;
  position: absolute;
  padding-left: 15px;
  display: none;
}
.check-line{
  fill: var(--color-text);
}
.theme-switch-wrapper.active {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.dots{
  position: absolute;
  right: 20px;
  float: right;
  width: 20px;
  height: 50px;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
.dots.color-change{
  color: var(--color-text);
}
.dots i.fas.fa-ellipsis-v{
  position: absolute;
  cursor: pointer;
  font-size: 22px;
  padding: 20px 6px;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch-wrapper h1{
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  left: 25px;
  width: 120px;
  top: 33px;
  color: var(--color-text);
}
.enale-darkmode-wrapper{
  background: #1a73e8;
  position: fixed;
  top: 72px;
  border-radius: 10px;
  width: 300px;
  float: revert;
  right: 10px;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease;
}
.enale-darkmode-wrapper.show{
  visibility: visible;
  opacity: 1;
}
.enable-message{
  padding: 5px 20px;
}
.enable-message h1{
  color: #fff;
  font-size: 12px;
  font-weight: normal;
}
.wrapper-arrow{
  width: 14px;
  height: 14px;
  display: block;
  background: #1a73e8;
  position: absolute;
  transform: rotate(45deg);
  top: -6px;
  float: right;
  right: 13.5px;
  border-radius: 2px;
}
@media (max-width: 600px){
  .theme-switch-wrapper {
    width: 250px;
  }
  .theme-switch-wrapper h1{
    top: 22px;
  }
  .theme-switch-wrapper{
    top: 60px;
  }
  .dots i.fas.fa-ellipsis-v{
    padding: 14px 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .appearance-section:hover{
    background-color: unset;
  }
  .enale-darkmode-wrapper{
    top: 62px;
  }
}
.important-message{
  background-color: #c01717;
  text-align: center;
  margin-top: 25px;
  margin-left: 25px;
  margin-right: 25px;
  border-radius: 12px;
}
.important-message h1{
  color: #fff;
  font-size: 17px;
  font-weight: normal;
  margin: 0;
  padding: 20px 50px;
}
@media (max-width: 600px){
  .important-message h1{
    font-size: 15px;
    padding: 20px 30px;
  }
  .important-message{
    margin-left: 10px;
    margin-right: 10px;
    /*border-radius: unset;*/
  }
}
.corona-page-link{
  width: 100%;
  position: absolute;
  display: block;
  height: 60px;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 789px){
  .corona-page-link{
      height: 80px;
  }
}
@media (max-width: 372px){
  .corona-page-link{
      height: 94px;
  }
}
.backdrop-background{
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
  z-index: 2;
  visibility: hidden;
}
.backdrop-background.active{
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.3);
  visibility: visible;
}