@font-face {
        font-family: 'LexendDeca';
        src: url('./gfx/LexendDeca-VariableFont_wght.ttf') format('truetype')
    }

    body {
        background-color: #c2c2b6;
        background-image: url("./gfx/background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        margin: 0;
        padding: 0;
        border: 0;
        font-family: 'LexendDeca';
        font-size: 17px;
        color: #474b39;
    }
    
    h1 { margin: 0; font-size: 1.5em; font-weight: bold; }
    h2 { margin: 0; font-size: 1.2em; font-weight: bold; }
    
    a.link, a.link:hover, a.link:visited{
        color: #c5c5b7;
        text-decoration: none;
        background-color: #474b39;
    }
    
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: center;
    }
    
    .desc {
        margin: 0;
        padding: 100px 0;
        border: 0;
        text-align: center;
        display: block;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        width: 600px;
    }
    
    .desc.long{
        width: 75%;
        text-align: left;
    }
    
    .desc.short{
        width: 75%;
        text-align: center;
    }
    
    .desc.footer{
        color: #c5c5b7;
    }
    
    .desc.footer p{
        margin: 10px 0;
    }
    
    .footer a, .footer a:hover, .footer a:visited{
        color: #474b39;
        text-decoration: none;
        background-color: transparent;
    }
    
    .header {
        background-image: url("./gfx/header-desktop.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        height: 200vh;
        color: #cdb898;
    }
    
    .header .desc {
        opacity: 0.0;
        top: 150vh;        
        transform: translate(-50%, 0);
        transition: all 2s;
    }
    
    .header .desc.visible {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    
    .header2 {
        background-image: url("./gfx/kultura-przestrzeni/4.jpg");
        color: #cdb898;
    }
    
    .about {
        background-image: url("./gfx/background2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        color: #474b39;
    }
    
    .footer{
        font-size: 1.2em;
        margin-top: 200px;
    }
  
    .sections {
        color: #474b39;
    }
    
    .sections img {
        width: 100%;
    }
    
    img.tile{
        width: calc(25% - 10px);
        margin: 5px;
    }
    
    /*
    .more {
        width: 60px;
        aspect-ratio: 4;
        background: radial-gradient(circle closest-side, #474b39 90%, #0000) 0/calc(100%/3) 100% space;
        clip-path: inset(0 100% 0 0);
        animation: l1 1s steps(4) infinite;
    }
    @keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}

    .more {
      height: 30px;
      aspect-ratio: 1;
      display: grid;
      background:
        radial-gradient(farthest-side,#000 15%,#0000 18%),
        radial-gradient(50% 100% at 50% 160%,#eee 95%,#0000) top/100% 50%,
        radial-gradient(50% 100% at 50% -60%,#eee 95%,#0000) bottom/100% 50%;
      background-repeat: no-repeat;
    }
    .more:before {
      content: "";
      background: inherit;
      opacity: 0.6;
      animation: l1 1s infinite;
    }
    @keyframes l1 {
      to {transform:scale(3);opacity:0}
    }
    */
    
    .more{
        display:inline-block;
        background-color: #474b39 !important;
        color: #c5c5b7 !important;
        text-decoration: none;
        padding: 0 3px;
    }

    @media (max-aspect-ratio: 3/4) {
        h1{
            font-size:1.2em;
        }
        .header {
            background-image: url("./gfx/header.jpg");
            height: 100vh;
        }
        .header .desc {
            position: relative;
            top: 72vh;
        }
        
        .about{
            height: 100vh;
        }
        
        .about .desc {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .desc {
            width: 75%;
        }
        img.tile{
            width:37%;
            margin: 3px;
        }
    }