:root {
  /*
  ---------------------------------------------------
    Screw that thing, Imma Do my own pallete
  ---------------------------------------------------
  */
  --divbackground: #ffffff; /*body background*/
  --maincolor:     #FF8FB1; /*everything else*/
  --links:         #7A4495; /*links*/
  --background:    #FCE2DB; /*background*/
  --disabled:      #B270A2; /*disabled links*/
}

body{
  background-color: var(--background);
  color: var(--maincolor);
  background-image: linear-gradient(var(--maincolor) .1em, transparent .1em), linear-gradient(90deg,var(--maincolor) .1em, transparent .1em);
  background-size: 3em 3em;
  background-attachment: fixed;
}
/*
button{

}
*/
/*div needs to be media queried by aspect ratio*/
@media (max-aspect-ratio: 1/1) {
  div{
    background-color: var(--divbackground);
    border: var(--maincolor);
    border-width: .2em;
    border-style: solid;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1.5em;
    text-align: center;
  }
}

@media (min-aspect-ratio: 1/1) {
  div{
    background-color: var(--divbackground);
    border: var(--maincolor);
    border-width: .2em;
    border-style: solid;
    margin-right: 25%;
    margin-left: 25%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1.5em;
    text-align: center;
  }
}

.left {
  text-align: left;
}

a{
  color: var(--links);
}

a:hover {
  cursor: pointer;
}

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%
}

button {
  background-color: var(#ffffff);
  color: var(--maincolor);
  border-color: var(--maincolor);
  border-style: solid;
  padding: 0.5em;
  transition: 0.3s;
  opacity: 1.0;
}

button:hover {
  padding-left: 1em;
  padding-right: 1em;
}

button:visited {
  background-color: white;
}