/* Global Styles */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    color: #fff;
    background-color: #000;
    font-size: 16px; /* Base font size for rem units */
}

html, body {
    width: 100%;
    height: 100%;
}

/* Starfield Canvas */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Reveal.js Customization */
.reveal {
    height: 100vh;
}

.reveal h1, 
.reveal h2, 
.reveal h3 {
    text-shadow: 0 0 5px rgba(100, 180, 255, 0.5);
    font-weight: 700;
    letter-spacing: 2px;
}

.reveal h1 {
    font-size: min(3.5em, 8vw);
    margin-bottom: 0.2em;
    color: #8af;
}

.reveal h2 {
    font-size: min(2.5em, 6vw);
    color: #7cf;
}

.reveal .computer-science-title {
    margin-bottom: 4vh;
}

.reveal h3 {
    font-size: min(1.8em, 5vw);
    color: #6bf;
}

.reveal p {
    font-size: min(1.5em, 4vw);
    color: #adf;
    text-shadow: 0 0 3px rgba(100, 180, 255, 0.3);
}

.reveal ul {
    list-style-type: none;
}

.reveal li {
    margin: 0.8em 0;
    font-size: min(1.3em, 3.5vw);
    color: #9cf;
    text-shadow: 0 0 3px rgba(100, 180, 255, 0.3);
}

.reveal li:before {
    content: "✧ ";
    color: #5af;
}

/* Planet Animation */
.planet-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
    margin: 3vh 0;
}

.planet {
    width: min(150px, 30vw);
    height: min(150px, 30vw);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4a89dc, #1c3c78);
    box-shadow: 0 0 15px rgba(74, 137, 220, 0.5);
    position: relative;
}

.planet:after {
    content: '';
    position: absolute;
    width: 113%;
    height: 20%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: 40%;
    left: -7%;
    transform: rotate(-15deg);
}

/* Contact Form Styling */
.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3vh;
}

.form-element {
    margin: 1vh 0;
    width: min(300px, 80vw);
}

input[type="text"],
input[type="email"] {
    width: 100%;
    padding: min(12px, 2vw);
    border: 2px solid #4a89dc;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 25px;
    font-size: min(1em, 4vw);
    outline: none;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #5af;
    box-shadow: 0 0 15px rgba(85, 170, 255, 0.7);
}

.glow-button {
    padding: min(12px, 2vw) min(30px, 5vw);
    background: linear-gradient(45deg, #4a89dc, #5af);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: min(1.2em, 4vw);
    font-weight: bold;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 8px rgba(85, 170, 255, 0.5);
}

.glow-button:hover {
    background: linear-gradient(45deg, #5af, #4a89dc);
    box-shadow: 0 0 12px rgba(85, 170, 255, 0.6);
    transform: scale(1.03);
}

/* Animation Classes */
.fade-in-out {
    animation: fadeInOut 3s infinite alternate;
}

@keyframes fadeInOut {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .form-element { width: 90%; }
}

@media (max-width: 480px) {
    body { font-size: 12px; }
    .terminal-content { font-size: 0.8em; }
}

@media (max-height: 600px) {
    .planet-container { height: 15vh; }
    .reveal .computer-science-title { margin-bottom: 2vh; }
}

/* Matrix Code Canvas */
#matrix-code {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Terminal Styling for Digital Frontier slide */
.code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: min(300px, 50vh);
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    padding: min(2rem, 4vw);
}

@media (max-width: 1200px) {
    .code-container {
        width: 95%;
        padding: min(1.5rem, 3vw);
    }
}

.terminal {
    width: 90%;
    max-width: 1000px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

.terminal-header {
    background-color: #333;
    padding: min(10px, 2vw);
    display: flex;
    align-items: center;
}

.terminal-button {
    width: min(12px, 2vw);
    height: min(12px, 2vw);
    border-radius: 50%;
    margin-right: min(8px, 1.5vw);
    background-color: #ff5f56;
}

.terminal-button:nth-child(2) {
    background-color: #ffbd2e;
}

.terminal-button:nth-child(3) {
    background-color: #27c93f;
}

.terminal-title {
    margin-left: min(10px, 2vw);
    color: #ddd;
    font-size: min(0.9em, 3vw);
}

.terminal-content {
    padding: min(15px, 3vw);
    color: #0f0;
    font-size: min(0.9em, 3vw);
}

.terminal-link {
    color: #0f0;
    text-decoration: none;
    border-bottom: 1px dotted #0f0;
    transition: all 0.3s ease;
}

.terminal-link:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
    text-shadow: 0 0 5px #0f0;
}

/* Physics Links Styling */
.physics-link {
    color: #7cf;
    text-decoration: none;
    border-bottom: 1px dotted #7cf;
    transition: all 0.3s ease;
}

.physics-link:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
    text-shadow: 0 0 5px #7cf;
}

.command {
    margin: 5px 0;
    white-space: nowrap;
    overflow: hidden;
}

.typing-text {
    border-right: 0.15em solid #0f0;
    animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
}

.response {
    margin: 5px 0;
    color: #0f0;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #0f0 }
}

/* Space Elements - Spaceships and Space Station */
.spaceship {
    position: absolute;
    width: min(40px, 5vw);
    height: min(20px, 2.5vw);
    background-color: #ddd;
    clip-path: polygon(0% 50%, 20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.spaceship:after {
    content: '';
    position: absolute;
    width: 25%;
    height: 25%;
    background-color: #5af;
    bottom: -25%;
    left: 37.5%;
    box-shadow: 0 0 5px #5af;
    opacity: 0.8;
    animation: engineGlow 2s infinite alternate;
}

.spaceship-1 {
    background: linear-gradient(45deg, #888, #eee);
}

.spaceship-2 {
    background: linear-gradient(45deg, #777, #ccc);
    width: min(50px, 6vw);
    height: min(25px, 3vw);
}

.spaceship-3 {
    background: linear-gradient(45deg, #999, #fff);
    width: min(30px, 4vw);
    height: min(15px, 2vw);
}

.space-station {
    position: absolute;
    width: min(80px, 10vw);
    height: min(80px, 10vw);
    background-color: #aaa;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    overflow: visible;
}

.space-station:before {
    content: '';
    position: absolute;
    width: 150%;
    height: 25%;
    background-color: #888;
    top: 37.5%;
    left: -25%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.space-station:after {
    content: '';
    position: absolute;
    width: 37.5%;
    height: 37.5%;
    background-color: #5af;
    border-radius: 50%;
    top: 31.25%;
    left: 31.25%;
    box-shadow: 0 0 10px #5af;
    animation: stationGlow 4s infinite alternate;
}

@keyframes engineGlow {
    0% { opacity: 0.5; box-shadow: 0 0 3px #5af; }
    100% { opacity: 0.9; box-shadow: 0 0 8px #5af; }
}

@keyframes stationGlow {
    0% { opacity: 0.6; box-shadow: 0 0 5px #5af; }
    100% { opacity: 0.9; box-shadow: 0 0 15px #5af; }
}
