/* The color palette */
.pblue { color: #0082C9;}
.plblue { color: #55ABDB;}
.pdblue {color: #004064;}
.pbrown {color: #D4940D;}
.plbrown {color: #E6D3AB;}
.pdbrown {color: #6A4A06;}
.pblack {color:#231902;}
.pwhite {color: #EDEAE3;}
.bg-plbrown {background-color: #E6D3AB;}

:root {
    --fg-light: #231902;
    --bg-light: #ede7db;
	--fg-dark: #231902;
    --fg: var(--fg-light);
    --bg: var(--bg-light);

    --hpad: 0px;
    --form-width: 95%;

    @media screen and (min-width: 768px) {
        --hpad: var(--vs-s);
        --form-width: 75%;
    }

    @media screen and (min-width: 992px) {
        --hpad: var(--vs-xl);
        --form-width: 55%;
    }
}

body {
    background: var(--bg-light);
    color: var(--fg-light);
}

header  {
/*    background-color: #E6D3AB;*/
    animation: height;
    animation-timeline: scroll(root);

}

header > div {
    animation: titlesize;
    animation-timeline: scroll(root);
}

header h3 {
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}

@keyframes height {
    from {
        transform-origin: top left;
        transform: scaleY(1);
    }
    to {
        transform-origin: top left;
        transform: scaleY(0.5);
    }
}
 @keyframes titlesize {
    from {
        transform-origin: top left;
        transform: scaleY(1);
    }
    to {
        transform-origin: top left;
        transform: scaleY(1.3);
        transform: scaleX(0.5)
    }
 }

 .logo {
    width: 100%;
    max-width: 500px;
    min-width: 250px;
    margin: 0 auto;
  
    padding: var(--vs-s) 0; 
}

.two-column {
/*    display: grid;
    grid-template-columns:  1fr auto ;
    gap: var(--vs-s);
*/
    display: flex;
    flex-direction: row ;
    flex-wrap: wrap;
    align-items: center;
}

.two-column > * {
    flex: 1 1 ;
}