/* Üldised stiilid */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
}

/* Paigutus */
.header, .footer {
  display: flex;
  justify-content: center; /* Keskjoonel horisontaalselt */
  align-items: center;     /* Keskjoonel vertikaalselt */
}

.content {
  display: flex;
  flex-direction: column; /* Vertikaalne paigutus */
  align-items: center;    /* Keskjoonel horisontaalselt */
  flex: 1; /* Võtab ülejäänud ruumi */
  padding: 20px;
  background-color: #f4f4f4;
}

/* Linkide stiilid */
a {
  color: #22c052; /* Määra linkide värv */
  text-decoration: none; /* Eemalda allajoonimine */
  font-weight: bold; /* Tee linkide tekst paksuks */
}

a:hover {
  color: #ce2194; /* Muuda värvi hoveril */
  text-decoration: underline; /* Lingi allajoonimine hoveril */
}

/* Klasside stiilid */
.section1 {
  background-color: #acd4f7; /* Hele sinine taust */
  text-align: left; /* Teksti joondamine vasakule */
  margin: 20px; /* Välismarginaalid */
  padding: 15px; /* Sisemarginaalid */
}

.section2 {
  background-color: #f7ce98; /* Hele beež taust */
  text-align: center; /* Teksti joondamine keskele */
  margin: 20px; /* Välismarginaalid */
  padding: 15px; /* Sisemarginaalid */
}

.section3 {
  background-color: #f8ada5; /* Hele roosa taust */
  text-align: right; /* Teksti joondamine paremale */
  margin: 20px; /* Välismarginaalid */
  padding: 15px; /* Sisemarginaalid */
}

/* ID-stiil (ühe kindla elemendi jaoks) */
#special-section {
  border: 2px solid #fa4121; /* Punakas piirjoon */
  font-style: italic; /* Kaldkiri tekst */
}

/* Nuppude stiilid */
.styled-button {
  background-color: #4CAF50; /* Taustavärv */
  color: white; /* Tekstivärv */
  border: none; /* Piirjoon ei ole */
  padding: 15px 30px; /* Sisemarginaalid */
  text-align: center; /* Teksti joondamine keskele */
  text-decoration: none; /* Ilma allajoonimiseta */
  display: inline-block; /* Inline-blocki stiil */
  font-size: 16px; /* Teksti suurus */
  cursor: pointer; /* Kursor kui hiir liigub üle nupu */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Varjuefekt */
  transition: transform 0.3s, box-shadow 0.3s; /* Ülemineku efekt */
}

.styled-button:hover {
  transform: translateY(-5px); /* Liiguta nuppu üles */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Muuda varju */
}

/* Piltide stiilid */
.styled-image {
  width: 300px; /* Pildi laius */
  height: auto; /* Hoiab pildi proportsioonid */
  display: block; /* Blokeeri stiil */
  margin: 20px auto; /* Keskjoonel */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Varjuefekt */
  transition: transform 0.3s, box-shadow 0.3s; /* Ülemineku efekt */
}

.styled-image:hover {
  transform: scale(1.05); /* Suurenda pilti */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Muuda varju */
}

/* Stiil tekstile */
.styled-text {
  font-size: 20px; /* Teksti suurus */
  color: #333; /* Teksti värv */
  position: relative; /* Positiivne asukoht pseudo-elementide jaoks */
  padding: 10px; /* Sisemarginaalid */
  transition: color 0.3s; /* Sujuv üleminek värvile */
}

/* Pseudo-klass hover */
.styled-text:hover {
  color: #10d3c9; /* Muuda tekstivärvi hoveril */
}

/* Pseudo-element ::before */
.styled-text::before {
  content: "--- > "; /* Lisateksti sisu */
  font-size: 20px; /* Suurendage ikooni suurust */
}