body {
  background-color: blue;
}
h2 span {
  background-color: #ffffff;
  padding: 1rem;
}
a {
  color: #3333ff;
  text-decoration: none;
}
a:hover {
  color: #141414;
  text-decoration: underline;
}
a:focus {
  color: #141414;
  outline: 2px solid #141414;
}
.punainen {
  background-color: #e4002b;
  background-color: #3333ff;
}
.punainen, 
.punainen p,
.punainen a {
  color: white;
}
.valkoinen {
  background-color: white;
}
.white {
  color: white;
}
.soppana {
  background-color: #EBD5BC
}
.simojarvi {
  background-color: #3333ff;
}
.metso {
  background-color: #141414;
}
.keltainen {
  background-color: #c69214;
  background-color: #e4002b;
  background-color: #3333ff;
  border: 0.75rem solid #ebd5bc;
}
.keltainen,
.keltainen p,
.keltainen a,
.keltainen span {
  color: white;
}
img,
iframe {
  max-width: 100%;
}
#main-background {
  min-height: 90vh;
  background-size: cover;
  background-position: bottom center;
  background-color: white;
  
}
.valinta {
  margin: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-out;
}
.valinta:hover {
  transform: scale(1.0);
}
.valinta img {
  max-width: 90px;
  height: auto !important;
  padding-right: 0.25rem;
}
.valinta {
  display: flex;
  flex-direction: row;
  min-height: auto;
}
@media(min-width: 1100px) {
  .valinta {
    margin: 1.5rem;
    display: block;
    min-height: 270px;
    text-align: center;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
  .valinta.pyorea {
    min-height: 200px;
  }
  .valinta img {
    max-width: 150px;
    padding: 0.5rem;
  }
  .valinta:hover {
    transform: scale(1.1);
  }
}
.seuraavaan-vaiheeseen a {
  margin-top: 1rem;
}
.pyorea {
  border-radius: 100px;
  width: 200px;
}
.btn-primary {
  background-color: #3333ff;
  border-color: #3333ff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #141414;
  border-color: #141414;
}
a.btn-primary:hover {
  text-decoration: none;
}

footer h2 {
  font-size: 1.5rem;
}
ul {
  padding-left: 0px;
}
li {
  list-style: none;
}
#nappi-sivulle-1-kello:hover {
  cursor: pointer;
}
.ranua-border {
  border: 0.5rem solid #3333ff;
}
header.pb-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.mustalaatikko {
  background-color: #141414;
  padding: 1rem;
}
.punainenlaatikko {
  background-color: #e4002b;
}
.mustalaatikko, .punainenlaatikko {
  color: white;
  min-height: 38vh;
}
.mustalaatikko h2, .punainenlaatikko h2 {
  padding-top: 10px;
}
.desktop {
  display: unset !important;
}
.mobiili {
  display: none !important;
}
@media (max-width: 1100px) {
  .mustalaatikko, .punainenlaatikko {
    min-height: 41vh;
  }
}
@media (max-width: 992px) {
  .mustalaatikko, .punainenlaatikko {
    min-height: 49vh;
  }
}
@media (max-width: 768px) {
  .desktop {
    display: none !important;
  }
  .mobiili {
    display: unset !important;
  }
  .mustalaatikko, .punainenlaatikko {
    min-height: 35vh;
  }
  .nappi-seuraavalle {
    margin-bottom: 60px;
    padding: 5px;
  }
  .seuraavaan-vaiheeseen {
    margin: 0 !important;
  }
  .valkoinen img {
    padding-bottom: 20px;
  }
  #nappi-sivulle-1 {
    margin-top: 15px;
  }

}
@media (min-width: 576px) {
  .py-sm-5 {
    padding-top: 2rem !important;
  }
}
.pt-3, .py-3 {
  padding-top: 0.6rem !important;
}
.valkoinen.p-3, .valkoinen.m-3 {
  padding: 0.1rem !important;
  margin: 0.1rem !important;
}
#nappi-sivulle-1 {
  margin-top: 25px;
}

img.ranuatint {
  filter: hue-rotate(600deg);
}
.height-vh-80 {
  min-height: 80vh;
}
.varjo h1,
.varjo h4,
.varjo p {
  text-shadow: 0px 0px 15px #ebd5bc;
  -webkit-text-stroke: 1px #3333ff;
  text-stroke: 1px #3333ff;
  color: white;
}
.varjo p a {
  -webkit-text-stroke: 0px #3333ff;
  text-stroke: 0px #3333ff;
}
.varjo p a:hover {
  text-shadow: 0px 0px 0px #ebd5bc;
}

.profiili h3 {
  font-size: 1rem;
}

/*
 * punainen #e4002b
 * keltainen #c69214
 * vihrea #006f44
 */