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

.tammatd {background-color: #D98F9A;}
.oritd {background-color: #91B9C4;}
        
        table {
            width:100%;
        }
        
            :root {
                --dark-primary: #11296b;
                --light-primary: #00509d;
                --dark-secondary: #ffcb05;
                --light-secondary: #ffdb57;
                --blackish: #0D1F52; 
                --offwhite: #ededed;
            }
            
            .kuvagalleria {
                background-color: #E07A5F; /* demon erottuvuus, voi poistaa */
                
                display: flex;
                justify-content: center;
                flex-flow: row nowrap;
                line-height: 0;
                width: 100%;
            }
            
            div[class^="kuvagalleria_"] {
                text-align:center;
            }
            
            .kg_kuva {
                height: 100%;
                max-width: 100%;
            }
            
            @font-face { 
                font-family: 'Graced Script'; 
                src: url('/ldbutik/ulkka/GracedScript_PersonalUseOnly.ttf') format('truetype');
            }
            
            body {
                max-width: calc(1700px + 4em);
                margin: 0 auto;
                background-color:var(--offwhite);
                font-family: 'Oxygen', sans-serif;
                font-size:1rem;
                padding: 0 2em;
                position: relative;
            }
            
            .allekirjoitus {
                position:absolute;
                bottom:-1rem;
                right: 0;
                left: 0;
                color:var(--dark-secondary);
                font-weight:normal;
                font-size:1rem;
                font-family: 'Graced Script', cursive;
            }
            .input-group {
                align-items: center;
            }
            
            .input-group-text {
                background-color:#F2CC8F;
                border-color:#ECB55C;
            }
            
            .form-floating {
                margin: 1rem 0;
            }
            
            .arvo {
                min-width:40%;
                font-weight:bold;
                color:#fff;
            }
            
            .label {
                display:inline-block;
                background-color:#E07A5F;
                padding: 0.5em 1em;
                border-radius: 0.5rem;
                margin-right: 0.5rem;
            }
            
            .sisalto {
                width:94vw;
                max-width:1000px;
                margin: 0 auto;
            }
            
            
h1 {
    font-family: 'Neucha', cursive;
    font-size: 50px;
    font-weight: normal;
    color: #50514f;
    text-align: center;
    margin: 1.5rem 0 2rem;
}
            
            h2 {
                font-family: 'Overlock SC', cursive;
                color: var(--light-primary);
                font-size:2rem;
                margin: 2rem .5rem .5rem;
            }

            h3 {
                font-family: 'Overlock SC', cursive;
                color: var(--dark-secondary);
                font-size:2rem;
                margin: 2rem .5rem .5rem;
            }
            

            pre, code {
                font-family: 'Oxygen Mono', monospace;
            }
            
            .flex {
                margin:1rem 0;
                display:flex;
                flex-wrap:wrap;
                justify-content:center;
                align-items:center;
                gap:1rem;
            }
            
            button {
                background-color:var(--dark-secondary);
                font-family: 'Oxygen Mono', monospace;
                border-radius:.5em;
                border:0;
                color: var(--offwhite);
                outline:none;
                font-size:1.1rem;
                padding:1em;
                margin:.5em;
                transition: .5s all;
            }
            
            button:not(:disabled, .active, [disabled]):hover {
                background-color:var(--dark-primary);
                cursor:pointer;
            }
            
            button:disabled, button[disabled] {
                opacity:.5;
            }
            
            .form-floating textarea {min-height:10em;}
            
            .active {
                background-color:#E07A5F;
            }
            
            .kontti {
                margin:1rem 0;
            }
            
            a {
                color:#000000;
            }
            a:hover {
                color:#3e4a46;
            }
            
            .flex > div:not(.twocolumns) {
                min-height: 10em;
                background-size: 100%;
                border-radius: 2em;
                border: 5px solid var(--dark-secondary);
                display: flex;
                align-items: center;
                justify-content: center;
                flex:1;
                cursor: pointer;
                transition: .5s all;
                -moz-transition: .5s all;
                -ms-transition: .5s all;
                -o-transition: .5s all;
                -webkit-transition: .5s all;
                background-position: center top;
            }
            
            .flex > div:not(.twocolumns):hover { 
                transition: .5s all;
                -moz-transition: .5s all;
                -ms-transition: .5s all;
                -o-transition: .5s all;
                -webkit-transition: .5s all;
                border-color: var(--dark-primary);
                background-size: 140%;
            }
            
            .preview {
                height: 100%;
                min-height: 10em;
                flex: 1;
                background-size: 100%;
                background-position: center left;
                position: relative;
                transition: .5s all;
                -moz-transition: .5s all;
                -ms-transition: .5s all;
                -o-transition: .5s all;
                -webkit-transition: .5s all;
            }
            
            .selitys {
                flex: 4;
                display:flex;
                flex-direction: column;
                gap: .5rem;
                padding: 0.5rem 1rem 0;
            }
            
            .selitys > * {
                margin: 0;
            }
            
            .twocolumns {
                overflow: hidden;
                display: flex;
                align-items: stretch;
                justify-content: center;
                flex:100% 1 0;
                cursor: pointer;
                transition: .5s all;
                -moz-transition: .5s all;
                -ms-transition: .5s all;
                -o-transition: .5s all;
                -webkit-transition: .5s all;
                gap:1rem;
                border-radius: 2em;
                border: 5px solid var(--dark-primary);
            }
            
            .twocolumns:hover {
                border-color: var(--dark-secondary);
            }
            
            .twocolumns:hover .preview {
                background-size: 120%;
            }
            
            .preview::after {
                content: '';
                background: linear-gradient(to right, transparent 50%, var(--offwhite));
                position: absolute;
                width: 100%;
                height: 100%;
            }
            

            
            @media screen and (max-width:600px) {
                
                h1 {margin:1em 0;font-size:10vw;}
                .flex {flex-direction:column;}
                .selite {width:100%;}
                
            }