/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
  background-image: url(img/raq_bg_main.png);
  background-attachment: fixed;
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  color: #00ffff;
  font-family: "Courier New", Courier, monospace;
  text-shadow: 5px 5px 5px black;
}

div {
  width: 1000px;
  border: none;
  padding: 10px;
  margin: 20px;
  background-color: rgba(1,1,1,0);
}

.panel {
  width: 1000px;
  border: 3px solid rgba(0,128,128,0.5);
  padding: 10px;
  margin: 20px;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #008888;
}

.gallery {
  width: 1200px;
  border: 3px solid rgba(0,128,128,0.5);
  padding: 10px;
  margin: 20px;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #008888;
}

.access {
  width: 500px;
  border: 3px solid rgba(0,128,128,0.5);
  padding: 10px;
  margin: 20px;
  background-color: rgba(1,1,1,0.8);
box-shadow: 3px 3px 3px 3px #008888;
}

.comment {
  width: 800px;
  border: 3px solid rgba(128,128,128,0.5);
  padding: 10px;
  margin: 20px;
  margin-left: 100px;
  color: #eeeeee;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #888888;
}

.argil-comment {
  width: 800px;
  border: 3px solid rgba(73,146,175,0.5);
  padding: 10px;
  margin: 20px;
  margin-left: 100px;
  color: #4992af;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #346e85;
}

.kebani-comment {
  width: 800px;
  border: 3px solid rgba(168,125,76,0.5);
  padding: 10px;
  margin: 20px;
  margin-left: 100px;
  color: #a87d4c;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #705230;
}

.ezrah-comment {
  width: 800px;
  border: 3px solid rgba(64,122,121,0.5);
  padding: 10px;
  margin: 20px;
  margin-left: 100px;
  color: #407a79;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #285251;
}

.ratha-comment {
  width: 800px;
  border: 3px solid rgba(201,81,16,0.5);
  padding: 10px;
  margin: 20px;
  margin-left: 100px;
  color: #c95110;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #913c0d;
}

.gallery_comment {
  width: 1000px;
  border: 3px solid rgba(128,128,128,0.5);
  padding: 10px;
  margin: 20px;
  margin-left: 100px;
  color: #eeeeee;
  background-color: rgba(1,1,1,0.4);
box-shadow: 3px 3px 3px 3px #888888;
}

a:visited {
  color: #00ffff; /* Replace with your desired color */
}
a {
  color: #00ffff; /* Changes all links to cyan */
}

h2 {
    margin-bottom: 3px; /* Adjust this value as needed */
}

button {
  font-family: "Courier New", monospace;
  color: #00ffff;
  background-color: #004040;
  border: 2px solid #00ffff;

  width: 150px;
  height: 36px;

  cursor: pointer;
}

/* make text centered nicely */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


#username {
  background: transparent;
  font-size: 24px;
  width: 200px;
  height: 30px;
  border: 1px solid #00ffff;
  color: #00ffff;
  font-family: "Courier New", monospace;
  outline: none;
}

/* blinking cursor */
#cursor {
  display: inline-block;
  color: #00ffff;
  font-family: "Courier New", monospace;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}