/*~--~--~META STUFF~--~--~*/
:root {
    --glossy-background: linear-gradient(135deg,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 23%, rgba(255, 255, 255, 0.3) 47%, rgba(168, 168, 255, 0.4) 53%, rgba(168, 168, 255, 0.2) 77%, rgba(212, 212, 255, 0.7) 100%);
    --glossy-blur: blur(3px);
    --glossy-border: linear-gradient(135deg,rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 23%, rgba(255, 255, 255, 0.4) 47%, rgba(168, 168, 255, 0.4) 53%, rgba(168, 168, 255, 0.2) 77%, rgba(212, 212, 255, 0.7) 100%) 1;
    --glossy-border-width: 2px;
    --glossy-border-style: solid;
    --glossy-box-shadow: 5px 5px 30px #000;


}

/* https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
    /*display: block;*/
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

    /*---FONTS---*/
    /* 
    search fonts by year: https://fontsinuse.com/search/advanced?v=2&match0=all&artwork-date0=is-2000

    @font-face {
        font-family: ;
        src: url();
        font-weight: ;
        font-style: ;
    }
    */

    @font-face {
        font-family: TahomaXP;
        src: url(fonts/windows-xp-tahoma.woff2);
    }

    @font-face {
        font-family: Tahoma;
        src: url(fonts/tahoma.ttf);
    }

    @font-face {
        font-family: Trebuchet;
        src: url(fonts/trebuchet.ttf);
    }

            @font-face {
            font-family: Trebuchet;
            src: url(fonts/trebuchet-MS-Italic.ttf);
            font-style: italic;
        }

    @font-face {
        font-family: Segoe;
        src: url(fonts/Segoe\ UI.ttf);
    }

        @font-face {
            font-family: Segoe;
            src: url(fonts/Segoe\ UI\ Bold.ttf);
            font-weight: bold;
        }

        @font-face {
            font-family: Segoe;
            src: url(fonts/Segoe\ UI\ Italic.ttf);
            font-style: italic;
        }

        @font-face {
            font-family: Segoe;
            src: url(fonts/Segoe\ UI\ Bold\ Italic.ttf);
            font-weight: bold;
            font-style: italic;
        }
        
    @font-face {
        font-family: Hind;
        src: url(fonts/Hind-Regular.ttf);
        font-weight: normal;
    }

        @font-face {
            font-family: Hind;
            src: url(fonts/Hind-Light.ttf);
            font-weight: lighter;
        }

        @font-face {
            font-family: Hind;
            src: url(fonts/Hind-Medium.ttf);
            font-weight: 500;
        }

        @font-face {
            font-family: Hind;
            src: url(fonts/Hind-SemiBold.ttf);
            font-weight: 600;
        }

        @font-face {
            font-family: Hind;
            src: url(fonts/Hind-Bold.ttf);
            font-weight: bold;
        }
    
    @font-face {
        font-family: Eurostile;
        src: url(fonts/Eurostile.woff);
    }

        @font-face {
            font-family: Eurostyle; /* Eurostile but letters are closer together */
            src: url(fonts/EuroStyle.woff);
        }

    @font-face {
        font-family: Neuropol;
        src: url(fonts/Neuropol.otf);
    }

        @font-face { /* Sharper edges and a bit bolder */
            font-family: Neuropolitical;
            src: url(fonts/Neuropolitical.otf);
        }

    @font-face {
        font-family: Free Pixel;
        src: url(fonts/freepixel.ttf);
    }

    @font-face {
        font-family: W95;
        src: url(fonts/W95font.otf)
    }

        @font-face {
            font-family: W95;
            src: url(fonts/W95font-Bold.otf);
            font-weight: bold;
        }

/* ~---~---~---~ EVERY PAGE ~---~---~---~ */

/*---WHOLE PAGE---*/
    body {
        max-width: 1200px;
        margin: 0 auto; /* Centers the page */
        background: url('images/frutigerbg.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: url('images/karasucursor.png'), auto;
    }

    a:hover { 
        cursor: url('images/karasucursor_hover.png'), auto;
    }

    marquee {
        border: solid silver 1px;
        border-radius: 8px;
        background-image: linear-gradient(rgba(0, 183, 255, 0.8), rgb(90, 189, 159), rgba(0, 153, 255, 0.8));
    }

/*---HEADER---*/
    header {
        height: 450px;
        width: 100%;
    }

    #header-wrapper {
        height: 450px;
        width: 1200px;
        position: absolute;
        background: url('images/header1100tall.jpg');
    }

    #header-text {
        height: 200px;
        width: auto;
        position: relative;
        top: 25%;
        right: 100px;
    }

