/* font */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* perus muotoilu */

body {margin: 0;
    min-height: 100%;
    width: auto;
    font-family: 'Lexend', sans-serif;
    background-color: rgb(209, 236, 236);
    color: rgb(19, 39, 39); overflow-x: hidden;
}

.container {min-height: 100%;; display: flex; flex-flow: column nowrap; align-items: center; justify-content: top;
    text-align: center;
    padding: 1rem}

    .text-left {text-align: left !important;}

    .text-right {text-align: right !important;}

    .text-all {max-width: 40rem; display: flex; flex-flow: column wrap; gap: 1.3rem;}

    .text-small {font-size: 0.8rem; opacity: 65%}

    h2 {margin-top: 8rem}

    /* kuva muotoilu */

    img {margin-top: 5rem;
        max-width: 30rem;
        width: 30rem}

        @media screen and (max-width: 740px) {img {width: 25rem} }

@media screen and (max-width: 495px) {img {width: 20rem}}

@media screen and (max-width: 340px) {img {width: 14rem}}



/* navigaatio */

.nav {background-color: rgb(238, 107, 59); color: azure; margin: 0; top: 0; width: 100vw; position: absolute;
    padding: 1rem; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-evenly; gap: 1rem; white-space: preserve nowrap; user-select: none; border-bottom: 8px rgb(19, 39, 39) solid;}

    .nav a {color: rgb(0, 0, 0);}
    

    /* linkki muotoilu */

   a {transition: all 0.1s ease-in; text-underline-offset: 0.1rem; text-decoration-thickness: 0rem}

   p a {color: darkcyan}

p a:hover, a:focus{color:cadetblue;}

ul a {color: darkcyan}

ul a:hover, a:focus{color:cadetblue;}

h1,h2,h3 a {color: darkcyan}

h1,h2,h3 a:hover, a:focus{color:cadetblue;}

a:hover, a:focus { text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem}

.copyright a {text-decoration-thickness: 0.2rem;}

.copyright a:hover, a:focus {text-decoration-thickness: 0.4rem}

.copyright a {color: chocolate; transition: all 0.17s ease-in}

.copyright a:hover, a:focus {color: coral;}



/* mobiili lista */

.mobile-list {display: none; flex-flow: row wrap; text-align: left; padding: 0.5rem; border-radius: 1rem; font-size: 0.73rem; gap: 0.3rem; max-width: 30rem; margin-top: 5rem;}

.mobile-list a {color: rgb(218, 87, 39)}
    .mobile-list a:hover, a:focus {color: rgb(250, 101, 46)}

 


/* mobiili navigaatio */

.navmini {background-color: rgb(238, 107, 59); color: black; margin: 0; top: 0; width: 100%; position: absolute; padding-right: 1rem;
    justify-content: space-between;  display: flex; flex-flow: row nowrap; align-items: center;
    display: none; border-bottom: 8px rgb(19, 39, 39) solid;}

    .list-icon-1 {width: 5rem;}


    .navmini a {color: black}
 

    .dropdown {margin: 0; top: 3.9rem;; position: absolute; left: 0.2rem; background-color: rgb(218, 87, 39); box-shadow: 8px 8px 0px rgb(19, 39, 39); z-index: 1; display: flex; flex-flow: column nowrap; text-align: left; gap: 0.4rem; padding: 0.4rem; margin-left: 0.5rem; border-radius: 1rem; border: 4px rgb(19, 39, 39) solid}

    .dropdown {
        display: none; 
    }
    
    .list-wrapper:hover .dropdown {
        display: flex; 
    }
    

    
    /* etusivu logo */

    .logo_fp {width: 15rem; margin: 4rem 1rem 1rem 1rem; user-select: none;}

    /* teksti muotoilua */

    .mt {font-size: 2rem; letter-spacing: 1rem}

    .hai {font-size: 1.5rem; margin: 1rem 0 0 0;}

    address span {
        display: block;
      }

      p span {display: block;}

      

     
      /* copyright symbooli muotoilua */

    .copyright {font-size: 3rem; cursor: pointer; user-select: none; transition: all 0.17s ease-in; margin: 0;  }

    .copyright:hover {transform: scale(105%); }

      /* lista */

    


       /* alkuun nappi */

    #startbtn {background-color: coral; padding: 0.4rem; border-radius: 0.4rem; margin-top: 1.3rem}



    .startbtn-wrap a {color: azure; text-decoration: none}

    #startbtn:focus, #startbtn:hover {background-color: rgb(255, 163, 129);}

    .startbtn-wrap:hover, .startbtn-wrap:focus {transform:scale(102%)}

    .startbtn-wrap, #startbtn {transition: all 0.2s ease-in-out}

      /* mobiili muotoilua */

    @media screen and (max-width: 493px) {.mt {font-size: 1rem;}}

    @media screen and (max-width: 1165px) {.nav {display: none} .navmini {display: flex} .logo_fp {margin: 6rem 1rem 1rem 1rem} .link-item {display: none;} .mobile-list {display: flex;} img {margin-top: 8rem}}