/* Base styles */
body {
    margin: 50px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: #ffffcc; /* Light yellow text */
}

html {
    background: url('background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Link styles */
a:link {
    color: white;
}

a:visited {
    color: yellow;
}

a:hover {
    color: mediumslateblue;
}

a:active {
    color: red;
}

/* Add this to your CSS file */
/*#sunlight-map-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
}

#map {
    width: 100%;
    height: auto;
    display: block;
}*/

#sunlight-map-wrapper {
    width: 100%; /* Prend toute la largeur de son conteneur parent */
    max-width: 100%; /* Assure qu'il ne dépasse pas son conteneur */
    box-sizing: border-box; /* Inclut padding et border dans la largeur/hauteur totale */
    /* Optionnel: Si le reste de votre contenu a une largeur max et est centré */
    /* max-width: 1200px; */ /* Mettez ici la même max-width que votre contenu principal */
    /* margin-left: auto; */  /* Pour centrer si une max-width est définie */
    /* margin-right: auto; */ /* Pour centrer si une max-width est définie */
}

#map { /* Cible le canvas à l'intérieur du wrapper */
    display: block; /* Empêche les marges indésirables et le traite comme un bloc */
    width: 100%;   /* Fait en sorte que le canvas remplisse le #sunlight-map-wrapper */
    height: auto;  /* Garde le ratio hauteur/largeur du canvas */
    max-width: 100%; /* Sécurité pour ne pas déborder */
}

/* Update your existing media queries */
@media (max-width: 768px) {
    #sunlight-map-wrapper {
        max-width: 100%;
    }
}

/* Map container */
.map-container {
    width: 50%;
    height: 500px;
    border: 1px solid #000;
    margin-top: 20px;
    background-color: blue; /* Blue background for oceans */
}

/* Header styles */
h1 {
    color: #33ccff;
    font-size: xx-large;
    font-family: Verdana, sans-serif;
}

h3 {
    color: #ffffcc;
}

/* Special text colors */
.cyan-text {
    color: #00ffff;
}

/* Common image sizes */
.moon-image {
    width: 200px;
    height: 200px;
}

.earth-image {
    width: 800px;
    height: 600px;
}

.small-projection {
    width: 60px;
    height: 30px;
}

.full-projection {
    width: 1200px;
    height: 600px;
}

/* Horizontal rule styling */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 204, 0), rgba(255, 255, 204, 0.75), rgba(255, 255, 204, 0));
    margin: 20px 0;
}

/* Footer styling */
footer {
    margin-top: 20px;
    font-style: italic;
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
    .earth-image {
        width: 100%;
        height: auto;
    }
    
    .full-projection {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 600px) {
    body {
        margin: 20px;
    }
}