<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet" media="print" onload="this.media='all'">

    <title>yude.moe</title>
    <style>
        body {
            text-align: center;
            font-family: 'Noto Sans JP', monospace;
        }

        @media (prefers-color-scheme: dark) {
            body {
                background-color: black;
                color: white;
            }

            a {
                color: white
            }
        }

        @media (prefers-color-scheme: light) {
            body {
                background-color: white;
                color: black
            }

            a {
                color: black
            }
        }

        .flex {
            padding: 2.5% 0;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

        .flex>* {
            width: 8%;
            font-size: 64px;
            text-align: center;
        }

        .load {
            -webkit-animation: spin 4s linear infinite;
            -moz-animation: spin 4s linear infinite;
            -ms-animation: spin 4s linear infinite;
            -o-animation: spin 4s linear infinite;
            animation: spin 4s linear infinite;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @-moz-keyframes spin {
            0% {
                -moz-transform: rotate(0deg);
            }

            100% {
                -moz-transform: rotate(360deg);
            }
        }

        @-ms-keyframes spin {
            0% {
                -ms-transform: rotate(0deg);
            }

            100% {
                -ms-transform: rotate(360deg);
            }
        }

        @-o-keyframes spin {
            0% {
                -o-transform: rotate(0deg);
            }

            100% {
                -o-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        svg {
            fill: currentColor;
        }
        .discord {
            height: 500px;
            width: 90%;
            min-width: 300px;
            max-width: 565px;
        }
    </style>
</head>

<body>
    <picture>
        <source type="image/webp" srcset="assets/images/avatar.webp" style="width:200px; border-radius: 50%"
            class="load">
        <img src="assets/images/avatar.png" style="width:200px; border-radius: 50%" class="load">
    </picture>
    <h1>yude.moe</h1>
    <p>Contents</p>
    <p><a href="../about">yude のプロフィール</a></p>
    <p><a href="https://blog.yude.moe">yude のブログ</a></p>
    <p>Services</p>
    <p><a href="../server">サーバー情報</a></p>
    <iframe class="discord" src="https://discordapp.com/widget?id=550309736214691840&theme=dark"
        allowtransparency="true" frameborder="0"></iframe>
</body>

</html>