/* THIS FILE ONLY EXISTS BECAUSE @Pelijot WAS TRIGGERED, ELSE IT WOULD STILL BE INLINE */
    
    
    /*              =========FONTS=========                 */

        /* custom Doto font, just 1 file luckily – also looks kinda like NDot lol */
        @font-face {
            font-family: Doto;
            src: url(fonts/doto/Doto-VariableFont_ROND\,wght.ttf);

        }

        /* why TF does this font have so many files???? */
        @font-face {
            font-family: Redaction50;
            src: url(fonts/redaction_50/Redaction50-Regular.ttf);
        }

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

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

        /* and another one... lol*/
        @font-face {
            font-family: Redaction35;
            src: url(fonts/redaction_35/Redaction35-Regular.ttf);
        }

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

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


        /* this is fine, still */
        @font-face {
            font-family: Redaction70;
            src: url(fonts/redaction_70/Redaction70-Regular.ttf);
        }

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

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

        /* mayyybe this font is overkill. just maybe tho */
        @font-face {
            font-family: Redaction100;
            src: url(fonts/redaction_100/Redaction100-Regular.ttf);
        }

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

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

        /* for the website url, mostly.- maybe i'll find another use */
        @font-face {
            font-family: RedHatMono;
            src: url(fonts/red_hat_mono/RedHatMono-VariableFont_wght.ttf);
        }

        @font-face {
            font-family: RedHatMono;
            src: url(fonts/red_hat_mono/RedHatMono-Italic-VariableFont_wght.ttf);
            font-style: italic;
        }

        /* awesome fonts */
        @font-face {
            font-family: Barcode;
            src: url(fonts/barcode/LibreBarcode39Text-Regular.ttf);
        }
        @font-face {
            font-family: CoralPixels;
            src: url(fonts/coral_pixels/CoralPixels-Regular.ttf);
        }
        @font-face {
            font-family: Redacted;
            src: url(fonts/redacted/Redacted-Regular.ttf);
        }
        @font-face {
            font-family: RubikLines;
            src: url(fonts/rubik_lines/RubikLines-Regular.ttf);
        }
        

        /*            =========STYLING=========                 */
        body {
            margin: 20px;
            margin-top: 0px;
            background-color: black;
            color: white;

            header {
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                border-bottom: 1px;
                border-color: red;
                border-style:solid;

                div {
                    display: grid;
                    grid-template-rows: 1;
                    grid-template-columns: 10% 80% 10%;
                    justify-content: center;
                    justify-items: center;
                    align-items: center;
                    align-content: center;
                    margin-top: 10px;
                    

                    #website-url {
                        color: #aa0000;
                        line-height: 0;
                        font-family: RedHatMono;
                        font-weight: lighter;
                        margin-top: 0px;
                        margin-bottom: px;
                        margin-right: 10px;
                        margin-left: 10px;
                        font-size: 18px;
                    }

                    #contact-me {
                        color: white;
                        font-family: RedHatMono;
                        margin-left: 0px;
                        margin-top: 0px;
                        margin-bottom: 0px;
                        margin-right: 10px;
                        font-size: 16px;
                        align-self:right;
                    }
                }
            }

        }

        a:link {
            color: white;
            text-decoration: none;
            transition: linear 0.1s;
        }

        a:visited {
            color: white;
            text-decoration: none;
            transition: linear 0.1s;
        }

        a:hover {
            color: #ff9494;
            transition: linear 0.1s;
        }

        

        #columns {
            display: grid;
            gap: 5%;
            grid-template-rows: auto auto;
            grid-template-columns: repeat(auto-fill,500px);
            justify-content: center;
            align-items: stretch;
            justify-items: center;
            padding-bottom: 100px;
            
            /* background-color: red; */
            article {
                background-color: rgb(32, 0, 0);
                width: 100%;
                min-width: 300px;
                border-color: red;
                border-width: 5%;
                border-style: groove;

                color: white;

                h1 {
                    text-align: center;
                    font-family: Redaction70;
                    font-weight: light;
                    text-decoration:underline;
                }
            }
        }

        
        #introduction {
            margin-left: 20%;
            margin-right: 20%;
            
            #introduction-greeting {
                font-family: Redaction100;
                font-size: 50px;
                font-weight:600;
                line-height: 0.5;
                margin-bottom: 0;
                padding-bottom: 0;
            }

            #introduction-text {
                font-family: Redaction50;
                font-size: 30px;
                font-weight: normal;
            }
        }

        #games {
            
            .entry {
                justify-content: left;
                align-items: center;
                margin: 10px;
                display:flex;
                flex-flow: row;
                img {
                    height: 100px;
                    border-color: darkgray;
                    border-style: groove;
                    border-width: 5px;
                }

                p {
                    font-size: 30px;
                    font-family: Redaction50;
                    font-weight: bold;
                    margin-left: 10px;
                }
            }
        }

        #projects {
            
            .entry {
                justify-content: center;
                align-items: center;
                margin: 10px;
                display:flex;
                flex-flow: row;
                img {
                    height: 50px;
                }

                p {
                    font-size: 30px;
                    font-family: Redaction50;
                    font-weight: bold;
                    margin-left: 10px;
                }
            }
        }

        #selfhost {
            
            .entry {
                justify-content: center;
                align-items: center;
                margin: 10px;
                display:flex;
                flex-flow: row;
                img {
                    height: 50px;
                }

                p {
                    font-size: 30px;
                    font-family: Redaction50;
                    font-weight: bold;
                    margin-left: 10px;
                }
            }
        }

        #socials {

            .entry {
                justify-content: center;
                align-items: center;
                margin: 10px;
                display:flex;
                flex-flow: row;

                img {
                    height: 50px;
                }

                p {
                    font-size: 30px;
                    font-family: Redaction50;
                    font-weight: bold;
                    margin-left: 10px;
                }
            }
        }

        .list-container {
            margin: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            align-self: center;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            .tooltip-content {
                visibility: hidden;
                z-index: 1;
                bottom: 125%;
                opacity: 0;
                transition: opacity 0.3s;
            }
        }

        .tooltip:hover .tooltip-content {
            visibility: visible;
            opacity: 1;
        }