*{
margin: 0;
padding: 0;
} 
.paa {
background:linear-gradient(to top,
rgba(38, 150, 60, 0.5) 0%,
rgba(160, 21, 114, 0.3) 50%,
rgba(168, 68, 21, 1) 100%);
width: 100%;  
height: 1500px; 
text-align: center;
background-position: center;
background-size: cover;
margin:0;
}

.paa2 {
background:linear-gradient(to top,
rgba(38, 150, 60, 0.5) 0%,
rgba(42, 114, 187, 0.3) 50%,
rgba(168, 68, 21, 1) 100%),
url("Treffitetu.jpg");
width:100%;
height: 150vh; 
text-align: center;
background-position: center;
background-size: cover;
margin:0;
}
.navigointialue {
width: 1500px;
heigth: 75px;

}
.ikoni {
width: 200px; 
float: left; 
height: 70px;


}
.logo {
color: rgb(226, 65, 16); 
font-size: 35px;
font-weight: bold;
font-family: 'Gill Sans';
cursor:pointer; 
transition:0.5s ease; 
}
.logo:hover {
transform: scale(1.2);
}
.valikko {
width: 400px;
height: 70px; 
float: left;
}
.valikko ul { 
float: left; 
display: flex; 
align-items: center;
gap: 50px; 
padding-left: 125px; 
} 
.valikko ul li { 
list-style: none; 
margin: 15px; 
position: relative; 
} 
.valikko ul li a { 
text-decoration: none; 
color: #8cff00;
background: rgb(168, 35, 35); 
 font-family: "Franklin Gothic Medium"; 
 font-weight: bold; 
 font-size: 30px; 
 transition: 0.4s ease-in-out; 
 } 
.valikko ul li a:hover { 
background: red; 
 } 
.valikko ul li .pudotusvalikko { 
display: none; 
width: 200px; 
position: absolute; 
top: 100%; 
left: 0; 
background: rgb(172, 24, 24); 
padding: 0; 
} 
 .valikko ul li:hover .pudotusvalikko { 
 display: block; 
 } 
 .valikko ul li .pudotusvalikko li { 
 display: block; 
 margin: 0; 
 }
