header.html

<style>
    html, body {
        margin-top: 1%;
        margin-left: 10%;
        margin-right: 10%;
        background-color: #fbfbfb;
        color: #403f52;
        font-family: 'KaTeX_SansSerif';
        font-size: 18px;
    }
    @media (max-width:480px) {
        html, body {
            margin-top: 1%;
            margin-left: 2%;
            margin-right: 2%;
            /* background-color: #fbfbfb;
            color: #403f52;
            font-family: 'KaTeX_SansSerif';
            font-size: 18px; */
        }
    }

    img {
        max-width: 80%;
    }

    figcaption{
        font-style: italic;
    }

    pre code {
        display:inline-block;
        font-size: 14px;
        margin: 10px 10px 10px 10px;
    }

    code {
        display:inline-block;
        font-size: 14px;
    }

    .footer {
        text-align: center;
        margin-top: 1%;
        margin-bottom: 1%;
    }

    .date {
        font-style: italic;
    }

    a { color: inherit; }

    /* tables */

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #cbcbcb;
        table-layout: auto;
    }   

    tr, td, th {
        border-left: 1px solid #cbcbcb; /* inner column border */
        border-bottom: 1px solid #cbcbcb;
        padding: 2px 5px;
        font-size: 14px;
    }

    thead {
        background-color: #e0e0e0;
        color: #000;
    }
    
</style>

<script src="https://kit.fontawesome.com/fa8004ee4c.js" crossorigin="anonymous"></script>

<h1>
    <a href="/index.html" style="text-decoration:none">Miraç Lütfullah Gülgönül</a>
</h1>

<hr>