/* 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." */

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: 'Arial', sans-serif;
    background: #1c1c1c; /* Dark background */
    color: #f1f1f1; /* Light text */
    line-height: 1.6;
    padding: 20px;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    padding: 10px 20px;
    border-radius: 5px;
}

header .logo h1 {
    font-size: 2.5rem;
    color: #ffcc00; /* MGS yellow accent */
    text-transform: uppercase;
    letter-spacing: 4px;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #f1f1f1;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #ffcc00; /* MGS yellow hover effect */
}

/* Main Content */
main {
    margin-top: 40px;
    background: rgba(0, 0, 0, 0.5); /* Slight transparency */
    padding: 20px;
    border-radius: 8px;
}

main h2 {
    font-size: 2rem;
    color: #ffcc00;
    margin-bottom: 10px;
}

/* Section Styling */
section {
    margin-bottom: 20px;
    padding: 15px;
    border: 2px solid #555;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.6);
}

section p {
    font-size: 1.1rem;
    color: #ddd;
}

/* Footer */
footer {
    margin-top: 40px;
    text-align: center;
    font-size: 1rem;
    color: #bbb;
}

/* Hover Effects and Animations */
nav ul li a:hover {
    transform: scale(1.1); /* Slight zoom effect */
}

section {
    transition: background-color 0.3s ease;
}

section:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Darker hover effect */
}

/* Codec Screen Styles */
.codec {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 300px;
    display: none; /* Hidden by default */
    z-index: 999;
}

.codec-screen {
    background: rgba(0, 0, 0, 0.8);
    color: #FFC000; /* Altered to Orange */
    padding: 20px;
    border: 2px solid #FFC000;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(255, 165, 0, 0.5); /* Orange glow effect */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.codec h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #FFC000;
}

.caller-info {
    display: flex;
    align-items: center;
}

.caller-info img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;
}

button.close-call {
    margin-top: 20px;
    padding: 10px;
    background-color: #FFC000;
    border: none;
    color: black;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
}

button.close-call:hover {
    background-color: #FFC000; /* This can be used to change the colour on hover */
}

/* Slide-in Animation for Codec */
@keyframes slideIn {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.codec {
    animation: slideIn 1s ease-out;
}



/* Radar Background Styling */
.radar-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('Radar.gif') center center no-repeat; /* Use the gif here */
    background-size: cover;
    opacity: 0.3; /* Adjust opacity to make it subtle */
    z-index: 0;
    display: none; /* Hidden by default */
}