@import url('http://scriver.net/css/lato.css');

body {
    overflow: hidden;
}

.container {
    display: flex; /*τι σημαίνει flex Η τιμή flex στην ιδιότητα display ορίζει ένα flex container και επιτρέπει στα παιδιά του να γίνουν flex items. Αυτό επιτρέπει πιο προηγμένη, ευέλικτη και αποτελεσματική διάταξη στα στοιχεία.*/
    justify-content: center;
}
.C3 {
    width: 13cm; /* σταθερό πλάτος κοντεινερ non responsive*/
    height: calc(100vh - 2cm); /*τι σημαίνει vh Το vh είναι μια μονάδα μέτρησης που σημαίνει "viewport height" (ύψος viewport). Το 1vh ισοδυναμεί με το 1% του ύψους του viewport.*/
    padding: 1cm 0; /*τι είναι το padding Το padding είναι ο χώρος που βρίσκεται μεταξύ του περιεχομένου ενός στοιχείου και των περιθωρίων του. Αυτός ο χώρος μπορεί να ρυθμιστεί για κάθε πλευρά του στοιχείου (επάνω, κάτω, αριστερά, δεξιά) με τη χρήση των αντίστοιχων ιδιοτήτων padding-top, padding-bottom, padding-left, padding-right.*/
    overflow-y: auto; /* τι είναι το overflow-y πως συντονίζεται με το auto Η ιδιότητα overflow-y καθορίζει τι συμβαίνει όταν το περιεχόμενο ενός στοιχείου υπερβαίνει το ύψος του στοιχείου. Η τιμή auto σημαίνει ότι θα εμφανιστεί μια γραμμή κύλισης αν το περιεχόμενο υπερβαίνει το ύψος του στοιχείου.
    */
    box-sizing: border-box;/* ορίζει το περίγραμμα ? ιδιότητα box-sizing, αυτή ορίζει πώς θα υπολογίζονται τα πλάτη και τα ύψη των στοιχείων. Η τιμή border-box σημαίνει ότι το πλάτος και το ύψος του στοιχείου περιλαμβάνουν
    το padding και το border, αλλά όχι το margin. Αυτό σημαίνει ότι το στοιχείο θα διατηρεί το προκαθορισμένο πλάτος και ύψος που έχετε ορίσει, ανεξάρτητα από το μέγεθος του padding ή του border.*/
    font-family: 'Lato', sans-serif;
}

/* Κοντέινερ με την ονομασία "C3" */
.C3 {
    /* Προσθήκη χρώματος φόντου */
    background-color: transparent;
    padding: 10px; /* Περιθώρια γύρω από το περιεχόμενο */
    border: 1px solid #560d0d;

    /* Κέντραρισμα του περιεχομένου */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-container {
    display: flex;
    justify-content: space-around;
    position: absolute;
    width: 100%;
    bottom: -50px; /* Αλλάξτε αυτή την τιμή ανάλογα με το πόσο θέλετε τα πλήκτρα να είναι κάτω από το κοντέινερ */
}

.color-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

/* Χρώματα με διαφάνεια για τα πλήκτρα */
.red-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
  background-color: rgba(148, 43, 43, 0.7); /* Κόκκινο χρώμα με 70% διαφάνεια */
}

.orange-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
  background-color: rgba(175, 113, 51, 0.7); /* Πορτοκαλί χρώμα με 70% διαφάνεια */
}

.yellow-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
  background-color: rgba(242, 255, 0, 0.7); /* Ύφανθο χρώμα με 70% διαφάνεια */
}

.green-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
  background-color: rgba(34, 219, 24, 0.7); /* Πράσινο χρώμα με 70% διαφάνεια */
}

.blue-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
  background-color: rgba(0, 238, 255, 0.7); /* Μπλε χρώμα με 70% διαφάνεια */
}

/* Στυλ για τις διάφορες παραλλαγές της γραμματοσειράς Lato */
.light-text {
    font-family: 'Lato Light';
}

.thin-text {
    font-family: 'Lato Thin';
}

.medium-text {
    font-family: 'Lato Medium';
}

.bold-text {
    font-family: 'Lato Bold';
}

.hairline-text {
    font-family: 'Lato Hairline';
}