body {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace;
  background-color: #000000;
  color: #ffffff;
}

#intro {
  margin-left: 5%;
  margin-top: 5%;  
}

#page-contents {
  margin-left: 5%;
}

h1 {
  font-size: 1.2em;
  margin-bottom: 0px;
}

#subtitle {
  font-size: 1.2em;
  margin-top: 0px;
}

#footer {
  width: 80%;
  font-size: .8em;
  text-align: right;
  margin: 5% auto;
  margin-top: 0px;
  padding: 0px 20px;
}

#info p {
  padding: 0px;
  margin: 0px;
}

#greeting-box {
  margin-left: 5%;
  color:lightgreen;
  display: none;
}

#terminal, #info-box {
  width: 80%;
  padding: 0px 20px;
  margin: 0px 5%;
  border: 3px dashed #ebf4f6;
/*   overflow-y: auto; */
/*   white-space: pre-wrap; */
  font-size: 1.2em;
  display: none;
}

#terminal  {
  border: none;
}

#rsvp, #rsvp-message-div {
  width: 80%;
  padding: 0px;
  margin: 0px 5%;
  font-size: 1.2em;
  display: none;
}

.instructions {
  color: #2ECC71;
  font-weight: bold;
}

#commandInput {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  border: none;
  outline: none;
  width: 95%;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  font-weight: bold;
}

.commandLine {
  margin: 0;
  padding: 0;
  display: flex;
  font-size: 1em;
}

#commandText {
  visibility: hidden;
}

.prompt {
  margin-right: 0.5em;
}


/* Style the radio buttons */
.radioButtons {
  display: flex;
  flex-direction: row;
  visibility: hidden;
}

.radioInput {
  display: none;
}

.radioLabel {
  cursor: pointer;
  position: relative;
  padding: 0.25em 1em;
  border: 1px solid #2ECC71;
  border-radius: 0.25em;
  background-color: #000000;
  margin-bottom: 0.5em;
  transition: background-color 0.2s;
}

.radioInput:checked + .radioLabel {
  background-color: #00ff00;
  color: #000000;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .radioButtons {
    flex-direction: column;
  }
}

#rsvp-message {
  width: 100%;          /* Set the width of the textarea */
  height: 100px;         /* Set the height of the textarea */
  padding: 10px;         /* Add padding to the textarea */
  font-size: 1.2em;       /* Set the font size of the textarea */
  color: #21c10a;        /* Set the font color for the pre-filled text */
  background-color: #000;/* Set the background color to match the terminal */
  border: 1px solid #333;/* Set a subtle border */
  font-family: 'Courier New', monospace; /* Use a monospace font */
  resize: vertical;      /* Allow resizing only vertically */
}

#rsvp-message:focus {
  color: #21c10a;        /* Set the font color when the textarea is focused */
  outline: none;         /* Remove the outline when the textarea is focused */
  border: 1px solid #21c10a; /* Add a colored border when the textarea is focused */
}

#rsvp-message::placeholder {
  color: #0a7d03;        /* Set a slightly dimmed placeholder color */
}

#rsvp-buttons {
  display: flex;           /* Use flexbox to arrange children */
  flex-direction: column;  /* Arrange children vertically */
  gap: 10px;               /* Add some space between the textarea and radio buttons */
}

#radio-buttons-container {
  display: flex;           /* Use flexbox to arrange radio buttons */
  flex-wrap: wrap;         /* Allow radio buttons to wrap on smaller screens */
  gap: 10px;               /* Add some space between radio buttons */
}

.button-style {
  border: 1px solid #21c10a;
  padding: 5px 10px;
  font-family: 'Courier New', monospace;
  font-size: 1em;
  color: #21c10a;
  background-color: #000;
  cursor: pointer;
  transition: all 0.2s;
}

.button-style:hover {
  background-color: #21c10a;
  color: #000;
}

.button-style:disabled,
.button-style:disabled:hover {
  background-color: #333;
}

#rsvp-message-container {
  display: none; 
}

#navbar {
    position: fixed;
    top: 0;
    right: 0;
    margin: 10px;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navbar ul li {
    display: inline;
    margin-left: 10px;
}

#navbar ul li a {
    text-decoration: none;
    color: #21c10a; /* Change color to fit your theme */
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    padding: 5px 10px; /* Adjust padding if needed */
}

#navbar ul li a:hover {
    color: #fff; /* Change hover color to fit your theme */
}

#navbar ul li a {
    border: 2px solid #21c10a; /* Green border */
    padding: 5px 10px; /* Top and bottom padding, left and right padding */
    border-radius: 5px; /* Rounded corners */
    background-color: #000; /* Background color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

#navbar ul li a:hover {
    background-color: #21c10a; /* Background color on hover */
    color: #000; /* Text color on hover */
}

@media screen and (max-width: 600px) {
  #navbar {
    position: relative; /* Change position */
    width: 100%; /* Full width */
    text-align: center; /* Center the items */
  }

  #navbar ul {
    display: inline-block; /* Align items horizontally */
    padding: 0;
    text-align: left; /* Align items to the left */
  }

  #navbar ul li {
    display: inline-block; /* Keep items side-by-side */
    margin: 5px; /* Add some space around each item */
  }

  #navbar ul li a {
    padding: 5px 10px; /* Adjust padding as needed */
    /* Other styles... */
  }
}

.active-link {
  color: #fff; /* Set the text color for active link */
  background-color: #21c10a; /* Set the background color for active link */
}

iframe { 
  width: 90%; 
  height: 2500px; 
  border: 2px solid #ccc; 
  border-radius: 10px; 
  padding: none; 
}

#events-iframe {
  height: 2500px;
}

#travel-iframe {
  height: 2500px;
}

/* This media query targets devices with a maximum width of 767px, which typically includes mobile devices */
@media only screen and (max-width: 767px) {
  #travel-iframe {
    height: 4750px;
  }
}