:root {
        --mariacolor: #852756;
        --cutiecolor: #666; 
    }

body {
        background-color: rgb(203, 71, 113);
    }

main article {
    padding: 30px;
    display: none;
}
.maria {
     background-color: var(--mariacolor);
}

.cutie {
     background-color: var(--cutiecolor);
}


img.maria { /*We want the BUBBLE colored, but not the images, oh no. We're CLASSIER than that. */
    background-color: transparent;
    position: fixed;
    left: 65%;
    margin: -10px;
    z-index: 1;
}

/* For the bubbles, I used this demo, and edited it to suit my needs~: https://codepen.io/JoeHastings/pen/gPrPMo */

p.bubble, p.bubbletop {
    width: fit-content;
    position: relative;
	text-align: center;
	margin: 30px auto;
	color: white;
	border-radius: 30px;
	/*font-family: sans-serif;  */
	padding: 10px 15px;
	font-size: 20px;
}

p.bubble:before,
p.bubble:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

p.bubbletop:before /* This is flipped up properly, but it's still technically on the bottom, not top. HOW DO I PUT IT ON TOP?*/ {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

p.maria:before {
	right: 38px;
	bottom: -25px;
	border: 15px solid;
    border-color: var(--mariacolor) var(--mariacolor) transparent  transparent ;
}

p.top:before {   /* For Mafia talking above the bubble */
	right: 38px;
	top: -25px;   /* This lets it be top, by changing bottom -25 to top -25.*/
	border: 15px solid;
    border-color: transparent var(--mariacolor) var(--mariacolor)  transparent ;
}

.mariatalk {    /* Maria's icon positioning */
    position: absolute;
    width: 180px;
    left: 70%;
    z-index: 1;
}

.displaybox {
    display: inline-block;
    margin: 0 auto;
    border: solid black 5px;
    background-color: var(--mariacolor);
    width: fit-content;
   padding: 10px;
}

.displaybox img {   /*Centers images in the displaybox class.*/
    display: block;
    margin: auto;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.code {
    color: lightgrey; 
    font-size: 15px; 
    background-color: black;
    padding: 5px;
    margin: 10px;
}

.i {
    color: var(--mariacolor);
    font-size: 100px;
}

h2 {
   cursor: pointer;
    background-color: var(--mariacolor);
    width: fit-content;  
    padding: 10px;
    border-radius: 10px;
    position: relative;
    right: 0px;
}

p.cutie:after {
	left: 38px;
	bottom: -25px;
	border: 15px solid;
	border-color: var(--cutiecolor) transparent transparent var(--cutiecolor);
}