.header {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 120px;
   background-color: rgba(233, 158, 19, 0);
   color: white;
   text-align: left;
}

body {
  background-color: rgb(500, 000, 030);
  background-image: url("Images/Rig_World_Web_Home_BG_002.png")
}

h1 {
  color: yellow;
  font-family: "Tahoma";
  font-style: oblique;
}

p {
  color: black;
  font-family: "Tahoma";
}

marquee {
  color: black;
  font-family: "Tahoma";
}

h2 {
  color: black;
  font-family: "Tahoma";
}

h3 {
  color: black;
  font-family: "Microsoft sans serif";
}

h5 {
  color: yellow;
  font-family: "Arial";
    font-size: 15px;
}

li {
  color: yellow;
  font-family: "Tahoma";
} 

a:link {
  color: yellow;
}

a:visited {
  color: white;
}

.main-container {
  width: 500px;
  height: 500px;
  display: flex;
  align-items: flex-start;
  border: 0px solid black;
  border-radius: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(1deg) scale(var(--main-scale, 1));
  background-color: #ffffba;
  box-shadow: 10px 10px 0px 1px #212047
}

.logo {
  width: 100px;
  height: 80px;
  position: fixed;
  left: 30px;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  left: -65px;
  top: 120px;
  border: 0px solid #ce5b00;
  border-radius: 15px;
  background-color: #a590ff;
  transform: rotate(-5deg);
}

.menu-item {
  margin: 10px;
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
  border-radius: 10px;
  border: 0px solid red;
  background-color: rgb(98, 121, 213);
}

.image-area {
  width: 530px;
  height: 345px;
  border: 0px solid #ccc;
  position: absolute;
  left: -5px;
  top: 145px;
  background-image: url("Images/RW Website Olive - Welcome_001.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 2;
  pointer-events: none;
}

.image-area-2 {
  width: 530px;
  height: 345px;
  border: 0px solid #ccc;
  position: absolute;
  left: -5px;
  top: 145px;
  background-image: url("images/RW_Olive_Computer_Only_V003.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 1;
  pointer-events: none;
}

.dialogue-container {
  width: 300px;
  height: 120px;
  border: 5px solid black;
  border-radius: 100px;
  top:92px;
  align-content: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  background-color: ghostwhite
}

.main-header {
  position: absolute;
  width:500px;
  height:100px;
  border-radius:15px;
  background-color: #8676ff;
  clip-path: inset(0px 0px 20px 0px);
  text-align: center;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 90px;
   background-color: darkgoldenrod;
   color: white;
   text-align: center;
}

.marquee-container {
   position: absolute;
  transform: translate(50%, -50%);
   top: 38px;
   height: 30px;
   width: 50%;
   background-color: rgb(255, 189, 9);
   border: 0px solid red;
   color: white;
   align-content: center;
}

.staples{
  width: 150px;
  height: 150px;
  border: 0px solid black;
  position: absolute;
  left: 78px;
  bottom: 109px;
  background-image: url("Images/Stapler_anim_001.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 3;
}

.staples-clicked {
  animation: popAndWobble 1s ease forwards;
}

@keyframes popAndWobble {
  0% {
    transform: scale(1) rotate(0deg);
  }
  10% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(2) rotate(-13deg);
  }
  40% {
    transform: scale(2) rotate(13deg);
  }
  60% {
    transform: scale(2) rotate(-13deg);
  }
  80% {
    transform: scale(2) rotate(13deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.staples_Final_Clicked {
  animation: Staples_Final_Animation 1.4s linear forwards;
}

@keyframes Staples_Final_Animation {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(8) rotate(-1440deg);
  }
}


.viewable-width-container{
  width: 98vw;
  height: 97vh;
  justify-content: center;
  border: 0px solid red;
}