:root {
    --site-width: 900px;
}


/* ==========================================
   BASIC SETUP
========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: hidden;

    background: #000;
}

body {
    min-height: 100vh;
    max-width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;

    color: #fff;
    background: #000;

    font-family: 'Anton', sans-serif;
}


/* ==========================================
   HEADER
========================================== */

header {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1000;

    width: 100%;
    max-width: var(--site-width);

    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #c30010;

    background-image:
        linear-gradient(
            to bottom,
            black 0,
            black 2px,
            #3689fd 2px,
            #3689fd 6px,
            black 6px,
            black 8px
        );

    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 8px;

    transform: translateX(-50%);
}


/* ==========================================
   HEADER LINKS
========================================== */

.blog-link {
    position: absolute;
    left: 20px;

    color: white;

    font-size: 2em;
    text-decoration: none;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

.blog-link:hover {
    text-decoration: underline;
}

.kunst-link {
    position: absolute;
    right: 40px;

    color: white;

    font-size: 2em;
    text-decoration: none;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

.kunst-link:hover {
    text-decoration: underline;
}

header a {
    display: inline-block;

    text-decoration: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

header a:hover,
header a:focus,
header a:active {
    text-decoration: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================
   PRINCE HEADER TITLE
========================================== */

header h1 {
    position: relative;
    left: -14px;

    margin: 0;

    color: white;

    font-size: 3.75em;
    text-decoration: none !important;

    cursor: pointer;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}


/* ==========================================
   MAIN PAGE COLUMN
========================================== */

main {
    flex: 1;

    width: 100%;
    max-width: var(--site-width);

    margin: 0 auto;
    padding: 90px 20px 40px;

    background:
        linear-gradient(
            to bottom,
            #e40013,
            #e0065a,
            #6a00cd,
            #1e00ffce
        );
}

.index-main {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ==========================================
   FRONT PAGE IMAGES
========================================== */

.prince-image {
    display: block;

    width: 100%;
    max-width: 600px;
    height: auto;

    margin: 20px auto;

    border: 5px solid white;
    border-radius: 8px;

    outline: 1px solid black;
    outline-offset: -1px;

    box-shadow:
        inset 0 0 0 1px black;

    box-sizing: border-box;
}

.main-image {
    display: block;

    width: 100%;
    max-width: 600px;
    height: auto;

    margin: 20px auto;

    border-radius: 8px;

    box-sizing: border-box;
}


/* ==========================================
   TITLES AND TEXT
========================================== */

.welcome {
    font-size: 3em;
}

.centered-title {
    margin: 20px 0 10px;

    color: #ffbf01;

    font-size: 2em;
    text-align: center;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

h1,
.title {
    color: #ffbf01;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

.padded-text {
    max-width: 680px;

    margin-right: auto;
    margin-left: auto;
    padding: 10px 35px;

    font-size: 1.5em;
    line-height: 1.45;

    text-shadow:
        -0.75px -0.75px 0 black,
         0 -0.75px 0 black,
         0.75px -0.75px 0 black,
         0.75px 0 0 black,
         0.75px 0.75px 0 black,
         0 0.75px 0 black,
        -0.75px 0.75px 0 black,
        -0.75px 0 0 black;
}


/* ==========================================
   FOOTER
========================================== */

footer {
    width: 100%;
    max-width: var(--site-width);

    margin: 0 auto;
    padding: 13px 20px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #c30010;

    background-image:
        linear-gradient(
            to bottom,
            black 0,
            black 2px,
            #3689fd 2px,
            #3689fd 6px,
            black 6px,
            black 8px
        );

    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 8px;

    text-align: center;
}

footer p {
    margin: 0;

    font-size: 1.2em;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

footer button {
    margin-top: 7px;
    padding: 6px 15px;

    color: #333;
    background-color: #ffbf01;

    border: none;

    font-family: inherit;
    font-size: 1em;

    cursor: pointer;
}

footer button:hover {
    background-color: #ff1493;
}


/* ==========================================
   BLOG PAGE LAYOUT
========================================== */

.row {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.rightcolumn {
    order: 1;
    flex: 1;
}

.header {
    order: 2;
}

.leftcolumn {
    order: 3;
    flex: 2;
}


/* ==========================================
   BLOG CARDS
========================================== */

.card {
    position: relative;

    margin-bottom: 20px;
    padding: 20px;

    color: #ffb92c;
    background-color: #d9ffeb;

    border: 8px solid #b05a1c;
    border-radius: 20px;

    outline: 2px solid black;

    box-shadow:
        inset 0 0 0 2px black,
        0 0 15px rgba(255, 255, 255, 0.1);
}

.card h2,
.card h5 {
    margin-top: 0;
    padding-top: 0;
}

.card a {
    color: inherit;
    text-decoration: none;
}

.card a:hover,
.card a:focus,
.card a:active {
    color: inherit;
    text-decoration: none;
}

.card h2 {
    margin-bottom: 15px;

    color: #ff8800;

    font-size: 2.5em;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

.card h5 {
    margin-bottom: 15px;

    color: #ffb92c;

    font-size: 1.4em;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}

.card h6 {
    position: absolute;
    top: 10px;
    right: 10px;

    margin: 0;

    color: #3aadeb;

    font-size: 1.1em;

    text-shadow:
        -1px -1px 0 black,
         0 -1px 0 black,
         1px -1px 0 black,
         1px 0 0 black,
         1px 1px 0 black,
         0 1px 0 black,
        -1px 1px 0 black,
        -1px 0 0 black;
}

.card p {
    font-size: 1.3em;
    line-height: 1.5;
}


/* ==========================================
   BLOG PICTURES
========================================== */

.fakeimg {
    padding: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ca0707ce;

    border-radius: 15px;

    box-shadow:
        0 0 0 2px #000;
}

.fakeimg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    box-shadow:
        0 0 2px 2px #000;
}

.picturetext {
    color: #ffb92c;

    font-size: 0.5em;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px 1px 0 #000,
         1px 1px 0 #000;
}

.picturetext-off {
    text-shadow:
        -0.5px -0.5px 0 #fff,
         0 -0.5px 0 #fff,
         0.5px -0.5px 0 #fff,
         0.5px 0 0 #fff,
         0.5px 0.5px 0 #fff,
         0 0.5px 0 #fff,
        -0.5px 0.5px 0 #fff,
        -0.5px 0 0 #fff;
}


/* ==========================================
   ABOUT ME CARD
========================================== */

.about-me {
    padding: 5px;

    color: #2e1e0f;
    background:
        linear-gradient(
            #fefae0,
            #f5deb3
        );

    border: 8px solid #5e3b1d;
    border-radius: 10px;

    outline: 2px solid #1e1e1e;

    box-shadow:
        inset 0 0 5px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(94, 59, 29, 0.5);

    font-family: sans-serif;
    text-align: center;
}


/* ==========================================
   BLOG HEADER
========================================== */

.header h2 {
    color: #ffbf01;

    text-shadow:
        -2px -2px 0 black,
         0 -2px 0 black,
         2px -2px 0 black,
         2px 0 0 black,
         2px 2px 0 black,
         0 2px 0 black,
        -2px 2px 0 black,
        -2px 0 0 black;
}


/* ==========================================
   POST LINKS
========================================== */

.post-link {
    display: inline-block;

    color: inherit;
    text-decoration: none;
}

.post-link:hover,
.post-link:focus,
.post-link:active {
    color: inherit;
    text-decoration: none;

    outline: none;
}


/* ==========================================
   CUSTOM ALERT
========================================== */

.custom-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(255, 105, 180, 0.85);

    font-family: 'Anton', sans-serif;
}

.custom-alert-box {
    width: 100%;
    max-width: 360px;

    padding: 30px 40px;

    color: white;
    background:
        linear-gradient(
            45deg,
            #ff0080,
            #6a00cd,
            #ffbf01
        );

    border-radius: 15px;

    box-shadow:
        0 0 20px #ff0080;

    font-size: 1.8em;
    text-align: center;

    text-shadow:
        2px 2px 5px black;
}

.custom-alert-box button {
    margin-top: 20px;
    padding: 10px 25px;

    color: #333;
    background: #ffbf01;

    border: none;
    border-radius: 10px;

    font-family: inherit;
    font-size: 1em;
    font-weight: bold;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

.custom-alert-box button:hover {
    color: white;
    background: #ff1493;
}


/* ==========================================
   TABLETS AND PHONES
========================================== */

@media (max-width: 768px) {
    main {
        padding-right: 14px;
        padding-left: 14px;
    }

    .row {
        flex-direction: column;
    }

    .leftcolumn,
    .rightcolumn {
        flex: 1;
    }

    header h1 {
        font-size: 3em;
    }

    .header h2 {
        font-size: 2em;
    }

    footer {
        font-size: 1em;
    }
}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 520px) {
    header {
        min-height: 68px;
        padding-right: 6px;
        padding-left: 6px;
    }

    header h1 {
        left: 0;

        font-size: 2.35em;
    }

    .blog-link {
        left: 10px;

        font-size: 1.2em;
    }

    .kunst-link {
        right: 10px;

        font-size: 1.2em;
    }

    main {
        padding-top: 78px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .welcome {
        font-size: 2.3em;
    }

    .padded-text {
        padding-right: 12px;
        padding-left: 12px;

        font-size: 1.25em;
    }

    .custom-alert-box {
        padding: 24px 20px;

        font-size: 1.4em;
    }
}