/* ======================================= GOOGLE FONT ======================================= */
@import url('https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap');


/* ======================================= COLORS ======================================= */
:root {
    --Black: #121212;
    --DarkGray: #485867;
    --Gray: #C8D7E4;
    --Blue: #1851B4;
    --LightBlue: #DFEBFF;
    --ExtraLightBlue: #F1F6FF;
    --White: #FCFCFC;
}

/* ======================================= FONTS ======================================= */
h1 {
    /* H1/Default */
    color: var(--Black);
    font-family: Istok Web;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 45px; /* 112.5% */
    padding-bottom: 16px;
}

h2 
{   
    /* H2/Default */
    color: var(--Black);
    font-family: Istok Web;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 127.273% */
}

h3 {
    /* H3/Default */
    color: var(--Black);
    font-family: Istok Web;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h4 {
    /* H4/Default */
    color: var(--Black);
    font-family: Istok Web;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.meta {
    /* Meta/Default */
    color: var(--DarkGray);
    font-family: Istok Web;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px; /* 140.625% */
}

.lead {
    /* Lead/Default */
    color: var(--Black);
    font-family: Istok Web;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px; /* 150% */
}

a {
    color: var(--Black);
    border: 2px solid transparent;
}

a:hover {
    border-radius: 3px;
    background: var(--Gray);
    transition: 0.3s;
}

a:focus {
    border-radius: 3px;
    border: 2px solid var(--Blue);
    background: var(--Gray);
}

a:active {
    border-radius: 3px;
    background: var(--Blue);
    transition: 0.3s;
}

li {
    list-style: none;
}

/* Mobile fonts */
@media screen and (max-width: 768px) {
    h1 {
        /* H1/Mobile */
        font-family: Istok Web;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 107.143% */
    }

    .lead {
        /* Lead/Mobile */
        font-family: Istok Web;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 27px; /* 150% */
    }
}

/* ======================================= OTHER ======================================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--White);
    font-family: 'Istok Web', sans-serif;
    color: var(--Black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
}

.logo-img {
    width: 165px;
}

/* 404 page*/
.page-not-found {
    text-align: center;
    padding: 36px;
}
.page-not-found h3 {
    color: var(--Blue);
    padding: 18px;
}

/* lead section includes page title and the short description */
.page-lead {
    background-color: var(--ExtraLightBlue);
    width: 100%;
}

.page-lead-content {
    padding: 40px 0px 21px 0px;
    text-align: left;
    max-width: 845px;
    margin: auto;
}

/* page contents*/
.sisalto {
    max-width: 845px;
    align-items: center;
    padding-top: 32px;
}

.sivu {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
}

@media screen and (max-width: 1080px){
    .sisalto {
        padding: 16px 32px 16px 32px;
    }

    .page-lead-content {
        padding: 40px 32px 21px 32px;
    }
}

@media screen and (max-width: 1080px){
    .sisalto {
        padding: 21px 32px 21px 16px;
    }

    .page-lead-content {
        padding: 32px 16px 21px;
    }
}

/* ======================================= HEADER ======================================= */
.topnav {
  background-color: var(--LightBlue);
  overflow: hidden;
  padding: 32px 200px 12px 200px;
  border-bottom: 2px solid var(--White, #FCFCFC);
}
.logo {
    display: block;
    float: left;
}

.menu-links {
    float: right;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: var(--Black);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  margin: 0 12px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 18px;
  border: none;
  outline: none;
  color: var(--Black);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0 12px;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--White);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-left: 12px;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: var(--Black);
  padding: 16px 32px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: 1px solid var(--LightBlue);
  margin: 0;
}

.dropdown-content a::before{
    content: url(../images/arrow.svg);
    margin-right: 8px;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: var(--Gray);
  color: var(--Black);
}

.dropdown-content a:hover {
  background-color: var(--Gray);
  color: var(--Black);
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1400px){
    .topnav {
        padding: 32px 32px 12px 32px;
    }
}

@media screen and (max-width: 956px) {
    .topnav a:not(.logo), .dropdown .dropbtn {
        display: none;
    }
    .drop-icon {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
    .menu-links {
        float: none;
    }   
}

@media screen and (max-width: 956px) {
    
    .topnav.responsive .logo-container {
        float:none;
        width: 100%;
        padding: 32px 32px 12px 32px;
    }
    .topnav.responsive {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: left;
        margin: 0;
        width: 100%;
        padding: 0;
    }
    
    .topnav.responsive a.icon {
        position: absolute;
        right: 16px;
        top: 32px;
        width: auto;
        background-color: var(--Blue);
        color: var(--White);
    }
    
    .topnav.responsive .menu-links {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--White);
    }
    .topnav.responsive a {
        display: block;
        text-align: left;
        padding: 16px 32px;
        border-bottom: 1px solid var(--LightBlue, #DFEBFF);
        width: 100%;
        margin: 0;
    }
    .topnav.responsive .menu-links a:before, .dropdown .dropbtn::before {
        content: url(../images/arrow.svg);
        margin-right: 8px;
    }
    .topnav.responsive a.icon::before{
        content: none;
    }
    .topnav.responsive .dropdown {
        display: block;
        text-align: left;
        border-bottom: 1px solid var(--LightBlue, #DFEBFF);
        width: 100%;
    }
    .topnav.responsive .dropdown-content {
        position: relative;
        display: block;
        text-align: left;
        border-bottom: 1px solid var(--LightBlue, #DFEBFF);
        width: 100%;
        padding-left: 60px;
        margin: 0;
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
        padding: 16px 32px;
        margin: 0;
    }
}

.logo:hover {
    background: var(--Gray);
}

.logo:active {
    border: 2px solid var(--Blue);
    background: var(--Gray);
}

/* ======================================= FOOTER ======================================= */
footer {
    background-color: var(--White);
    border-top: 2px solid var(--LightBlue);
    padding: 32px 200px 48px 200px;
    width: 100%;
}

.footer-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
  }

.footer-content {
    display: flex;
    align-items: flex-start;
}

.menu-column {
    gap: 8px;
    margin-right: 40px;
  }

.menu-column a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--Black);
    transition: color 0.3s ease;
}

.menu-column a:hover {
    background: var(--Gray);
    transition: background 0.3s ease;
}

@media screen and (max-width: 1024px){
    footer {
        padding: 32px 32px 48px 32px;
    }
}

/* ======================================= ETUSIVU ======================================= */

#koko_etusivu {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.esittely {
    background-color: var(--LightBlue);
    height: auto;
    width: 100%;
    margin: auto;
    
}
.esittely-content{
    margin: auto;
    padding: 40px 0px 21px 0px;
    text-align: left;
    max-width: 845px;
}

.esittely-content h1 {
    padding-bottom: 16px;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
    padding: 21px 32px 32px 32px;
    align-items: flex-start;
    gap: 18px;

}

.grid-item {
    height: 136px;
    width: 412px;
    background-color: var(--ExtraLightBlue);
    border-radius: 5px;
    padding: 16px;
}

.grid-item h2 {
    text-decoration: none;
    padding-bottom: 8px;
}

.grid-item a {
    text-decoration: none;
}

#yhteistyo_teksti {
    padding-top: 32px;
    padding-bottom: 8px;
    padding-left: 24px;
}
.yhteistyo{
    padding-bottom: 40px;
}
.parent {
    padding: 18px;
}

