@font-face {
  font-family: 'title';
  src: url(../fonts/Tagesschrift-Regular.ttf)
}

@font-face {
  font-family: 'initial';
  src: url(../fonts/capo_verso.ttf)
}

@font-face {
  font-family: 'text';
  src: url(../fonts/IMFellDWPica-Regular.ttf)
}

@font-face {
  font-family: 'itallics';
  src: url(../fonts/IMFellDWPica-Italic.ttf)
}

        * {
            box-sizing: border-box;
        }

        p {
            color: #3d3428;
            font-size: 16px;
            text-align: left;
        }
        
        a {
            
            text-decoration: none;
        }

        body {
            font-family: 'text';
            background-image: url("../images/pattern.png");
            background-repeat: repeat;
            background-size: 500px;
            color: #2c2416;
            line-height: 1.6;
        }
        
        .pagesplit {
            display: flex;
            text-align: center;
            justify-content: center;
            flex-direction: row;
            width: 90%;
            gap: 5%;
            margin: 4% auto 4% auto;
            align-items: flex-start;
        }

        .framework {
            position: sticky;
            border:  6px solid #eabb2d;
            top: 4%;
            flex: 1;
            height: 88vh;
            min-width: 550px;
            background-image: url(../images/background.png);
            overflow: hidden;
        }

        .floor {
            position: absolute;
            top: 68%;
            z-index: 0;
        }

        .desk-still, .desk-hover {
            position: absolute;
            left: 0;
            top: 0;
        }

        .desk-still img, .desk-hover img {
            height: 50vh;
            min-height: 180px;
            max-height: 450px;
        }

        .desk-hover img {
            display: none;
        }

        .desk-wrapper {
            position: absolute;
            height: 50vh;
            width: 150px;
            bottom: 15%;
            right: 0;
            z-index: 8;
        }

        .desk-wrapper:hover .desk-hover img, .desk-wrapper:focus-within .desk-hover img {
            display: block
        }

        .desk-wrapper:hover .desk-still img, .desk-wrapper:focus-within .desk-still img {
            display: none
        }        

        .floor img {
            width: 100%;
        }
        
        .chair, .chair-blink {
            position: absolute;
            left: 0;
            top: 0;
        }

        .chair img, .chair-blink img {
            height: 40vh;
            min-height: 250px;
        }

        .chair-blink img {
            display: none;
        }

        .chair-wrapper {
            position: absolute;
            left: 5%;
            bottom: 5%;
            width: 40vh;
            height: 40vh;
            z-index: 8;
        }

        .chair-wrapper:hover .chair-blink img, .chair-wrapper:focus-within .chair-blink img {
            display: block
        }

        .chair-wrapper:hover .chair img, .chair-wrapper:focus-within .chair img {
            display: none
        }

        .portrait-still, .portrait-hover{
        position: absolute;
        left: 0;
        top: 0;
        }

        .portrait-still img, .portrait-hover img {
            height: 38vh;
            min-height: 220px;
        }

        .portrait-hover {
            display: none;
        }

        .portrait-caption {
            position: absolute;
            left: 24vh;
            width: 180px;
            z-index: 9;
            display: none;
            pointer-events: none;

            background-image: url(../images/background.png);
            border: solid #eabb2d 3px;
            color: #3d3428;
            align-content: center;
        }

        .portrait-text {
            border: none;
            font-family: 'itallics';
            font-size: 30px;
            text-align: center;
            color: #3d3428;
            padding: 10px;
        }

        .quote {
            margin-top: -20px;
            font-size: 25px;
            font-family: 'title';
            text-align: right;
            color: #3d3428;
        }

        .portrait-wrapper {
            position: absolute;
            left: 10%;
            top: 5%;
            width: 120px;
            height: 120px;
        }

        .portrait-wrapper:hover .portrait-caption,
        .portrait-wrapper:focus-within .portrait-caption,
        .portrait-wrapper:hover .portrait-hover,
        .portrait-wrapper:focus-within .portrait-hover {
            display: block;
        }

        .portrait-wrapper:hover .portrait-still,
        .portrait-wrapper:focus-within .portrait-still {
            display: none;
        }

        .feed {
            display: flex;
            flex-direction: column;
            height: fit-content;
            overflow-y: auto;   
            flex: 1;
            min-width: 50%;       
        }

        .post {
            background-color: #fff;
            margin-bottom: 3rem;
            border: 8px solid #2f7b94;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .post-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            display: block;
            border-bottom: 1px solid #d4c5a9;
        }

        .post-content {
            padding: 2rem;
        }

        .post-title-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 2%;
        }

        .post-title {
            font-size: 60px;
            color: #2c2416;
            margin: 0 0 -2% 0;
            font-family: 'title';
            text-align: center;
            cursor: pointer;
        }

        .post-meta {
            color: #6b5d4f;
            font-size: 13px;
            margin-bottom: 5%;
            font-family: "itallics";
        }

        .post-summary p {
            color: #3d3428;
            margin-bottom: 1.5em;
            font-size: 16px;
            text-align: left;
        }

        .post-summary::first-letter {
            font-family: 'initial';
            font-size: 110px;
            line-height: 1;
            float: left;
            margin-right: 10px;
            margin-bottom:-10px;
        }

        .post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            background-color: #e8dcc4;
            color: #4a3f2e;
            padding: 0.3rem 0.8rem;
            font-size: 0.85rem;
            border-radius: 3px;
            border: 1px solid #b23e28;
        }

        @media (max-width: 950px) {

            .pagesplit {
                width: 90%;
                flex-direction: column;
                gap: 25px;
            }

            body {
                background-size: 300px;
            }

            .post {
                width: 90%;
            }

            .post-title {
                font-size: 50px;
            }

            .framework {
                min-height: 450px;
                width: 100%;
                position: relative;
                display: block;
                min-width: 1px;
                margin-top: 25px;
            }

            .floor img {
                width: 100%;
            }
            
            .portrait-wrapper {
                left: 4%;
                top: 4%;
            }

            .portrait-still img, .portrait-hover img {
                height: 200px;
                min-height: 200px;
                max-height: 100px;
            }

            .portrait-caption {
                left: auto;
                right: -80px;
                top: -10px;
                max-width: 110px;
                z-index: 2;
            }

            .portrait-text, .quote {
                font-size: 16px;
            }

            .desk-still img, .desk-hover img {
                height: 240px;
            }

            .desk-wrapper {
                height: 200px;
                width: 75px;
                bottom: 70px;
                right: 5%;
            }

            .chair-wrapper {
                display:none;
            }

            .post {
                width: 100%;
            }
            
            .post-content {
                font-size: 10px;
            }

            .post-title {
                font-size: 35px;
            }

            .post-tags {
                margin-top: 15px;
            }

            .post-summary p {
                font-size: 12px;
            }

            .post-summary::first-letter {
                font-size: 50px;
            }

            .post-image {
                height: 150px;
                width: 100%;
            }
        }