/*---WHOLE MAIN---*/
    .main3-section {
        display: grid;
        grid-template-columns: 18.33fr 63.33fr 18.33fr;
        grid-template-rows: 1fr;
        grid-template-areas: "m3-1 m3-2 m3-3";
    }

    .main2-section {
        display: grid;
        grid-template-columns: 18.33fr 81.66fr; /* 1fr 5fr; */
        grid-template-rows: 1fr;
        grid-template-areas: "m2-1 m2-2";
    }

    .scroll-image {
        margin-top: 7px;
    }

/*---SIDEBARS---*/
    aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

        .ad {
            line-height: normal;
        }

    /*---LEFT SIDEBAR---*/
        .navigation-box ul {
            list-style-type: none;
        }

/*---CENTER---*/
    article {
        margin: 0px 10px;
        font-family: Segoe;
    }

    article p {
        margin: 1em;
    }

    article h2 {
        margin: .67em;
    }

    article h3 {
        margin: .83em;
    }

    section {
        background: var(--glossy-background);
        backdrop-filter: var(--glossy-blur);
        border-image: var(--glossy-border);
        border-width: var(--glossy-border-width);
        border-style: var(--glossy-border-style);
        box-shadow: var(--glossy-box-shadow);
    }

/*---FOOTER---*/
    footer {
        text-align: center;
        margin-bottom: 10px;
        background-color: #afafaf;
        border-top: 2px solid rgb(215, 215, 215);
        border-left: 2px solid rgb(215, 215, 215);
        border-bottom: 2px solid black;
        border-right: 2px solid black;
        font-family: W95;
    }

    footer div {
        background-color: #06147e;
        margin: 2px;
        color: white;
    }

    #www {
        display: block;
        margin: 0 auto 20px auto;
    }

/*---STYLINGS---*/
.win7container {
    display: flex;
    flex-direction: column;
    border: 1px solid #000000b3;
    box-shadow: 2px 2px 10px 1px #000000b3,inset 0 0 0 1px rgba(255,255,255,.667);
    backdrop-filter: blur(6px); /* Opaque = 30 // Transparent = 6 */
    position: relative;
    z-index:0;
    border-radius: 6px;
    font-family: "Segoe UI";
    font-size: 9pt;
    width: 100%;
}

.win7container,.win7container::before {
    border-radius: 6px;
}

.win7container::before {
    box-shadow: inset 0 0 0 1px #fffd;
    background: linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%),linear-gradient(to right,#ffffff66,#0000001a,#ffffff33),#4580c4;
    background-color: #4580c4;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.867);
    content:"";
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:-1;
    opacity: 0.6; /* Opaque = Commented out // Transparent = 0.6 */
}

.win7title {
    color: #000;
    line-height: 15px;
    padding: 6px;
    text-shadow: 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}

.win7content {
    border: 1px solid #000000b3;
    box-shadow:0 0 0 1px rgba(255,255,255,.6);
    padding: 0 12px;
    margin: 0 6px 6px 6px;
    background: #f0f0f0;
    /* width: auto;
    height: auto; */
}

.win7content > * {
    padding: 6px;
}

.win7content > :first-child {
    padding-top: 12px;
}

.win7content > :last-child {
    padding-bottom: 12px;
}

.win7content a {
    color: #06c;
    text-decoration: none;
}

.win7content a:hover {
    color: #39f;
}

.glass {
    height: auto;
    width: 100%;
    border: 1px solid rgba(193, 204, 214, 0.507);
    border-radius: 30px;
    box-shadow: inset 0 0 8px 3px rgba(255, 255, 255, 0.4), inset 0 0 5px 2px rgba(0, 0, 0, 0.4), 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    background: rgba(70, 255, 101, 0.185);
    font-family: Neuropolitical;
    color: white;
    text-shadow: 1px 1px 0px black, 1px 1px 5px white;
}

.glass > * {
    margin: 15px;
}

.glass h3 {
    font-weight: normal;
}

.glass textarea {
    font-family: monospace;
}

.innerGlass {
    margin: 15px auto;
    width: 80%;
    font-family: Hind;
    font-size: 14px;
}

.innerGlass p {
    margin: 0 15px;
}


/* ~---~---~---~ HOME PAGE ~---~---~---~ */

/*---DAILY MESSAGE---*/
    #daily-message {
        font-family: Eurostile;
        color: rgb(255, 255, 255);
        margin: 8px 0 2px 0;
    }

/*---WHOLE MAIN---*/

    .main-piece {
        height: 800px;
    }

    .scroll-image {
        margin-top: 7px;
    }

    #main-top {
        grid-template-areas: "t-1 t-2 t-3";
        height: 800px;
    }

    #main-bottom {
        grid-template-areas: "b-1 b-2 b-3";
        height: 800px;
    }

    .home-main-piece {
        height: 800px;
    }