.img-with-text {
    background: var(--ExtraLightBlue);
    padding-bottom: 16px;
    margin: 0 9px 0 9px;
    border: 1px solid var(--LightBlue, #DFEBFF);
}

.text-and-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    padding-bottom: 0;
}

@media screen and (max-width: 740px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .esittely-content {
        padding: 16px;
    }
}

@media screen and (max-width: 914px) {
    .grid-item {
        height: 136px;
        width: 343px;
    }

    .yhteistyo {
        width: min-content;
    }

}


/* ======================================= HAKEMISTO/SANASTO ======================================= */


#hakemisto_sivu_lista {
    margin-bottom: 10%;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 32px;

}


#sanasto_otsikko
{
    padding-top: 16px;
}

#hakemisto_top
{
    background: #F1F6FF;   
    height: 188px;
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px; 
}

#Hakemisto-1
{
    padding-top: 20px;
    align-items: center;
    
}

.teksti_osio 
{
    margin-left: 15%;
    padding-right: 15%;

}

.searchresults
{
    margin-left: 15%;
    padding-right: 15%;

}

#hakemisto_sivu_lista li {
    list-style-type: none;
    background: var(--White);
    display: block;
    overflow: hidden;
}

#hakemisto_sivu_lista li a {
    text-decoration: none;
}

