/* 
   Copyright 2021 Olaf H Gerlach
*/

html {
    --aw-blue: #3397B9;
    --aw-dark: #373736;
    --aw-light: #D5C9B6;
    --aw-back: #fff;
    
    color: var(--aw-dark);
    background: var(--aw-back);
}
a {
    color: var(--aw-blue);
    font-weight: bold;
    text-decoration: none;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font: 1em/1.5 Arial, Helvetica, sans-serif;
}
ul.what {
    display: grid;
    width: min( 80rem, 90% );
    margin: 3rem auto;
    padding: 0;
    gap: 0;
    list-style: none;
    grid-template-columns: repeat( auto-fill, minmax( 20rem, 1fr ) );
}
ul.what li { padding: 2em; }
ul.what h2 {
    padding:0;
    margin:0;
    font-size: 1em;
    line-height: 3em;
    vertical-align: middle;
    background: url(atlaswerk-icon.jpg) left / 2em no-repeat;
    padding-left: 3em;
}
footer {
    padding: 0;
    font-size: 75%;
    background: var(--aw-light);
    text-align: justify;
    margin-bottom:10em;
}
footer ul {
    width: min( 24em, 100% );
    margin: 3rem auto;
    list-style: none;
    padding: .5rem 1rem;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 6em, 1fr ) );
}
/*
  Legal
*/
section.legal {
    width: min( 35em, 85% );
    margin: 3rem auto;
}
section.legal p {
    text-align: justify;
    hyphens: auto;
}

/*
   Scroll / Snap
*/

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--aw-blue) var(--aw-back);
}

/*
html { scroll-snap-type: y proximity; }
body,
div.slide,
ul.what li,
footer,
section h2 { scroll-snap-align: start; }
*/

/* 
   Slide
*/

div.slide {
    margin: 0;
    margin-top: -6rem;
    padding: 0;
    height: 15rem;
    width: 100%;
    overflow-x: scroll;
}
div.slide div {
    cursor: grab;
    display: flex;
    align-items: flex-end;
    height: 100%;
}
div.slide div img {
    height: 50%;
    transition: all ease 2s;
    user-select: none;
}
div.slide div img:hover {
    height: 96%;
    border-radius: .3em;
    box-shadow: 0 0 .5em var(--aw-light);
}