/* TEEMAN SIVUSTONLAAJUISET PERUSTYPOGRAFIA-ASETUKSET */
/* Tämä tiedosto sisältää SIVUSTON perustypografian.
Muita muotoiluja sijaitsee erilisessä tiedostossa materiaali.css, jossa saattaa olla myös joitain erityismuotoiluja
typografiaan liittyen, jotka yliajavat nämä asetukset.*/

html {
    font-size: 62.5%; /* Asetetaan peruskoko 10px, helpottaa rem-yksiköiden käyttöä */
}
body {
    font-family: 'Open Sans', sans-serif; /* Perusfontti */
    font-size: 1.6rem; /* Peruskoko 14px */   
    line-height: 1.6;
}
h1 {
    font-family: "Comfortaa", sans-serif;
    font-size: 2.9rem; /* Peruskoko 36px */
    font-weight: 300; /* Kevyt fontti */
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.2;
    color: #7d2983; /* Otsikoiden väri */
}
h1.entry-title {
    display: block;
    width: fit-content;
    min-width: 490px;
    padding: 10px 25px;
    background-color: #f9f3e19c;
    border-radius: 8px;
    animation-duration: 2s;
    animation-name: slide-in-left;
}
.front-page h1.entry-title {
    width: 42%;
    min-width: 490px;
    padding: 10px 15px;
}
@keyframes slide-in-left {
  from {
    translate: -150vw 0;
    scale: 300% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

h1.cat-page {
    display: block;
    width: 490px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 400;
    font-size: 3.6rem;
    text-transform: uppercase;
    color: #dfd9e8;
    background-color: rgb(0 0 0 / 35%);
    border-top: 3px solid #e0e0e0d1;
    border-bottom: 3px solid #000000a6;
    border-radius: 16px;
    text-align: center;
    padding: 10px 0;
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
    animation-delay: 1s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
h2 {
    font-family: "Open Sans Condensed", Arial, sans-serif;
    font-size: 5.5rem;
    font-weight: 300;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    line-height: 1.3;
    color: #7d2983;
}
h2.category-posts-wrapper {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    text-transform: uppercase;
    color: #7d2983;
    border-bottom: 2px solid #7d2983;
    padding-bottom: 5px;
    margin-bottom: 1rem;
}
h2.wpb_heading.wpb_video_heading {
    font-family: 'Open Sans', sans-serif;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}
h2.wpb_heading.wpb_gallery_heading {
    font-family: "Open Sans", sans-serif;
    margin-top: 0;
    line-height: 1.3;
    font-size: 3.2rem;
    font-weight: 500;
    margin-top: 0.4em;
    margin-bottom: 0.2em;
    color: #000;
    display: block;
    background-color: #f2cc81;
    padding: 5px;
    text-align: center;
}
.salasanaikkuna h2 {
    font-size: 4.9rem;
    line-height: 1.1;
}
.front-page h2 {
    font-family: "Open Sans Condensed", Arial, sans-serif;
    font-size: 3.9rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
    color: #7d2983;
}
h2.wpb_heading.wpb_singleimage_heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 2.7rem;
    margin: 4rem 0 1.6rem 0;
}
.category-posts-wrapper .category-posts h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 2.7rem;
    font-weight: 600;
}
h2.etusivu {
    font-size: 6rem;
    padding-bottom: 3rem;
}
h3 {
    font-family: "Open Sans", sans-serif;
    margin-top: 0;
    line-height: 1.3;
    font-size: 3.2rem;
    font-weight: 500;
    margin-top: 0.4em; 
    margin-bottom: 0.2em;
    color: #68236d;
}
.puhekupla-text h3 {
  margin: 0 0 10px 0;
  font-size: 3.5rem;
}

h4, h5, h6 {
    font-family: "Lato", sans-serif;
    line-height: 1.3;
}
h4 {
    font-size: 2.7rem;
    font-weight: 600;
    margin-top: 1.2em;
    margin-bottom:1.3em;
    color: #240d27;
}
h4.harjoitus {
    display: block;
    font-size: 2.6rem;
    background-color: #2a9d8f;
    margin: 0 -2% 2rem -2%;
    border-radius: 13px 13px 0 0;
    padding: 1.2rem;
}
h5 {
    font-size: 2.4rem;
    font-weight: 400;
    margin-top: 1.8rem;
    margin-bottom: 0;
}
h6 {
    font-size: 2rem;
}
p, li{   
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 2.5rem;
    line-height: 3rem;
    padding-bottom: 2rem;
    margin-block-start: 0;
    margin-block-end: 0;
}
p.etusivu {
    font-family: "Comfortaa", sans-serif;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.4;
}
.puhekupla-text p {
  margin: 0;
  font-size: 2.9rem;
  font-style: italic;
  font-weight:600;
}
.infolaatikko p {
    font-size: 2.2rem;
    line-height: 1.3;
}
em, i {
    font-weight: 500;
    color: #000;
}
/*Ylätunnnisteen typografiaa*/

/*Navigointivalikon linkkien muotoilu*/
.menu li a {
    font-family: "Comfortaa", sans-serif;
    font-size: 1.9rem;
    letter-spacing: -.03rem;
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    display: block;
    height: 100%; /* Korkeus täyttää headerin korkeuden */
}

/* Toisen tason valikon linkit */
.menu-item-has-children .sub-menu li a {
    font-family: 'Comfortaa', cursive;
    color: #321250;
    font-size: 1.8rem;
    line-height: 2.2rem;
    letter-spacing: -.03rem;
}

.subfooter p {
    font-size: 1.8rem;
    font-style: italic;
}
.front-page p {
    font-family: "Open Sans", sans-serif;
    font-size: 1.9rem;
    line-height: 2.6rem;
    padding-bottom: 1rem;
    margin-block-start: 0;
    margin-block-end: 0;
}
a {
    color: #0073aa; /* Linkkien väri */
    text-decoration: none;
}
a:visited {
    color: #934097; /* Linkkien väri */
    text-decoration: none;
}
a:hover {
    text-decoration: underline; /* Linkkien hover-efekti */
}
.breadcrumbs {
    font-family: 'Comfortaa', cursive;
    font-size: 1.4rem;
    color: #555;
}
/* Alatunnisteen edellinen ja seuraava artikkeli linkki */
a.prev, a.next {
    font-family: "Lato", sans-serif;
    font-size: 2.2rem;
    text-decoration: none;
    color: #7d2982;
}
a.prev:hover, a.next:hover {
    text-decoration: underline;
}
ul, ol {
    margin-block-start: 0; /* Poistetaan oletusmarginaalit */
    margin-block-end: 0;
    padding-inline-start: 0; /* Poistetaan oletussisennys */
    padding-left: 2em; /* Sisennetään listat */
}
blockquote {
    border-left: 2rem solid #2a9d8f;
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
}
blockquote p {
    color: #2a9d8f;
    font-size: 2.9rem;
}
blockquote em {
    color: #007c97;
}

.wpb_single_image figure figcaption, .erillinen-kuvateksti {
    font-family: "Open Sans", sans-serif;
    font-size: 2.1rem!important;
    line-height: 2.8rem;
    font-style: italic;
    color: #666;
    background-color: #f2cc8166;
    text-align: left;
    border-radius: 0 0 20px 20px;
    padding: 0.5em;
    margin-top: 0 !important;
}
.erillinen-kuvateksti {
    margin-top: -35px !important;
}

code, pre {
    font-family: 'Roboto Mono', monospace;
    font-style: normal;
    white-space: normal;
    font-size: 2.1rem;
    background-color: #dbdbdb;
    color: #3a265d;
    padding: 0 5px;
}
pre {
    background-color: #f4f4f400;
    padding: 1em;
    overflow-x: auto;
    border-radius: 4px;
    margin-bottom: 1.5em;
}

/* Taulukon muotoilut */
table {
    font-family: "Lato", sans-serif;
    font-size: 2.3rem;
    line-height: 3.2rem;
    width: 100%;
    border-collapse: collapse;
    border: 1px;
    padding: 10px;
    margin: 10px 0;
    background-color: #e7ecf4;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #66808d;
    text-align: left;
}
th {
    background: #a5d0ff;
}
/* Otsikkorivi */
thead tr {
    background-color: #a9dadc;
}

/* Lihavointi tietosoluissa (esimerkiksi luokan nimille) */
td strong {
    font-weight: 700;
    color: #1a1a1a;
}

/* Painikkeet */
.peruspainike a.vc_general.vc_btn3 {
    font-family: "Open Sans", sans-serif;
    font-size: 2.1rem!important;
    line-height: 53px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0 30px;
    height: 60px;
    border-radius: 30px;
    background-color: #2a9d8f;
    color: #0a0a0a;
    border: 4px groove #2a9d8f;
    -webkit-box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 1);
    -moz-box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 1);
    box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 1);
}
input[type="submit"] {
    font-family: "Open Sans", sans-serif;
    font-size: 1.9rem !important;
    line-height: 23px;
    font-weight: 500;
    letter-spacing: 0;
    height: 51px;
    margin-top: 10px;
    border-radius: 30px;
    background-color: #2a9d8f;
    color: #0a0a0a;
    border: 4px groove #2a9d8f;
    -webkit-box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 1);
    -moz-box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 1);
    box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 1);
}
/*täysileveä painike*/
.vc_btn3-container.vc_btn3-center .vc_btn3-block.vc_btn3-size-md {
    font-size: 1.4rem;
    padding: 0;
}
.peruspainike a.vc_general.vc_btn3:hover {
    background-color: #e0ded7;
    border: 4px groove #e0ded7;
    -webkit-box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 0);
    -moz-box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 0);
    box-shadow: 5px 5px 14px -3px rgba(65, 95, 107, 0);
}
/* Erityistyylejä teksteille */
.red {
    color: #9c2d2c;
}
.green {
    color: #2a9d8f;
}
.blue {
    color: #0221ac;
}
.violetti {
    color: #9902ad;
}

/*koodimerkkauksen muotoilut*/

.marginleft1 {
    margin-left: 2.5rem;
}

/* Termi-tooltip sisältötekstissä */
.termi-tooltip {
  position: relative;
  border-bottom: 2px dashed #8f0101;
  color: #530101;
  font-style:italic;
  cursor: help;
}

.termi-tooltip .laatikko {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -100%);
    max-width: min(360px, calc(100vw - 2rem));
    background: #fff6f6;
    border: 1px solid #ccc;
    padding: 8px 12px;
    width: 360px;
    font-size: 1.9rem;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 999;
}

.termi-tooltip:hover .laatikko {
  display: block;
}