/* Basic styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: sans-serif;
  background-image: url("../img/bg_pattern.png");
  background-attachment: fixed;
}
body::-webkit-scrollbar {
  background: #e5e1e2;
}
body::-webkit-scrollbar-thumb {
  background: #ffffff;
}
body::-webkit-scrollbar-thumb:hover {
  background: #4444489e;
}
body::-webkit-scrollbar-button {
  background: #ffffff;
}
body::-webkit-scrollbar-button:hover {
  background: #4444489e;
}

.bg_icons {
  background: url("../img/icons.png") -148px 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  animation: 4s linear infinite icons;
}

@keyframes icons {
0% {
    background: url("../img/icons.png") 0px 0;
}
100% {
    background: url("../img/icons.png") 408px -379px;
}
}

.home_button {
  background-image: url("../img/home.png");
  margin-top: 40px;
  margin-left: 40px;
  height: 93px;
  width: 90px;
  position: absolute;
  z-index: 4;
}

.home_button:active {
  background-image: url("../img/home_pressed.png");
  margin-top: 43px;
  margin-left: 40px;
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 4;
}


.about_us_bar {
  background-image: url("../img/about_us_bar.png");
  margin-top: 42px;
  margin-left: 100px;
  height: 91px;
  width: 489px;
  position: absolute;
  z-index: 3;
}

.banner {
  background: url("../img/main_banner.png");
  margin-top: 200px;
  margin-left: 100px;
  height: 500px;
  width: 800px;
  border-radius: 9px;
  position: absolute;
  z-index: 3;
  animation: 10s linear infinite main_banner;
}

@keyframes main_banner {
0% {
    background: url("../img/main_banner.png") 0px 0;
    width: 0px;
    margin-left: 100px;
}
5% {
    background: url("../img/main_banner.png") 0px 0;
    width: 800px;
    margin-left: 100px;
}
28% {
    background: url("../img/main_banner.png") 0px 0;
    width: 800px;
    margin-left: 100px;
}
33% {
    background: url("../img/main_banner.png") -800px 0;
    width: 0px;
    margin-left: 900px;
}
34% {
    background: url("../img/main_banner_unused.png") 0px 0;
    width: 0px;
    margin-left: 100px;
}
38% {
    background: url("../img/main_banner_unused.png") 0px 0;
    width: 800px;
    margin-left: 100px;
}
61% {
    background: url("../img/main_banner_unused.png") 0px 0;
    width: 800px;
    margin-left: 100px;
}
66% {
    background: url("../img/main_banner_unused.png") -800px 0;
    width: 0px;
    margin-left: 900px;
}
67% {
    background: url("../img/main_banner2.png") 0px 0;
    width: 0px;
    margin-left: 100px;
}
71% {
    background: url("../img/main_banner2.png") 0px 0;
    width: 800px;
    margin-left: 100px;
}
94% {
    background: url("../img/main_banner2.png") 0px 0;
    width: 800px;
    margin-left: 100px;
}
99% {
    background: url("../img/main_banner2.png") -800px 0;
    width: 0px;
    margin-left: 900px;
}
100% {
    background: url("../img/main_banner2.png") 0px 0;
    width: 0px;
    margin-left: 100px;
}
}

.banner_second {
  background: url("../img/second_banner.png");
  margin-top: 200px;
  margin-left: 920px;
  height: 0px;
  width: 400px;
  border-radius: 9px;
  position: absolute;
  z-index: 3;
  animation: 10s linear infinite second_banner;
  animation-delay: 200ms;
}

@keyframes second_banner {
0% {
    background: url("../img/second_banner2.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
5% {
    background: url("../img/second_banner2.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
28% {
    background: url("../img/second_banner2.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
33% {
    background: url("../img/second_banner2.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
34% {
    background: url("../img/second_banner.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
38% {
    background: url("../img/second_banner.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
61% {
    background: url("../img/second_banner.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
66% {
    background: url("../img/second_banner.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
67% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
71% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
94% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
99% {
    background: url("../img/second_banner_unused.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
100% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
}

.banner_third {
  background: url("../img/second_banner.png");
  margin-top: 200px;
  margin-left: 1340px;
  height: 0px;
  width: 400px;
  border-radius: 9px;
  position: absolute;
  z-index: 3;
  animation: 10s linear infinite third_banner;
  animation-delay: 400ms;
}

@keyframes third_banner {
0% {
    background: url("../img/second_banner_unused.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
5% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
28% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
33% {
    background: url("../img/second_banner_unused.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
34% {
    background: url("../img/second_banner2.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
38% {
    background: url("../img/second_banner2.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
61% {
    background: url("../img/second_banner2.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
66% {
    background: url("../img/second_banner2.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
67% {
    background: url("../img/second_banner.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
71% {
    background: url("../img/second_banner.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
94% {
    background: url("../img/second_banner.png") 0px 0;
    height: 250px;
    margin-top: 200px;
}
99% {
    background: url("../img/second_banner.png") 0px 0;
    height: 0px;
    margin-top: 200px;
}
100% {
    background: url("../img/second_banner.png") 0px -250px;
    height: 0px;
    margin-top: 450px;
}
}

.text_box {
  background: url("../img/textbox.png");
  margin-top: 470px;
  margin-left: 920px;
  height: 230px;
  width: 820px;
  border-radius: 9px;
  position: absolute;
  z-index: 3;
}

.bg_gradient {
  background: linear-gradient(to bottom, #00000000, #c3ffee);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}