<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my 2 cents about code documentation</title>

    <style>
   

    body {
        background-color: dodgerblue;
        font-family: sans-serif;

        perspective: 2px;
        transform-style: preserve-3d;


    }

    .list {


        transform-style: preserve-3d;

        position: absolute;
        top: 0;
        left: 0;

        padding: 32px;
        padding-left: 64px;
        font-family: serif;
        font-size: 96px;
        line-height: 1;

           color: white;
        filter: blur(7px);
        transform: translateX(10px) translateZ(-1px);

        transition: all 0.4s ease-in;
        z-index: 0;
    }

    .list:hover {
        filter: blur(1px);
        transform: translate(0) translateZ(-1px);
        transition: all 0.6s ease-out;
    }

    .list ul {
        list-style: none;
        list-style-type: "- ";
        list-style-position: outside;
    }
    
    .list li + li {
        margin-top: 0.4em;
    }

    .contents {
        position: relative;
        z-index: 50;
        margin: 0 auto;
        padding-top: 32px;
        font-size: 42px;
        max-width: 60ch;

        filter: blur(10px);
        transform: translate(100px);
        opacity: 0.5; 

        
        line-height: 1.6;
        z-index: 999; 
        transition: all 0.6s ease-out, opacity 2s ease-out 0.4s;
    }

    .contents:hover {
        transition: all 0.4s ease-in;

        filter: blur(0px);
        opacity: 1;
        transform: translate(0);
    }

    a {
        color: white;
    }

    blockquote {
        font-style: italic;
        font-family: serif;
        margin-block: 64px;

    }

    blockquote:after {
        content: '𓆏';
        text-align: center;
        display: flex;
        justify-content: center;
        margin-top: 32px;
        font-weight: bold;
        color: white;
    }

    strong {
        background-color: white;
        color: black;
        font-weight: normal;
        padding-inline: 0.5ch;
    }

    img {
        max-width: 800px;
        max-height: 800px;
        object-fit: contain;
    }

    hr {
        color: white;
        max-width: 20ch;
    }
    </style>


</head>
<body>
    <main>
    
        <section class="list">{{list|safe}}</section>
        <section class="contents">{{content|safe}}</section>
    </main>
</body>
</html>
