/*@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Quicksand:wght@300..700&display=swap');*/

@font-face {
    font-family: "Windows";
    src: url("files/fonts/windows.ttf");
}

@font-face {
    font-family: "Itim";
    src: url("files/fonts/itim.otf");
}

:root {
    --accent_black: #000000;
    --accent_brown: #643843;
    --accent_pink: #C88EA7;
    --accent_pwhite: #E7CBCB;
    --accent_white: #FFEDED;

    /*
    dark colours
    #ffffff
    #c19098
    #a74871
    #411026
    #493742
    */

    --accent_pink20: rgba(200, 142, 167, 0.20);
    --accent_pink40: rgba(200, 142, 167, 0.40);

    --default_radius: 1px;

    font-size: 16px;
    color-scheme: only light;
}

* {
    box-sizing: border-box;
    font-family: "Itim";
    font-weight: normal;
}

html {
    width: 100%;
    height: 100%;
}

body {
    background: var(--accent_pwhite);
    padding: 2rem;

    width: 100%;
    height: calc(100% - 2rem);

    margin: 0;

    background-image: repeating-conic-gradient(var(--accent_pwhite) 0% 25%, var(--accent_white) 0% 50%);
    background-position: 0 0, 32px 32px;
    background-size: 2rem 2rem;

}

span {
    color: var(--accent_black);
}


/* classes - classes - classes - classes - classes */

.loading_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;

    background-image: repeating-conic-gradient(black 0% 25%, rgb(27, 24, 27) 0% 50%);
    background-position: 0 0, 32px 32px;
    background-size: 2rem 2rem;

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

    transition: all 0.3s ease;

    pointer-events: none;
    opacity: 0;
}

.loading_overlay img {
    image-rendering: pixelated;
    width: 4rem;
    height: 4rem;
}


.card {
    position: relative;
    background: linear-gradient(180deg, var(--accent_white) 50%, var(--accent_pwhite) 100%);
    width: fit-content;
    height: 100%;

    border-radius: var(--default_radius);
    padding: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;

    outline: 0.15rem solid var(--accent_brown);

    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;

    overflow: hidden;
}

.card .header {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    background: var(--accent_pink);
    width: 100%;
    padding: 1rem;

    border-top-left-radius: var(--default_radius);
    border-top-right-radius: var(--default_radius);

    color: var(--accent_white);

}

.content {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    overflow: auto;
}

.card:has(.header) .content {
    margin-top: 3rem;
    padding-bottom: 3rem;
}

custicon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    aspect-ratio: 1 / 1;
}

custicon[use="x"] {
    background: var(--accent_pink);
    border-radius: var(--default_radius);

    transition: all 0.1s ease;
}

custicon[use="x"]:hover {
    filter: brightness(95%);
    transform: scale(1.3);
}

.smallcont {
    outline: 0.2rem solid var(--accent_brown);
    border: 0.2rem solid var(--accent_pink);
    background-color: var(--accent_pink20);
    padding: 0.5rem;
    border-radius: var(--default_radius);
}

.img_bordered {
    outline: 0.2rem solid var(--accent_brown);
    border-radius: var(--default_radius);
}

.separator_brown {
    background: var(--accent_brown);
    height: 2px;
    width: 100%;
    border-radius: 50px;

}

.miniheader {
    background: var(--accent_pink40);
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--default_radius);
}

.blinkie {
    overflow-clip-margin: content-box;
    overflow: clip;

    width: fit-content;
    height: fit-content;

    image-rendering: pixelated;
}

.pixel {
    image-rendering: pixelated;
}

*[brown] {
    color: var(--accent_brown);
}

*[pink] {
    color: var(--accent_pink);
}

*[white] {
    color: var(--accent_white)
}

*[whited] {
    color: var(--accent_pwhite)
}

*[windows] {
    font-family: "Windows";
}

#lightMode_bt {
    transition: all 0.1s ease-out;
    border-radius: var(--default_radius)
}

#lightMode_bt:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.20);
}

#lightMode_bt:active {
    background-color: rgba(255, 255, 255, 0.50);
}

.taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--accent_pink);
    padding-left: 2rem;
    width: 100%;
    height: 3rem;
    border-top: 0.2rem solid var(--accent_brown);
    z-index: 901;

    display: flex;
    flex-direction: row;
    justify-content: start;
}

a {
    color: var(--accent_pink);
}

/* presets - presets - presets - presets - presets */

.p_flexrow {
    display: flex;
    flex-direction: row;
}

.p_flexcol {
    display: flex;
    flex-direction: column;
}

.p_justifycenter {
    justify-content: center;
}

.p_aligncenter {
    align-items: center;
}

.p_nomargins {
    margin: 0;
}

.p_nopadding {
    padding: 0;
}

.p_w20p {
    width: 20%;
}

.p_w40p {
    width: 40%;
}

.p_w60p {
    width: 60%;
}

.p_w80p {
    width: 80%;
}

.p_w100p {
    width: 100%;
}

.p_gap1rem {
    gap: 1rem;
}

.p_h100p {
    height: 100%;
}

.p_coloraccwhite {
    color: var(--accent_white);
}

.p_wrap {
    flex-wrap: wrap;
}

.p_wrapreverse {
    flex-wrap: wrap-reverse;
}

.p_flex {
    display: flex;
}

.p_nopaddingvertical {
    padding-top: 0;
    padding-bottom: 0;
}

.p_nomarginvertical {
    margin-top: 0;
    margin-bottom: 0;
}

.p_hauto {
    height: fit-content;
}

/* Modern browsers — Chrome 121+, Edge 121+, Firefox, Safari 18.2+ */
* {
  scrollbar-width: 10px;
  scrollbar-color: var(--accent_pink) var(--accent_white);
}