poyoweb_white by Moosyu

/* ==UserStyle==
@name           poyoweb_white
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Peak theme
@author         Moosyu
==/UserStyle== */
@-moz-document domain("https://poyoweb.me/") {
    :root {
        --primary: #F8F3F6;
        --secondary: #2a1501;
        --tertiary: #a26666;
        --cloudblue: #87b5dd;
        --skyblue: #E0F7FA;
        --iceblue: #E0F7FA;
        --lightblue: #B3E5FC;
        --babyblue: #81D4FA;
        --seafoam: #4FC3F7;
        --softblue: #81D4FA;
        --aqua: #B3E5FC;
        --frost: #E1F5FE;
        --ocean: #29B6F6;
        --linkblue: #039BE5;
        --deepblue: #0288D1;
        --mintblue: #B2EBF2;
        --cloudgray: #B0BEC5;
        --stormblue: #546E7A;
        --midnightblue: #37474F;
        --slateblue: #455A64;
        --mistgray: #B0BEC5;
        --cobalt: #0277BD;
        --brightteal: #80DEEA;
        --warning: orange;
        --gradientblue: linear-gradient(#E0F7FA, #B3E5FC);
        --input-background: #E0F7FA;
        --input-border: #039BE5;
        --input-shadow: rgba(0, 0, 0, 0.2);
        --input-text-color: #37474F;
    }

    * {
        box-sizing: border-box;
        font-family: monospace;
    }

    body {
        padding: 0;
        margin: 2vh 10vw 0 10vw;
        min-height: 100%;
        background-image: url('https://i.imgur.com/iX2DfR3.png');
    }
    .megacontainer {
        position: relative;
        min-height: 100%;
        gap: 5px;
        background-color: white;
        border: 1px black solid;
    }

    .container {
        padding: 2vh;
        display: flex;
        flex-direction: column;
    }
    .container > *:first-child {
        margin: 0;
    }

    .row-container {
        display: flex;
        flex-direction: row;
    }
    .header-container {
        position: relative;
    }

    .footer-container {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #37474F;
        /* Darker text color for readability on the lighter background */
        padding: 20px;
        text-align: center;
    }

    .footer-links {
        width: 25vw;
        display: flex;
        justify-content: space-around;
    }

    .link-container {
        position: relative;
        flex-direction: column;
        gap: 10px;
    }
    .main-container {
        width: 100%;
        position: relative;
        padding-left: 25px;
    }
    .main-container > *:first-child {
        margin: 0;
    }

    .message-container {
        background-color: orange;
        width: 100%;
        padding: 1vh;
        margin-top: 1vh;
    }

    button,
    input[type="submit"] {
        padding: 5px 10px;
        font-weight: bold;
        color: black;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
        width: 150px;
    }

    .link-container button {
        padding: 10px 20px;
        font-size: 16px;
    }

    button:active,
    input[type="submit"] {
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
        inset -2px -2px 5px rgba(255, 255, 255, 0.2);
    }

    form {
        gap: 15px;
    }
    input {
        padding: 5px 10px;
        font-size: 16px;
        color: var(--input-text-color);
        background-color: var(--input-background);
    }

    input:focus {
        outline: none;
        background-color: #B3E5FC;
        box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.7),
        inset -1px -1px 4px rgba(0, 0, 0, 0.2),
        3px 3px 6px var(--input-shadow);
    }
}