/* 1. Määritellään fontti */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('./Inter-Regular.woff2') format('woff2');
}

/* 2. Globaalit asetukset kaikille elementeille */
* {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif !important;
}

/* 3. Perusrunko */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #3c434a;
}
body {
    font-size: 16px; /* Hieman isompi on modernimpi */
    line-height: 1.6; /* Lisää ilmavuutta tekstirivien väliin */
    letter-spacing: -0.011em; /* Inter on suunniteltu toimimaan parhaiten pienellä negatiivisella välityksellä */
    color: #333; /* Syvän harmaa on pehmeämpi silmälle kuin täysmusta */
}

.own_container {
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .own_container {
        width: 70%;
        max-width: 1200px;
    }
}

.banner {
  background-image: url('nw-03-md.png');
  background-size: cover;
  height: 220px;
  display: flex;
  padding: 20px;
  vertical-align: bottom; /* Pystysuuntainen keskitys */
  justify-content: right; /* Vaakasuuntainen keskitys */
  color: white;
  font-family: 'Inter', sans-serif;
}

.content_area {
    background-color: #DCDCDC;
    padding-left: 2%;
    padding-right: 2%;
}

.big-symbol {
  font-size: 1.5em; /* Kaksinkertainen koko ympäröivään tekstiin nähden */
  vertical-align: middle; /* Korjaa asentoa, jos symboli "hyppää" liian ylös */
  line-height: 0; /* Estää symbolia sotkemasta riviväliä */
}
.footer_font {
  font-size: 0.8em;
  font-style: italic;
  text-align: left;
}

/* 4. Lomakkeet ja taulukot */
th {
    background-color: #464a51; /*303030;*/
    color: white;
}

.form_input_font {
    font-size: 11pt;
    font-weight: normal;
}

/* 5. Apuluokat */
.small_font { font-size: 8pt; }
.small_italic { font-style: italic; font-size: 9pt; }
.time_font { font-size: 8pt; }

.spam_field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden; /* Jotkut selaimet lopettavat autofillin tähän */
}