:root {  /* THIS HERE BE THE VARIABLES */
            --word-color: rgb(54, 30, 49);
            --border-color: rgb(102,69,86);
            --header-color: rgb(230, 196, 205); 
            --border-bottom: #F4ACB7;
            --link-visited: rgb(24, 13, 22);
            --link-hover: #e4b1b9;
            --link-active: #ffffff;
            --link-unvisited: rgb(54, 30, 49);
            --text-back:#0000003f;
            --wordbox-back: rgba(104, 59, 95, 0.267);
            --border-shadow: rgba(71, 30, 63, 0.265);
            --highlight-backround: rgb(230, 196, 205);
            --indent-color: rgba(230, 196, 205, 0.656);
            --indent-color2: rgb(70, 46, 58); 
}

h1, h2, h3, h4 { /* box thing */
                font-size: 1em;
	            background: var(--border-color); /* VARIABLE HERE */
	            color: var(--header-color); /* VARIABLE HERE */
	            border-bottom: 3px solid var(--word-color); /* VARIABLE HERE */
	            padding: 0.1%;
	            margin:  0;
                text-align: left;
                background: linear-gradient(180deg, rgb(117, 79, 98) 0%, rgb(102,69,86) 50%, rgb(94, 64, 78) 100%);
                text-shadow: 2px 2px 5px rgba(252, 170, 211, 0.202);
                font-size: 1.3em;
}

body {
                background-color: black;
                font-size: 1.5em;
                background-attachment: fixed;
                color: var(--word-color); /* VARIABLE HERE */
                background-color: var(--text-back); /* VARIABLE HERE */
                font-family: "Glamourgirl";
                overflow: hidden;
                background-image: url("https://malorie.neocities.org/dithered%20background.png");
                background-attachment: fixed;
}

.wordbox {
                text-shadow:5px rgb(24, 13, 22);
                text-indent: 35px;
                padding-top: 15px;
                font-weight: 500;
                text-align: center;
}

.div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8 {
                background-image: url("https://malorie.neocities.org/background%20pic.png");
                border-radius: 5px;
	            margin: 1%;
                border-bottom: 3px solid var(--border-color); /* VARIABLE HERE */;
                border-right: 3px solid var(--border-color); /* VARIABLE HERE */;
                border-left: 4px solid var(--border-color); /* VARIABLE HERE */;
                text-align: center;
                margin-top: 1%;
                margin-left: 1%;
                margin-right: 1%;
                margin-bottom: 1%;
}


.parent {
                display: grid;
                grid-template-columns: repeat(9, 9fr);
                grid-template-rows: repeat(5, 3fr);
                gap: 3px;
                margin-top: 3%;
                margin-left: 3%;
                margin-right: 3%;
                margin-bottom: 3%;
            
}

.div2 {        /* main */
                grid-column: span 2 / span 2;
                grid-row: span 1 / span 4;
                grid-column-start: 3;
                grid-row-start: 2;
}

.div3 {         /* nav */
            grid-column: span 2 / span 3;
            grid-column-start: 2;
            grid-row-start: 1;
}

.div4 {         /* site updates */
            grid-row: span 4 / span 2;
            grid-column-start: 2;
            grid-row-start: 2;
}

.div5 {         /* footer */
            grid-column: span 3 / span 3;
            grid-column-start: 2;
            grid-row-start: 7;
}

.div6{          /* stamps */
            grid-column: span 8 / span 1;
            grid-row: 1 / 8;
            grid-column-start: 5;
            grid-row-start: 1;
}

.div7 {         /* webring */
            grid-row: span 2 / span 3;
            grid-column-start: 2;
            grid-row-start: 4;
}

.button2 {
            padding: 15px 29px;
            text-align: center;
            display: inline-block;
            font-size: 20px;
            margin: 4px 4px;
            margin-top: 3px 3px;
            margin-bottom: 3px 3px;
            background-color: var(--border-color); /* VARIABLE HERE */
            color: var(--header-color); /* VARIABLE HERE */
            border-radius: 5px;
            border-bottom: 5px solid var(--word-color); /* VARIABLE HERE */;
            border-right: 5px solid var(--word-color); /* VARIABLE HERE */;
}

.button2:hover {
            background-color: var(--border-bottom); /* VARIABLE HERE */
            color: var(--word-color); /* VARIABLE HERE */
            padding: 15px 29px;
            text-align: center;
            display: inline-block;
            font-size: 20px;
            margin: 4px 4px;
            cursor:alias
}

.windowbuttons {
            position: relative;
            right: 15px; /* this how u move it */
            top: 13px; /* this how u move it */
}

.pfp {
            width: 200px;
            height: 200px;
            aspect-ratio: 3 / 2;
            object-fit: cover;
            margin: 10px;
}

.stamp {
            position: relative;
            top: 15px; /* this how u move it */
}

a:link {
        color: var(--link-visited); /* VARIABLE HERE */
}

a:hover {
                color: var(--border-bottom); /* VARIABLE HERE */
                text-decoration: wavy;
                background-color: var(--border-color); /* VARIABLE HERE */
}

a:active {
                color: rgb(255, 218, 228);
}

::selection {
                background: var(--header-color); /* VARIABLE HERE */
                text-decoration: underline;
                text-shadow: 2px 2px rgb(255, 218, 228);
}