#hakemisto_sivu_lista li:nth-child(odd) {
    background: var(--ExtraLightBlue); 
}

#hakemisto_sivu_lista li:hover {
    background: var(--Gray);
}

#hakemisto_sivu_lista li:active {
    background: var(--Blue);
}

#hakemisto_sivu_lista li:focus {
    border: 2px solid var(--Blue, #1851B4);
    background: var(--Gray, #C8D7E4);
}
/* ======================================= HAKU ======================================= */

#search {
    width: 842px;
    height: 32px;
    flex: 1;
    font-family: 'Istok Web' sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    border: none;
    margin-top: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#search_button
{
    border: #fff;
    width: 48px;
    height: 32px;
    background: var(--ExtraLightBlue);
}

#search_button:hover
{
    background: var(--Gray);
}

#search_form
{
    background: var(--LightBlue);
    border-bottom: 2px solid var(--White, #FCFCFC);
    text-align: center;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 914px) {
    #search {
        width: 400px;
    }
}
@media screen and (max-width: 454px) {
    #search {
        width: 250px;
    }
}

/* HAKUTULOKSET SIVU */

.hakutulokset
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 5%;

}

#suodattimet
{
    padding-right: 5px;
}

#tulokset
{
    margin-top: 10px;
}

.filter_results
{
    background: #F1F6FF;
    width: 842px;
    height: 100px;
    padding-top: 2%;
    padding-left: 16px;
    border-radius: 10px;
}

@media screen and (max-width: 914px) {
    .filter_results {
        width: 400px;
    }
}
@media screen and (max-width: 454px) {
    .filter_results {
        width: 250px;
    }
}


.button_container
{
    display: flex;
    justify-content: center;
}

#search_page_button
{
    border-radius: 20px;
    border: 1px solid var(--Blue, #1851B4);
    background: var(--Blue, #1851B4);
    display: flex;
    width: 70px;
    height: 40px;
    padding-bottom: 0px;
    margin-left: 5%;
    justify-content: center;
    align-items: center;
    gap: 16px;

}

.search_page_link a { 

    color: var(--White);
    text-decoration: none;
} 

#tulosten_maara
{
    margin-bottom: 5%;
}


/* ======================================= HARJOITUSHAKEMISTO ======================================= */

#harjoitus_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
    
}

#harjoitus_sivu_lista
{
    margin-bottom: 10%;
    margin-top: 2px;
    
}

#harjoitukset_lista
{
    padding-left: 15%;
    padding-right: 15%;
}


#harjoitus_title
{
    background: #F1F6FF;   
    height: 188px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px; 
}

#harjoitus_ohje
{
    padding-top: 16px;
}

#harjoitus_taso
{
    padding-top: 16px;
    padding-left: 15%;
    padding-right: 15%;
}

#harjoitus_sisalto
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
}

#Harjoitushakemisto
{
    
    padding-top: 16px;
    
}


.tr, td
{
    border-bottom: 2px solid;
    border-color: #DFEBFF;
    width: 50%;
    padding-top: 5px;
}

