@font-face {
    font-family: "moonstar";
    src: url(fonts/Moonstar.ttf);
}

body {background-image: url(https://mottledmango.neocities.org/starrybackground.gif);}

.full-page{display: flex;
align-items: flex-start;
justify-content: center;
margin: 35px auto;
gap: 15px;}

.headertext {font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: xx-large;
color: blanchedalmond;
text-align: center;}

.smallertext {font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-align: center;
text-decoration: dotted blanchedalmond;}

aside {display: flex;
flex-direction: column;
justify-self: right;
justify-content: center;
padding: 20px;
width: 100%;
max-width: 430px;}

.ramblings {justify-self: center;
color: blanchedalmond;
text-align: center;
padding: 50px 200px 50px 200px;
background-color: rgb(38, 20, 51)}

.status {position: absolute; top: 80px; left: 430px;
max-width: 150px;}

.middlespace{display: flex;
flex-direction: column;
justify-self: center;
justify-content: center;
padding: 20px;
width: 100%;
max-width: 900px;}

.headertext1 {font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: xx-large;
color: blanchedalmond;}

.textbubble {height: 600px; width: 600px;
background-image: url(https://mottledmango.neocities.org/art-assets/gnarpgnarp.png);
background-position: center;
background-size: 600px;
background-repeat: no-repeat;
text-align:right;
padding: 70px 120px 0px 0px;}

.box {display: block;
justify-items: center;
padding: 10px;
background-color: rgb(38, 20, 51);
color: blanchedalmond;
border-left: 5px double rgb(48, 48, 228);
border-right: 5px double rgb(127, 21, 189)}

.sploingolook {display:block;
position: relative;;
width: auto; height: auto;
background-image: url(https://mottledmango.neocities.org/sploingolookie.png);
background-repeat: no-repeat;
background-size: 340px;
background-position: center;}

.showoff
img:active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2); 
}

#ramblings{display: flex;
flex-direction: column;
justify-self: center;
padding: 20px;
color: blanchedalmond;
text-align: center;
margin-top: 20px;
box-shadow: 5px #884ada;
width: 100%;
max-width: 950px;}

.boxtops {display: block;
border-radius: 25px 25px 0px 0px;
border-left: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
background: linear-gradient(180deg, rgb(19, 18, 41, 0.45), rgb(38, 20, 51))}

.boxbottom {display: block;
border-radius: 0px 0px 25px 25px;
margin-bottom: 30px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-right: 5px double rgb(127, 21, 189);
color: rgb(38, 20, 51);
background:linear-gradient(180deg, rgb(38, 20, 51), rgb(19, 18, 41, 0.45))}

.button {display: block;
background-color: rgb(68, 39, 85);
border-radius: 25px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-decoration: none;
padding: 10px;
width: 100px;
height: 40px;}

.buttontext {color: blanchedalmond;
text-decoration: none;
text-align: center;}