we.type | AS_black-white

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : AS_black-white.html                   |
|                   Label : Playground                            |
|                  Author : Anton Schmolze                        |
|                    Size : 2.551 bytes                           |
|                 Created : 09. February 2024 at 11:22            |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Black on White and White on Black</title>
    <style>
    @font-face {
      font-family: Konsole;
      src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    body {
      font-family: Konsole;
      font-size: 6vh;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      height: 100vh;
    }

    .text-container {
        /* defines, that each containers takes up equal space */
        flex: 1; 
        width: 100%;
        display: flex;
        /* centers text both horizontally and vertically */
        justify-content: center;
        align-items: center; 
        padding: 20px;
        box-sizing: border-box; 
        }

        .black-on-white {
            /* defines the upper background color */
            background-color: white;
            /*defines the text color */
            color: black;
            /* defines the text width */
            width: 100vw;
            /* defines the  upper text height */
            height: 50vh;
        }

        .white-on-black {
            /* defines the lower background color */
            background-color: black;
            /* defines the text color*/
            color: white;
            /* defines the text width */
            width: 100vw;
            /* defines the lower text height */
            height: 50vh;
        }
    </style>
</head>

<body>
    <div class="text-container black-on-white">
        <p>black on white</p>
    </div>
    <div class="text-container white-on-black">
        <p>white on black</p>
    </div>
</body>

</html>