/* ======================================= OPISKELIJALLE ======================================= */

#opiskelijalle_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
}

#Opiskelijalle-1
{
    margin-bottom: 5px;
}

#opiskelijalle_otsikko
{
    background: #F1F6FF;   
    height: 155px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px; 
}

#opiskelijalle_sisalto
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
    text-align: left;

}



/* ======================================= OPETTAJALLE ======================================= */

#opettajalle_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
}

#Opettajalle-1
{
    margin-bottom: 5px;
}

#opettajalle_title
{
    background: #F1F6FF;   
    height: 155px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px; 
}

#opettajalle_sisalto
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
    text-align: left;

}

#liite
{
    
    border: #DFEBFF;
    border-style: solid;
    padding: 8px 16px 8px 16px;
    margin-bottom: 5px;
    border-width: 1px;
    
}

/* ======================================= KÄYTTÖ JA RAKENNE ======================================= */

#kaytto_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
}

#kaytto_title
{
    background: #F1F6FF;   
    height: 188px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px;
    padding-bottom: 21px;
    
}

#kaytto_sisalto
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
    text-align: left;

}

#Kaytto_ja_rakenne
{
    margin-bottom: 5px;
}


@media screen and (max-width: 768px) {
    .kaytto_title {
        height: 161px;
    }
}
@media screen and (max-width: 414px) {
    .kaytto_title {
        height: 172px;
    }
}


/* ======================================= KUVAUS JA AINEISTO ======================================= */

#kuvaus_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
}

#Sanakirjan_kuvaus_ja_aineisto
{
    margin-bottom: 5px;
}

#kuvaus_title
{
    background: #F1F6FF;   
    height: 155px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px;
    
}

#kuvaus_sisalto
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
    text-align: left;

}

/* ======================================= TEKIJÄT JA PALAUTE ======================================= */

#tekijat_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
}

#Tekijat_ja_palaute
{
    margin-bottom: 5px;
}

#tekijat_title
{
    background: #F1F6FF;   
    height: 155px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px;
}

#tekijat_sisalto
{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
    text-align: left;

}

/* ======================================= TIETOA SANAKIRJASTA ======================================= */

#tietoa_sivu
{
    margin-bottom: 10%;
    margin-top: 2px;
    text-align: left;
}

#tietoa_title
{
    background: #F1F6FF;   
    height: 155px;
    width: 100%;
    border-color: #fff;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px;
    border-style: solid;
}

/* ======================================= SANA-ARTIKKELI ======================================= */
/* Word article CSS */

/*
#page
{
    margin-bottom: 10%;
    margin-top: 2px;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 16px;
}
*/
#Merkitys 
{
    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;

}

#Yleisyys 
{
    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

#Taivutusmuodot 
{
    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

#Vierussanat 
{
    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;

}

#Synonyymit 
{
    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
  
}

#Antonyymit 
{
    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    
}

.wp-block-heading {

    background: #F1F6FF;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

@media screen and (max-width: 768px){
    footer {
        padding: 32px 16px 48px 16px;
    }
    .footer-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
}

@media screen and (max-width: 490px){
    footer {
        padding: 32px 16px 48px 16px;
    }
    .footer-content {
        flex-direction: column;
    }
}

.pattern-img {
    width: 100%;
    height: 132px;
    display: flex;
    flex-shrink: 0;
    object-fit: cover;
}


/* ======================================= OHJEET ======================================= */

/* Koko etusivu */
#koko_ohjeet_sivu 
{
    margin-bottom: 10%;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The background of h1 title and first paragraph */
#ohje
{
    background: #F1F6FF;   
    height: 188px;
    width: 100%;
    display: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    border-color: #fff;
    margin-top: 2px;
    padding-top: 2%;
}

/* h1 title */
#Ohjeet
{
    padding: 0px 0px 16px 0px;
    border: 0px, 0px, 2px, 0px;
    border-color: #fff;
}