*{margin:0px;
padding: 0px;}

body
{background:#33ffcc;
font-family : Arial, Sans-Serif ;
}




#wrapper
{background :#ffffff;
width: 1200px;

margin: 40px auto;
}
#ContentContainer
{padding:5px 5px;
}

#header 
{background-color :#809fff;
height: 100px;
margin-bottom :30px;
background-image: url('pictures/fr1.jpg'); /* Αλλάξε τη διαδρομή της εικόνας */
background-size: 100px 100px; /* Ορίζει το μέγεθος της εικόνας (πλάτος ύψος) */	
background-repeat: repeat; /* Επαναλαμβάνει την εικόνα */

}

#MainContent
{background:#ccd9ff;

padding :10px;

    flex: 1; /* Παίρνει το υπόλοιπο πλάτος */
    height: 100vh; /* Ύψος για την κύρια περιοχή */

}

#footer
{background-color:#e6f2ff;
margin-top :20px;}

#Main 
{background:#99afff;
width :150px;
float :left;
height:auto;
padding-left: 20px;}

#sidebar {
    background: #ccd9ff;
    width: 950px;
    float: right;
    height: 580px; /* ή όποιο ύψος θέλεις */
    overflow-y: auto; /* προσθέτει κάθετη κύλιση */
    padding-left: 10px;
	padding-right:10px;
	line-height:25px;
	
	

}

/*background: #4d73ff;*/

#sidebar_game {
    padding :20px;

    flex: 1; /* Παίρνει το υπόλοιπο πλάτος */
    height: 200vh; /* Ύψος για την κύρια περιοχή */
	
	background: #ccd9ff;
  line-height:25px;
   
   
    /*overflow-y: auto;  προσθέτει κάθετη κύλιση */
  
	
	
	

}

/*για τις οδηγιες των games*/
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}
.content_game {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}




.sidebar2 {
    width: 910px; /* Για τη Μικρα Ασια. Μπορείς να αλλάξεις το πλάτος όπως θες */
    padding-left: 10px;
	padding-right:10px;
    background-image: url('culturally/mikra_asia/04/mati2.jpg'); /* Αλλάξε τη διαδρομή της εικόνας */
  /*background-size: 400px 400px; /* Ορίζει το μέγεθος της εικόνας (πλάτος ύψος) */
	background-size: auto; /* Ή 'contain' αν θες να διατηρήσεις την αναλογία */
    background-position: center; /* Κεντράρει την εικόνα */
    background-repeat: repeat; /* Επαναλαμβάνει την εικόνα */
}
	
	
   

.sidebar2-content {
    padding: 10px; /* Χώρος γύρω από το κείμενο */   
	

}


.dropdown-content{font-size:15px; bold; }

.clear
{clear: both ;}

#sidebar3 {
    width: 800px; /* ΓΙΑ την 1η σελιδα   Μπορείς να αλλάξεις το πλάτος όπως θες */
    padding-left: 20px;
	padding-right:20px;
    background-image: url('pictures/fr2.jpg'); /* Αλλάξε τη διαδρομή της εικόνας */
  /*background-size: 400px 400px; /* Ορίζει το μέγεθος της εικόνας (πλάτος ύψος) */
	background-size: contain; /* Ή 'contain' αν θες να διατηρήσεις την αναλογία */
    background-position: right; /* Κεντράρει την εικόνα */
    background-repeat: no-repeat; /*DEN Επαναλαμβάνει την εικόνα */
}
	
	
   

#sidebar3-content {
    padding: 10px; /* Χώρος γύρω από το κείμενο */   
	


h1{color :green;
background-color:green
width: 400px;}

#different
{font-family: Arial, Sans-Serif;
font-size: 30px;
color: #003366; 
	
}








#slide3{
	background: #cc99ff; height:auto; width: 900px; padding:0px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

div {
    max-width: 1200px; /* Ή οποιοδήποτε πλάτος θέλεις */
    margin: 0 auto; /* Κεντράρει το div */
}