*{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

header{
  
    display: flex;
    align-items: center;
    padding-top:40px;
    padding-bottom: 40px;
}

.valk{
  display: none;
}

.musta {
  display: block;
}

body{
  
  /*
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='2560' height='1080' preserveAspectRatio='none' viewBox='0 0 2560 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1305%26quot%3b)' fill='none'%3e%3cpath d='M2645.3333333333335 1080L0 1080 L0 721.86Q52.42 646.28%2c 128 698.7Q210.6 653.3%2c 256 735.9Q386.17 652.73%2c 469.3333333333333 782.9Q566.8 667.03%2c 682.6666666666666 764.5Q812.59 681.09%2c 896 811.02Q954.62 741.63%2c 1024 800.25Q1085.37 648.28%2c 1237.3333333333333 709.65Q1331.64 590.62%2c 1450.6666666666665 684.93Q1617.96 638.89%2c 1663.9999999999998 806.19Q1707.85 722.05%2c 1791.9999999999998 765.9Q1887.29 647.86%2c 2005.333333333333 743.15Q2135.74 660.22%2c 2218.6666666666665 790.63Q2312.03 670.66%2c 2432 764.03Q2544.87 663.56%2c 2645.3333333333335 776.43z' fill='rgba(234%2c 188%2c 0%2c 1)'%3e%3c/path%3e%3cpath d='M2773.3333333333335 1080L0 1080 L0 911.77Q53.76 752.19%2c 213.33333333333331 805.95Q326.94 706.23%2c 426.66666666666663 819.84Q551.62 731.46%2c 640 856.42Q751.99 755.07%2c 853.3333333333333 867.06Q981.78 782.18%2c 1066.6666666666665 910.63Q1094.5 810.46%2c 1194.6666666666665 838.29Q1248 763.63%2c 1322.6666666666665 816.96Q1421.26 787.56%2c 1450.6666666666665 886.15Q1505.81 727.96%2c 1663.9999999999998 783.11Q1806.15 711.93%2c 1877.333333333333 854.08Q1961.18 809.93%2c 2005.333333333333 893.78Q2101.5 776.61%2c 2218.6666666666665 872.78Q2269.89 796%2c 2346.6666666666665 847.22Q2435.47 722.69%2c 2560 811.5Q2704.04 742.21%2c 2773.3333333333335 886.25z' fill='rgba(255%2c 253%2c 0%2c 1)'%3e%3c/path%3e%3cpath d='M2602.6666666666665 1080L0 1080 L0 898.15Q117.73 887.88%2c 128 1005.6Q131.87 881.47%2c 256 885.33Q355.95 857.28%2c 384 957.22Q514.92 874.81%2c 597.3333333333333 1005.73Q685.84 880.91%2c 810.6666666666665 969.42Q850.79 881.54%2c 938.6666666666665 921.67Q1052.37 822.04%2c 1151.9999999999998 935.74Q1237.15 807.56%2c 1365.333333333333 892.71Q1467.13 866.51%2c 1493.333333333333 968.31Q1593.72 855.36%2c 1706.6666666666663 955.75Q1787.56 908.64%2c 1834.6666666666663 989.53Q1851.17 878.03%2c 1962.6666666666663 894.53Q2063.85 782.38%2c 2175.9999999999995 883.56Q2324.07 818.29%2c 2389.333333333333 966.36Q2513.47 877.16%2c 2602.6666666666665 1001.3z' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/path%3e%3cpath d='M2645.3333333333335 1080L0 1080 L0 1103.92Q76.57 967.15%2c 213.33333333333331 1043.72Q298.93 915.98%2c 426.66666666666663 1001.58Q559.67 921.25%2c 640 1054.25Q738.8 939.72%2c 853.3333333333333 1038.52Q892.99 950.17%2c 981.3333333333333 989.83Q1052.25 932.75%2c 1109.3333333333333 1003.67Q1268.71 949.72%2c 1322.6666666666665 1109.1Q1352.33 1010.76%2c 1450.6666666666665 1040.42Q1544.37 920.79%2c 1663.9999999999998 1014.5Q1772.76 995.26%2c 1791.9999999999998 1104.02Q1885.73 984.42%2c 2005.333333333333 1078.15Q2131.11 990.6%2c 2218.6666666666665 1116.38Q2285.9 970.28%2c 2432 1037.51Q2530.5 922.68%2c 2645.3333333333335 1021.18z' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1305'%3e%3crect width='2560' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  */
  background-image: url("taustakuva.svg");
  background-repeat:repeat-x;
  background-color: rgb(255, 255, 255);
  background-attachment:fixed;
  background-position: bottom;
  justify-content: center;
  align-items: center;
}


@media only screen and (max-width: 600px){
main {
    transform: scale(0.8);
    transform-origin: top;
}
  body{
    background-image: none
  }
}


main{
    display: grid;
    place-items: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
   
}


a {
    color: black;
    text-decoration: none;
}

.pdflogo{
  align-items: left;
}

.pdfnappi{
 margin-bottom: 12px;
}

.Pdf{
    display: grid;
    place-items: center;
    width: 294px;
    height: 135px;
    transition-duration: 00.4s;
    font-family:'Poppins', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 21px;
    text-align: center;
    color: #000000;
    margin: auto;
    padding: 15px;
    text-decoration-line: none;
    border: solid 2px #ffffff;
    
    background: #EABC00;
    border-radius: 12px;
}

.Pdf:hover{
    transition-duration: 00.4s;
    background-color: #D8AD00;
}

.check{
  padding-left: 1.2rem;
}


.container {
    display: grid;
    position: relative;
    
    margin-bottom: 12px;
    cursor: pointer;
    font-family:'Poppins', sans-serif;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 70px;
  }
  
  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 3px solid #EABC00;
    box-sizing: border-box;
    border-radius: 3px;
    background-color: rgba(238, 238, 238, 0);
  }
  
  /* On mouse-over, add a sakky background color */
  .container:hover input ~ .checkmark {
    background-color: #EABC00;
    transition-duration: 00.4s;
  }

  
  /* When the checkbox is checked, add background */
  .container input:checked ~ .checkmark {
      
    background-color: #ffffff;
  }

  .container:hover input:checked ~ .checkmark {
    background-color: #EABC00;
    transition-duration: 00.4s;
    transition: ease-in .2s;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #EABC00;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

input {
  width: 10rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  margin-bottom: 00.5rem;
  border-radius: 10px;
  border: 3px solid #EABC00;
  color: #f9f9f9;
}

.radiolb {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 70px;
}

/* Hide the browser's default radio button */
.radiolb input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radiobtn {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px; 
  background-color: rgb(255, 255, 255);
  border: solid 3px #EABC00;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiolb:hover input ~ .radiobtn {
  transition-duration: 00.4s;
  background-color: #EABC00;
}

/* When the radio button is checked, add a blue background */
.radiolb input:checked ~ .radiobtn {
  background-color: #ffffff;
  border: solid 7px #EABC00;
  height: 12px;
  width: 12px; 
  transition: ease-in .2s;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiolb input:checked ~ .radiobtn:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiobtn .radiolb:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.email {
  width: 10rem;
  background: white;
  height: 2.5rem;
  padding: 0 0.5rem;
  margin-bottom: 00.5rem;
  border-radius: 10px;
  border: 3px solid #EABC00;
  color: #000000;
}

.errorsymbol{
  color: #c42c2c;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
}

.error{
  color: #c42c2c;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.tallennus{
  color: #00a100;
  margin-left: 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.nappi{
    display: grid;
    place-items: center;
    width: 214px;
    height: 58px;
    top: 708px;
    background-color: #EABC00; 
    border-radius: 13px;
    border: none;
    transition-duration: 0.4s;
    text-align: center;
    justify-content: center;
    margin-top: 0px;
    border: solid 2px #ffffff;
    
    
}

.nappi:hover{
    transition-duration: 00.4s;
    background-color: #d8ad00;
}



.arvonta {
    display: grid;
    align-items: start;
  font-family: 'Poppins', sans-serif;
  color: #000000;
  font-size: 16px;
}

.tietosuoja {
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    column-gap: 2rem;
  font-family: 'Poppins', sans-serif;
  color: #000000;
  font-size: 16px;
}

 

.tietosuoja :hover {
  transition-duration: 0.6s;
  color: #d8ad00;
 
}

.egg {
  background-color: rgba(255, 255, 255, 0);
  width: 20px;
  height: 20px;
}


@media (prefers-color-scheme: dark) {
  
  .musta {
    display: none;
  }

  .valk {
    display: block;
  }

  body {
      color: #ffffff;
      background-color: #282828;
      background-image: none;
  }

  .container input:checked ~ .checkmark {
      
    background-color: #282828;
  }

  input {
    color: #282828;
  }

  .radiolb input:checked ~ .radiobtn {
    color: #282828;
  }

  .radiobtn {
    background-color: #282828 !important
  }

.email {
  color: #ffffff;
  background: #282828 !important
}

  .Pdf {
    border: #282828 !important
  }

  .nappi {
    color: #000000;
    border: #282828 !important
  }

  .arvonta {
    color: #ffffff !important;
  }

  a {
    color: #EABC00 !important
  }
a:hover {
  transition-duration: 0.6s !important;
  color: #ffffff !important
}
}