@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;
        }

        .back-wrapper {
            position: fixed;
            bottom: 4%;
            right: 2%;
            height: 240px;
        }

        .back-wrapper img {
            height: 240px;
        }

        .back-wrapper:hover img {
            transform: rotate(-3deg);
        }

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

        .float {
            float: right;
            width: 40%;
            margin: 2% 0 4% 2%;
            height: calc(width);
            border: 4px solid #608d73;
        }

        body {
            font-family: 'text';
            background-image: url("../images/pattern.png");
            background-repeat: repeat;
            background-size: 500px;
            color: #2c2416;
            line-height: 1.6;
        }
        
        .feed {
            display: flex;
            flex-direction: column;
            height: fit-content;
            margin: auto;
            margin: 2% auto;
            width: 50%;
            min-width: 50%;       
        }

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

        .post-content {
            padding: 2em;
        }

        .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;
        }

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

        .post-summary p {
            color: #3d3428;
            margin-top: 1em;
            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;
            justify-content: center;
            gap: 0.5rem;
            padding: 5px 5px 20px 5px;
        }

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

        @media (max-width: 950px) {

            body {
                background-size: 300px;
            }

            .back-wrapper {
                position: fixed;
                bottom: 10px;
                right: 10px;
                height: 120px;
            }
            
            .back-wrapper img {
                height: 120px;
            }
    
            .feed {
                margin-top: 10%;
                width: 90%;
            }

            .float {
            width: 100%;
            height: calc(width);
            border: 3px solid #608d73;
            margin: 2% 0 6% 0;
        }

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

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

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

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

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