.haku {
width: 300px;
float: right;
}
.hakemisto {
font-family: 'Times New Roman';
width: 200px;
height: 40px; 
background-color: transparent;
border: solid black;
color: red;
float: left;
border-right: none;
font-size: 20px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.nappi {
width: 100px;
height: 40px; 
background-color: orange;
border: 2px solid orange;
color: white; 
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.nappi:focus {
outline: none;
}
.hakemisto:focus{
outline: none;
}

.Lomake {
 width: 350px;
height: 450px;
background-color: black;
position: absolute;
top: 150px;
right: 15px;
border-radius: 20px;
padding: 25px;
}
.Lomake h2{
width: 200px; 
text-align: center; 
color: orange;  
font-size: 20px;
background-color: red; 
border-radius: 10px; 
margin: 2px; 
padding: 8px; 

}
.Lomake input {
width: 240px; 
height: 40px; 
font-size: 15px; 
background: transparent; 
margin-top: 30px; 
border-left: none; 
border-right: none; 
letter-spacing: 1px; 
border-bottom: solid 1px orange; 
}
.Lomake input:focus{
outline:none;
}
::placeholder {
color: white;
font-family:arial;
}
.Kirjaudunappi {
width: 240px;
height:40px;
background-color: orange;
border:none;
margin-top: 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
color:white;
transition: 0.4s ease;
}
.Kirjaudunappi:hover {

background-color: violet;
color: black;

}
.Kirjaudunappi a{
color:blue;
text-decoration: none;
font-weight:bold; 
}

.Lomake .Johdatuslinkki {
font-family: arial; 
text-align: center; 
font-size: 20px; 
padding-top: 20px; 
}
.Lomake .Johdatuslinkki a{
text-decoration: none; 
color:red;
}
.Kirjaudu {
    padding-top: 15px; 
    padding-bottom: 10px; 
    text-align: center; 
}
.Sisalto {
background:linear-gradient(to top,
rgba(38, 150, 60, 0.5) 0%,
rgba(42, 114, 187, 0.3) 50%,
rgba(168, 68, 21, 1) 100%),
url("Rakkaus.jpg");
height: 2500px; 
width: 2200px; 
margin-bottom: 0px; 
font-size: 20px;
line-height: 1.6;
text-align: center;
margin: 20px auto;
}

.Sisalto h1 {
    max-width: 750px;
    padding-top: 125px; 
    padding-left: 40px; 
    font-size: 70px;
    line-height: 1.3;
    font-weight: 700;
    color: #1cbba6;
   
}

.Esittelyteksti {
    max-width: 600px;
    padding-left: 10px; 
   padding-top: 5px; 
    font-size: 30px;
    line-height: 1.8;
    font-family:Ubuntu; 
    color: white;
}

.Esittelynappi {
    padding: 15px 30px;
    border: none;
    border-radius: 30px;

    background-color: #d96b87;
    color: white;

    font-size: 17px;
    font-weight: 600;
    cursor: pointer;

    transition: background-color 0.3s ease,
                transform 0.3s ease;
}

.Esittelynappi:hover {
    background-color: #bd4e6d;
    transform: translateY(-3px);
}

.Keskiosa{
  width: 1525px;
 height: 1000px; 
  margin-top: 200px;
    background-image: url("speeddating.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    text-align: center;
  border-radius: 10px; 
}

.Keskiosa h2 {
font-size: 35px; 
font-weight: bold; 
font-family: Helvetica; 
padding-left: 15px; 
margin-top: 9%; 
letter-spacing: 2px; 
color:rgb(255, 242, 255);
}
.Keskiosa .Keskiosanteksti {
Padding-left: 20px;
font-size: 20px; 
color:white; 
Padding-bottom: 20px; 
Font-family:Helvetica; 
Letter-spacing: 1.2 px; 
Line-height:30px;     
}

.Keskiosa .Keskinappi {
color: white; 
background-color: violet; 
width: 200px; 
height: 100px; 
border-radius: 10px; 
font-weight: bold; 
}
.Keskiosa .Keskinappi a {
text-decoration:none; 
color:white;
transition: ease 0.3s; 
}
.Keskinappi:hover {
background-color:  red;
}
.Keskiosa-2 {
background: linear-gradient(to top,
    rgba(60, 0, 15, 0.9) 20%,
    rgba(130, 0, 40, 0.7) 20%,
    rgba(200, 40, 90, 0.5) 40%,
    rgba(255, 150, 180, 0.4) 20%
);
width: 1500px; 
border-radius: 10px; 
}

.Keskiosa-2 h1 {
color: rgb(146, 86, 86); 
font-size: 35px;
margin-top: 0; 
}
.kortit{
display: flex; 
flex-wrap: wrap; 
justify-content: center; 
gap: 25px; 
margin-top: 25px; 
}
.kortti {
width: 250px;
height: auto; 
border-radius: 10px; 
overflow: hidden; 
}
.kortti img {
width: 100%; 
height: auto; 
object-fit: cover; 
}

.kortinsisalto {
padding: 20px; 
}
.kortinsisalto h2 {
font-size: 24px; 
font-weight: bold; 
margin-bottom: 10px; 
color: white; 
}
.kortinsisalto p{
font-size: 14px; 
margin-bottom: 10px; 
color: white; 
}
.Nappula {
display: inline-block; 
text-decoration: none; 
font-weight: bold; 
background-color: red; 
color: white;
border-radius: 10px;  
width: 100px; 
height: 25px;  
}

.Hyodytosio {
    text-align: center;
    padding: 30px;
    background: url(Hyodytpari.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    text-align: center;
  border-radius: 10px; 
}

.Hyodytosio h1 {
  padding-top: 10px; 
    margin-bottom: 30px;
    color: blue; 
  font-size: 30px; 
  font-family: Helvetica; 
}

.Hyotyalue {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 1500px; 
    padding-left: 0px; 
}

.Kohde {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    width: 125px;
}

.Kohde i {
    font-size: 30px;
}
.Harrastus {
  color: blue; 
  font-weight: bold; 
  font-size: 20px; 
  overflow: hidden; 
}
.Rakastu {
color: Pink; 
font-weight: bold; 
  font-size: 20px; 
}

.Palutekanavaosio{
background-color: rgb(255, 136, 0); 
width: 1500px;
border-radius: 10px; 
}
.Palautekanava {
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
background: url(Paritaivas.jpg); 
 background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    text-align: center;
  border-radius: 10px; 
}
.Palautekanava h2{
font-size:  30px; 
font-family: arial: 
font-weight: bold; 
color:  yellow; 
}
.Viesti {
width: 600px; 
height: 300px; 
border-radius: 10px; 
border: solid 1px yellow;
background-color: transparent,blue;
}
::placeholder {
font-family:arial;
color:white;
}

.palikat{
display: flex; 
flex-wrap: wrap; 
justify-content: center; 
gap: 25px; 
margin-top:0; 
background-color: black;
width: 100%;  
padding-bottom: 50px; 
padding-top: 50px; 
}
.palikka1 {
width: 350px;
height: auto; 
border-radius: 10px; 
overflow: hidden; 
background: linear-gradient(to top, rgb(74, 121, 145));
}
.palikka2 {
width: 300px;
height: auto; 
border-radius: 10px; 
overflow: hidden; 
background:linear-gradient(to top, rgb(75, 170, 160));
}
.palikka3 {
width: 300px;
height: auto; 
border-radius: 10px; 
overflow: hidden; 
background:linear-gradient(to top, rgb(125, 136, 26));
}