/* 90s Jazz Cup Style CSS */
@font-face {
  font-family: 'Comic Sans MS';
  src: url("fonts/comici.ttf");
}

html, body{
  -webkit-font-smoothing: antialiased;
  font-family: 'Comic Sans MS', sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 860px;
  height: 100%;
  background-color: #191928;
  background-image: url("https://i.imgur.com/SHZe50s.gif");
  background-attachment: fixed;
  background-repeat: repeat;
}

.center{
  text-align: center;
}

.intro{
  font-size: 2em;
  margin: 20px 0;
}

.max { 
  display: block;
  width: 860px;
  word-wrap: break-word;
}

.bg2{
  background-image: url("https://i.imgur.com/SHZe50s.gif");
  background-attachment: fixed;
  background-repeat: repeat;
  background-color: #191928;
}

a{
  color: #00868B;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #9932CC;
  text-decoration: underline;
}

a:visited {
  color: #4B0082;
}

.container {
  width: 1000px;
  height: 100%;
  border: 2px solid #00868B;
  box-sizing: border-box;
}

h1, h2, h3 {
  color: #00CED1;
  text-shadow: 2px 2px #9932CC;
}

p {
  color: #FFFFFF;
  font-size: 1.1em;
  margin: 15px;
}

span.line{
  color: red;
}

.cursor{
  cursor: url(https://i.imgur.com/RUE567I.gif), auto;
}

/* @group Blink */
.blink {
  -webkit-animation: blink .75s linear infinite;
  -moz-animation: blink .75s linear infinite;
  -ms-animation: blink .75s linear infinite;
  -o-animation: blink .75s linear infinite;
  animation: blink .75s linear infinite;
}

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

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

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

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

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; }
  100% { opacity: 0; }
}
/* @end */

/* Main Content Styling */
#main{
  min-height: 90vh;
  background-color: rgba(25, 25, 40, 0.9);
  padding: 10px;
  border: 5px solid #00CED1;
  border-radius: 10px;
  margin-top: 20px;
}

#nav-bar {
  background-color: #9932CC;
  padding: 10px;
  border: 3px outset #00CED1;
  margin-bottom: 15px;
}

#nav-bar a {
  background-color: #191928;
  color: #00CED1;
  padding: 5px 10px;
  border: 2px outset #00CED1;
  display: inline-block;
  margin: 0 5px;
}

#nav-bar a:hover {
  border-style: inset;
  background-color: #9932CC;
  color: #FFFFFF;
}

.construction {
  display: inline-block;
  margin: 10px;
}

.marquee {
  background-color: #9932CC;
  color: #FFFFFF;
  padding: 5px;
  font-weight: bold;
  margin: 10px 0;
}

.hit-counter {
  font-family: "Courier New", monospace;
  background-color: #000000;
  color: #00CED1;
  padding: 5px;
  display: inline-block;
  border: 2px inset #9932CC;
  margin: 10px;
}

/* Footer Styling */
footer {
  background-color: rgba(25, 25, 40, 0.9);
  padding: 10px;
  text-align: center;
  border-top: 3px ridge #9932CC;
  margin-top: 20px;
}

/* Project Box Styling */
.project-box {
  border: 2px dashed #00CED1;
  padding: 10px;
  margin: 15px 0;
  background-color: rgba(25, 25, 50, 0.7);
}

/* Guestbook Styling */
.guestbook {
  background-color: rgba(25, 25, 40, 0.8);
  border: 2px inset #00CED1;
  padding: 10px;
  margin: 15px;
  color: #FFFFFF;
}

.guestbook h4 {
  color: #00CED1;
  margin-top: 0;
}

/* Table Styling */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 15px 0;
}

table, th, td {
  border: 2px outset #00CED1;
}

th, td {
  padding: 8px;
  text-align: left;
  background-color: rgba(25, 25, 40, 0.8);
  color: #FFFFFF;
}

th {
  background-color: #00CED1;
  color: #FFFFFF;
}

/* Web Ring Styling */
.webring {
  margin: 15px 0;
}

/* List Styling */
ul {
  color: #FFFFFF; 
  text-align: left;
}

/* Form Elements */
input, textarea, button {
  background-color: #191928;
  color: #00CED1;
  border: 2px inset #9932CC;
  padding: 3px;
  margin: 5px 0;
}

button {
  background-color: #00CED1;
  color: #191928;
  border: 2px outset #9932CC;
  font-weight: bold;
  padding: 5px 10px;
  cursor: pointer;
}

button:hover {
  background-color: #9932CC;
  color: #FFFFFF;
}@charset "utf-8";
/* CSS Document */