/*---TOP BODY---*/
    /*---LEFT (TOP)---*/
        #info-box a {
            display: block;
            font-family: Eurostile;
            text-decoration: none;
            color: white;
        }

        #linkme-box {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            min-height: 1%;
            flex-grow: 1;
        }

    /*---CENTER (TOP)---*/
        #top-center {
            display: grid;
            grid-template-columns: 2fr 3fr;
            grid-template-rows: 1fr 1fr;
            grid-template-areas: 
            "tc-1 tc-2"
            "tc-3 tc-3";
            color: rgb(236, 236, 236);
            text-shadow: 1px 1px 1px #000000, 0 0 10px #bebebe;
        }

            #about-me {
                display: flex;
                flex-direction: column;
                align-content: center;
                text-align: center;
                overflow: hidden;
            }

            #about-me div {
                height: 50%;
                overflow-y: scroll;
                border-top: 1px solid;
                border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.459)) 1 0 0 0;
            }

            #pfp {
                display: block;
                height: 120px;
                width: 100px;
                margin: 20px auto 0px;
            }

            #about-site {
                margin-left: 10px;
                text-align: center;
            }

            #pets {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                margin-top: 10px;
            }

                #pokemon-party {
                    display: flex;
                    flex-direction: column;
                }

    /*---RIGHT (TOP)---*/
        #friends-box {
            min-height: 1%;
            overflow-y: auto;
            scrollbar-color: rgb(0, 255, 200) transparent;
            scrollbar-width: thin;
            text-align: center;
            flex-grow: 1;
        }

        #friends-box a {
            margin: 5px !important;
        }

        #changelog-box {
            height: 225px;
            overflow-y: auto;
        }

        #todo-box {
            height: 180px;
            overflow-y: auto;
            list-style-type: none;
            padding-left: 28px;
        }

/*--BLINKIE SCROLL---*/
    #scroll-blinkie img {
        height: 20px;
        width: auto;
        margin-bottom: -5px;
    }

/*---BOTTOM BODY---*/
    /*---LEFT (BOTTOM)---*/
        #idkyet {
            min-height: 1%;
            flex-grow: 1;
        }

    /*---CENTER (BOTTOM)---*/
        #bottom-center {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 3fr 1fr;
            grid-template-areas: 
            "bc-1"
            "bc-2";
            color: rgb(236, 236, 236);
            text-shadow: 1px 1px 1px #000000, 0 0 10px #bebebe;
        }

            #manifesto {
                overflow-y: scroll;
                margin-bottom: 10px;
            }

            .manifesto-memes {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 40%;
                border: 2px solid rgb(139, 131, 5);
                border-radius: 5px; /*rounds the edges*/
                padding: 4px; /*gives space from the image*/
            }

            #webrings {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                text-align: center;
                gap: 15px;
                overflow-x: auto;
                overflow-y: hidden;
            }

            #webrings div {
                max-height: 100%!important;
            }

            #webrings > * {
                flex-shrink: 0;
            }

            #webring-artistsonline {
                font-family: Free Pixel;
            }

            #webring-hotline {
                font-family: Free Pixel;
                font-weight: bold;
            }

            #webring-hotline img {
                height: 100px;
            }

            #webring-null {
                font-family: 'Courier New', Courier, monospace;
                margin: 0;
                font-weight: bold;
            }

            #webring-retronaut {
                font-family: 'Times New Roman', Times, serif;
                background-color: white;
                border: 1px solid black;
                padding: 5px;
            }

            #webring-retronaut a {
                text-decoration: none;
                color: black;
            }

    /*---RIGHT (BOTTOM)---*/
        /* #rightBottom {
            
        } */

            #pollBox {
                min-height: 1%;
                flex-grow: 1;
            }

            #piclogBox {
                min-height: 1%;
                flex-grow: 1;
            }

/*---STAMP SCROLL---*/
    #scroll-stamp img {
        height: 56px;
        width: auto;
        margin-bottom: -7px;
    }


/* ~---~---~---~ COLLECTION PAGES ~---~---~---~ */

#collection-page {
    max-width: 700px;
}

#main-collection {
    margin-top: 30px;
}

.collection {
    text-align: center;
}

.collection-scroll {
    image-rendering: pixelated;
    overflow-y: scroll;
    max-height: 75vh;
    background-color: #F0EAD6;
}

.collection h2 {
    padding-bottom: 5px;
}

.collection img {
    display: inline-block;
}

.tiny {
    height: 50px;
}

.small {
    height: 100px;
}

.medium {
    height: 200px;
}

#main-collection a {
    text-align: center;
    padding-bottom: 10px;
    font-size: larger;
    color: #ffcf4a;
}

#collection-page main {
    margin-bottom: 10px;
}