* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #010105;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #e0e0e8;
}
#containerInfo{

 display: block;
}


#containerShow{

    display: none;

}

.quatroBlock{

     display: block;
     width:100%;
}
.quatroBlock > div{

     display: inline-block;
     width:45%;
     vertical-align:top;
}
.perseas{
        margin:10px;
    border-left:4px solid #663399;
    border-right:4px solid #663399;
    border-radius:8px;

padding:28px;

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

}
.perseas > li{
  color:#5050c8;
  margin-bottom:8px;

}

.arc{
        margin:10px;
    border-left:4px solid #7FFFD4;
    border-right:4px solid #7FFFD4;
    border-radius:8px;
    padding:28px;

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

}
.arc > li{
  color:#AFEEEE;
  margin-bottom:8px;

}

.zodiac{
        margin:10px;
    border-left:4px solid #FF69B4;
    border-right:4px solid #FF69B4;
    border-radius:8px;
    padding:28px;

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

}
.zodiac > li{
  color:#DDA0DD;
  margin-bottom:8px;

}
.Hercules{
        margin:10px;
    border-left:4px solid #FF7F50;
    border-right:4px solid #FF7F50;
    border-radius:8px;
    padding:28px;

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

}
.Hercules > li{
  color:#CD853F;
  margin-bottom:8px;

}


.Orion{
        margin:10px;
    border-left:4px solid #800080;
    border-right:4px solid #800080;
    border-radius:8px;
    padding:28px;

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

}
.Orion > li{
  color:#DA70D6;
  margin-bottom:8px;

}


.Waters{
        margin:10px;
    border-left:4px solid #FFFAFA;
    border-right:4px solid #FFFAFA;
    border-radius:8px;
    padding:28px;

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

}
.Waters > li{
  color:#F5F5F5;
  margin-bottom:8px;

}


.Bayer{
        margin:10px;
    border-left:4px solid #008080;
    border-right:4px solid #008080;
    border-radius:8px;
    padding:28px;

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

}
.Bayer > li{
  color: #99ccff;
  margin-bottom:8px;

}

.Laca{
        margin:10px;
    border-left:4px solid #DAA520;
    border-right:4px solid #DAA520;
    border-radius:8px;
    padding:28px;

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

}
.Laca > li{
  color: #FFD700;
  margin-bottom:8px;

}
canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: none;
}
/* Νέο στυλ: 100% width στην κορυφή της οθόνης */
.ui-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(5, 5, 25, 0.9);
    padding: 15px 40px 15px 20px;
    border-bottom: 1px solid rgba(138, 180, 248, 0.2);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 10;
    overflow-Y :scroll;
    height:100%;
}
.panel-content {
    max-width: 1200px;
    margin: 0 auto;
}
/* Κουμπί διαγραφής/κλεισίματος
.close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #8ab4f8;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    pointer-events: auto; Επιτρέπει το κλικ πάνω από το canvas
}*/
.close-btn {
    position: absolute;
    left: 10px;
    top: 0;
 width:100%;
    background:red;
    border: none;
    color: #8ab4f8;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    pointer-events: auto;
    font-size:17px;
    padding:8px;
}
.close-btn:hover {
    color: #ffffff;

}
h1 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: #8ab4f8;
    text-shadow: 0 0 5px rgba(138, 180, 248, 0.4);
}
.philosophy {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #b0b3b8;
    font-style: italic;
    border-left: 2px solid #8ab4f8;
    padding-left: 10px;
    margin-bottom: 6px;
}
.instructions {
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 500;
}
.constellation-alert {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 25, 50, 0.95);
    border: 1px solid #8ab4f8;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px #8ab4f8;
    box-shadow: 0 0 20px rgba(138, 180, 248, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}
.constellation-alert.show {
    opacity: 1;
}
li{
    padding:4px;

}
.secSimleBlock{
    display:block;
    width:100%;

    vertical-align:top;
}
.secSimleBlock .simple{
   display:inline-block;
   width:31%;
vertical-align:top;
}

.secSimleBlock p{

    padding-bottom:10px;
}
.basicBlock{
    margin:10px;
    border-left:3px solid pink;
    border-radius:8px;
list-style-type: none;
padding:8px;
}


.basic{
 color:pink;

}

.northBlock{
    margin:10px;
    border-left:3px solid cyan;
    border-radius:8px;
list-style-type: none;
padding:8px;

}
.north{
     color:cyan;
}
.north a:active{
    background-color:#5050c8;

}
.perseas .north a:active{
    background-color:#5050c8;

}
.arc .north a:active{
    background-color:#ADD8E6;

}
.zodiac .basic a:active{
    background-color:#2F4F4F;


}
.Hercules .basic a:active{
    background-color:#B0C4DE;

}
.Hercules .north a:active{
    background-color:#808000;

}
.Hercules .arc a:active{
    background-color:#800000;

}
.deapBlock{
    margin:10px;
    border-left:3px solid olive;
    border-radius:8px;
list-style-type: none;
padding:8px;

}

.deap{
      color:olive;

}
#myIframe {


    position: fixed; /* Κλειδώνει το iframe στην οθόνη, ακόμα και στο scroll */
    top: 50%;        /* Τοποθέτηση στο 50% από την κορυφή */
    right: 10px;       /* Τοποθέτηση στο 50% από αριστερά */

    /* ΑΥΤΟ ΕΙΝΑΙ ΤΟ ΚΛΕΙΔΙ: Μετατοπίζει το iframe ακριβώς στο κέντρο */
    transform: translate(-50%, -50%);

    width: 450px;
    height: 450px;
    background-color: #fff;
    border-radius: 20px;
    border: none;    /* Αφαιρεί το προεπιλεγμένο περίγραμμα του iframe */
    z-index: 9999;   /* Διασφαλίζει ότι θα εμφανίζεται πάνω από όλα τα άλλα στοιχεία */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3); /* Προαιρετικό: προσθέτει μια ωραία σκιά για να ξεχωρίζει */
}