* {
    box-sizing: border-box;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  img {
    width: 100%;
    height: auto;
  }
/* Header/logo Title */
  #upper {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    padding: 10px;
  }
  .logo {
    width: 100%;
    height: auto;
    padding: 10px;
  }
  .log {
    border-radius: 50%;
  }
  #title {
    width: 100%;
    padding: 30px;
    font-size: 40px;
    text-align: center;
    font-weight: 900;
    text-shadow: 4px 4px gold;
    color: rgb(31, 19, 201);
  }
  header {
    background-color: aqua;
  }
       
  /* Style the top navigation bar */
  .navbar {
    display: flex;
    background-color: #333;
    font-size: 1.2 vw;
  }
  
  /* Style the navigation bar links */
  .navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  /* Κυλιόμενη μπάρα */
  #nea {
    /* margin-top: 10px; */
    width: auto;
    height: 50px;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: red;
    background-color: rgb(145, 171, 172);
    padding: 5px;
    animation-name: slideleft;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
}
@keyframes slideleft {
  from {transform: translateX(100%);} to {transform: translateX(-100%);}
}

/* Style the body */
body {
  font-family: 'Times New Roman', Times, serif;
  
}
  /* Column container */
  .row { 
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 10px;
   
  }
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
  }
  
  /* Main column */
  .main {
    flex: 70%;
    background-color: white;
    padding: 20px;
  }
  
  /* Fake image, just for this example */
  .fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
  }
  /* Κάνε κλικ στην παρακάτω εικόνα για να ανοίξεις την φόρμα */
  .klik {
    color: red;
  }
  /* Footer */
  .footer {
    display: grid;
    grid-template-columns: auto auto;
    padding: 20px;
    background: white;
    font-size: x-large;
    
  }
  #cas, #zer {
    width: 100%;
  } 
  #cas {
    text-align: left;
  }
  
  #zer {
    /* display: grid;
    grid-template-columns: auto auto; */
    text-align: right;
    padding-right: 20px;
  }
  #cc {
    width: 70px;
    height: auto;
  }
  /* ΣΕΛΙΔΑ WE */
  #we {
    font-size: 1.7em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #070416;
    text-align: justify;
    padding: 50px;
    background-color: rgb(170, 193, 235);
  }
  #title2 {
    text-align: center;
    color: rgb(9, 4, 83);
    font-size: 28px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    background-color: aqua;
    
  }
  #board-container {
    margin:auto;
    text-align: center;
    background-color: rgb(170, 193, 235);
    font-weight: 700;
}
  .board {
    margin: auto;
    width: 100%;
    padding: 10px;
    display: block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    list-style-type: none;
   
    
  }
  .mem {
    color: rgb(5, 5, 177);
    background-color: rgb(170, 193, 235);
    font-size: 1.4vw;
  }
.pdf {
    display: block;
    margin: auto;
}
#sec1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 30px;
}
/* ΣΕΛΙΔΑ ΕΡΓΑ */
#erga {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
  text-align: center;
  
}
.photo {
  padding: 10px;
  size: 95%;
}
.desc {
  text-align: center;
  font-size: 1.1vw;
  font-weight: bold;
  color: rgb(9, 4, 83);
}
#dorees {
  display: grid;
  grid-template-columns: auto;
  
}
#dorees > button {
  margin: auto;
  width: 300px;
  color: rgb(9, 4, 83);
  font-size: 1.5vw;
  font-weight: bolder;
  background-color:aqua ;
  border-radius: 15px;
}
/* ΣΕΛΙΔΑ ΔΩΡΕΕΣ */
.donate {
  text-align: center;
  font-size: 24px;
  color:#180e52;
  background-color: rgb(245, 218, 129);
  padding: 4px;
  margin:auto;
}
#donors {
  display: grid;
  grid-template-columns: auto auto auto auto;
  padding: 10px;
  text-align: center;
}
.photod {
  padding: 10px;
  width: 90%;
}

/*ΣΕΛΙΔΑ ΕΠΙΚΟΙΝΩΝΙΑΣ */
#reg {
  font-size: 1.5em;
  text-align: center;
  background-color: aquamarine;
}
#reg1 {
  display: flex;
  flex-direction: row;
  background-color: white;
  justify-content: space-evenly;
}
#reg1 > form {
  width: 44%;
}
#rib {
  width: 400px;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  background-color: rgb(163, 190, 190);
  font-weight: bold;
}
.star {
  color: red;
}
#addr {
  background-color: rgb(114, 238, 238);
  display: flex;
  flex-direction: row;
  margin: 20px 20px 20px 20px;
  justify-content: space-evenly;
}
.address {
 float: inline-start; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 2em;
 color: rgb(2, 2, 158);
 margin-top: 40px;
}
#Office {
  width: 450px;
}


  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row, .navbar {   
      flex-direction: column;
    }
  }