:root {
    --bg: oklch(21.56% 0.0286 303.92);
    --text: oklch(94.11% 0.0397 314.07);
    --text2: oklch(78.23% 0.1513 336.5);
    --text3: oklch(80.58% 0.0962 265.46);
}

body {
    color: var(--text);
    background-color: var(--bg);
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 75ch;
}

a {
    color: var(--text2)
}

p {
    margin-top: 0.5rem;
}

h1 {
    margin-top: 0.5rem;
}

h3 {
    margin-top: 1rem;
    color: var(--text3);
}

p, h3, h2, pre {
    margin-bottom: 0rem;
}

pre {
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

.hero-img p,
.hero-img img {
    margin-left: 1rem;
}

.hero-text {
    order: 2;
}

.hero-img {
    order: 1;
}

@media screen and (min-width:768px) {
    .hero-text {
        order: 1;
    }

    .hero-img {
        order: 2;
    }
}

@media screen and (min-width:768px) {
    body {
        width: 70%;
    }
}

@media screen and (min-width:1920px) {
    body {
        width: 60%;
    }
}

@media screen and (min-width:2304px) {
    body {
        width: 50%;
    }
}

.main {
    margin: 1vw;
}

@media screen and (min-width:768px) {
    .main {
        margin-top: 5rem;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

.flag {
    width: 2.3rem;
    height: 1.7rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
}

img {
    width: 15rem;
    height: 15rem;
    border-radius: 5%;
    margin-right: 2rem;
}

.footer {
    padding: 1rem;
    font-size: 0.75rem;
    text-align: center;
}

.footer p {
    line-height: 1rem;
}

.footer img {
    border-radius: 0;
    width: 88px;
    height: 31px;
    margin: 0;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

/* pride corner */
#prideflag img {
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 100% 0%;
    transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
    z-index: 8008135;
}
#prideflag img:hover {
    transform: scale(110%);
}
#prideflag img:active {
    transform: scale(110%);
}
#prideflag img * {
    pointer-events: all;
}
#prideflag img {
    width: 15vw;
    height: unset;
    border-radius: unset;
    margin-right: unset;
}
@media screen and (min-width:768px) {
    #prideflag img {
        width: 10vw;
    }
}
@media screen and (min-width:1920px) {
    #prideflag img {
        width: 5vw;
    }
}