@font-face {
    font-family: "Glamourgirl";
    src: url();
}
    
: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";
            background-image: url("https://malorie.neocities.org/dithered%20background.png");
            background-attachment: fixed;
}

.div7,.div10,.div11,.div12,.div13,.div14,.div15,.div16,.div17,.div18,.div19,.div20,.div21, .div9, .div1, .div3 {
            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(5, 1fr);
            grid-template-rows: repeat(8, 1fr);
            gap: 0px;
}
    
.div1 {
            grid-row: span 1 / span 3;
}

.div3 {
            grid-column: span 2 / span 2;
            grid-row: span 7 / span 7;
            grid-column-start: 4;
}
        
.div3 {
            grid-column: span 2 / span 2;
            grid-row: span 7 / span 7;
}

.movieposter {
            width: 300px;
            height: 350px;
            aspect-ratio: 3 / 2;
            object-fit: cover;
}

figcaption {
            text-align: center;
}

figure {
            background-color: red;
            width: 250px;
            height: 370px;
            text-align: center;
}

details, .details2 {
            position: relative;
            left: 25px;
            margin: 15px;
            width: 640px;
            font-size: 35px;
            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 */;
}

summary {
            font-weight: bold;
            cursor: pointer;
            
}

summary::-webkit-details-marker {
            display: none;
}

.extrapic {
            border-radius: 5px;
            border-bottom: 5px solid var(--word-color); /* VARIABLE HERE */;
            border-right: 5px solid var(--word-color); /* VARIABLE HERE */;
            border-left: 3px solid var(--header-color); /* VARIABLE HERE */;
            border-top: 3px solid var(--header-color); /* VARIABLE HERE */;
            background: linear-gradient(180deg, rgb(196, 161, 170) 15%, rgb(167, 137, 144) 50%, rgb(180, 147, 155) 100%);;
            text-align: center;
            width: 300px;
            position: relative;
            left: 45px;
            bottom: 14px;
}

.windowbuttons2 {
                position: relative;
                right: 15px;
                top:11px;
}

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


a:visited {
                color: var(--header-color); /* VARIABLE HERE */
                text-decoration: wavy;
        
}

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);
}

.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(--button-color-light); /* 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
}