/* 
  Octarule Project
  Author: Keith (Arc.Keith)
  Created: July 2025
  License: Creative Commons Attribution 4.0 International (CC BY 4.0)
  https://creativecommons.org/licenses/by/4.0/
*/

body {
      color: #dddddd;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
    }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2em;
}

header h1 {
  margin-right: auto;
}

h1 {
  font-size: 2em;
  color: #9df;
  
}

h2 {
  color: #488cde;
  margin-top: 2em;
}

section {
  margin-bottom: 2em;
}

ul {
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.5em;
}

.email-reveal {
  margin-top: 1em;
}

input[type="text"] {
  padding: 0.5em;
  background: #1a1a1a;
  border: 1px solid #444;
  color: #fff;
  font-size: 1em;
  border-radius: 4px;
}

button {
  padding: 0.5em 1em;
  background: #3f509d;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-left: 0.5em;
  border-radius: 4px;
}

.email-output {
  margin-top: 1em;
  font-weight: bold;
  color: #9df;
}

.footer {
  margin-top: 4em;
  text-align: center;
  font-style: italic;
  color: #777;
  padding: 2em;
  font-size: 0.95em;
}

.bitwise-animation {
  margin-top: 2em;
  text-align: center;
  
}
#binarylink {
  text-decoration: none;
}

.bit-label {
  font-family: monospace;
  font-size: 1.4em;
  margin-bottom: 0.5em;
  color: #9df;
}

.beads {
  display: inline-flex;
  gap: 1.2em;
  margin: 0.5em 0;
  justify-content: center;
}

.bead {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #222;
  border: 2px solid #666;
  transition: background-color 0.3s;
}

.on {
  background-color: #9df;
  border-color: #9df;
}

.octal-label {
  font-size: 1.4em;
  color: #9df;
  font-family: monospace;
  margin-top: 0.5em;
}

.wrap-up {
  max-width: 50rem;
  text-align: Left;
  margin-top: 2.5em;
  color: #bbb;
  font-size: 1.1em;
  line-height: 1.8;

}
#luckycenter {
  display: flex;
  justify-content: center; 
}

.cont {
text-align: center;
}