.hide {
    display: none;
}

.reveal {
    display: block;
}

nav button {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

button {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 35px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

button:hover {
    transform: scale(1.1);
    background-color: #0dbf36;
}


.wrapper {
    position: relative;
    top: 4vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-rows: 100px;
}

/* xreiazetai gia na to formarw mesa sto grid */
.wrapper2 {
    overflow: auto;
    /*gia to scrollbar*/
    padding: 525px;
    /*gia to scrollbar*/
    position: relative;
    top: 4vh;
    padding-left: 250px;
    padding-top: 1px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-rows: 3px;
}

/* BIOGRAPHY BUTTON */
#buttonBiography {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    margin: 5px;
    background: rgb(99, 187, 207);
}

#buttonBiography:hover {
    /*otan paw ton kersora panw sto button allazei xrwma*/
    background: #0f6db5;
}

#buttonArtwork {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    margin: 5px;
    background: rgb(99, 187, 207);
}

#buttonArtwork:hover {
    background: #0f6db5;
}

/* PRWTO SET KOUMPIWN emfanhsh me to pathma tou bio*/
#set1 {
    font-size: 26px;
    margin-bottom: 30px;
    text-align: center;
    position: absolute;
}

#set2 {
    font-size: 26px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonEarlyLifeside {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonEarlyLifeside:hover {
    background: #0f6db5;
}

#contentEarlyLife {
    font-size: 16px;
    margin-bottom: 0px;
    text-align: center;
    position: absolute;
}

#buttonCareerside {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonCareerside:hover {
    background: #0f6db5;
}

#contentCareer {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center;
    position: absolute;
}

#buttonFinalYearsside {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonFinalYearsside:hover {
    background: #0f6db5;
}

#contentFinalYears {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center;
    position: absolute;
}

#buttonPortraits {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonPortraits:hover {
    background: #0f6db5;
}

#portraitsPhotos {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonPaintings {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonPaintings:hover {
    background: #0f6db5;
}

#paintingsPhotos {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonDrawings {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonDrawings:hover {
    background: #0f6db5;
}

#drawingsPhotos {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonExhibitions {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    margin: 5px;
    background: rgb(99, 187, 207);
}

#buttonExhibitions:hover {
    background: #0f6db5;
}

#set3 {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonPastExh {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonPastExh:hover {
    background: #0f6db5;
}

#past {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonCurrentExh {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonCurrentExh:hover {
    background: #0f6db5;
}

#current {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonUpcomingExh {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonUpcomingExh:hover {
    background: #0f6db5;
}

#upcoming {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonLinks {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    margin: 5px;
    background: rgb(99, 187, 207);
}

#buttonLinks:hover {
    background: #0f6db5;
}

#set4 {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonLogout {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonLogout:hover {
    background: #0f6db5;
}

#buttonEditExcibitions {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonEditExcibitions:hover {
    background: #0f6db5;
}

#buttonEditLinks {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonEditLinks:hover {
    background: #0f6db5;
}

#set5 {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonManagement {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    margin: 5px;
    background: rgb(99, 187, 207);
}

#buttonManagement:hover {
    background: #0f6db5;
}

#buttonLogin {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonLogin:hover {
    background: #0f6db5;
}

#loginform {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonPortraitsLink {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonPortraitsLink:hover {
    background: #0f6db5;
}

#books {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonPaintingsLink {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonPaintingsLink:hover {
    background: #0f6db5;
}

#PaintingLinks {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonDrawingsLink {
    border: 1px solid black;
    width: 140px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    margin: 3px;
    background: rgb(99, 187, 207);
}

#buttonDrawingsLink:hover {
    background: #0f6db5;
}

#DrawingLinks {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#set6 {
    font-size: 26px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}

#buttonlogin2 {
    background: rgb(99, 187, 207);
    color: #000000;
    text-align: center;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

#buttonlogin2:hover {
    transform: scale(1.1);
    background-color: #0f6db5;
}

#buttonEarlyLifeside,
#buttonCareerside,
#buttonFinalYearsside,
#buttonPortraits,
#buttonPaintings,
#buttonDrawings,
#buttonPastExh,
#buttonCurrentExh,
#buttonUpcomingExh,
#buttonPortraitsLink,
#buttonPaintingsLink,
#buttonDrawingsLink,
#buttonLogin,
#buttonLogout,
#buttonEditExcibitions,
#buttonEditLinks {
    width: 170px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    padding: 10px;
    margin: 10px;
    background: rgb(99, 187, 207);
    border: 1px solid black;
    border-radius: 5px;
}

#buttonEarlyLifeside:hover,
#buttonCareerside:hover,
#buttonFinalYearsside:hover,
#buttonPortraits:hover,
#buttonPaintings:hover,
#buttonDrawings:hover,
#buttonPastExh:hover,
#buttonCurrentExh:hover,
#buttonUpcomingExh:hover,
#buttonPortraitsLink:hover,
#buttonPaintingsLink:hover,
#buttonDrawingsLink:hover,
#buttonLogin:hover,
#buttonLogout:hover,
#buttonEditExcibitions:hover,
#buttonEditLinks:hover {
    background: #0f6db5;
}

#set7{
    font-size: 26px;
    margin-bottom: 30px;
    text-align: left;
    position: absolute;
}