.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}

.slackey-regular {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-image: url("nurple-static-bright.gif");
    background-color: black;
}

body p, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#container {
    display: grid;
    grid-template-rows: 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh 8.3vh;
    grid-template-columns: 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw 8.3vw;
    height: 100%;
    width: 100%;
    margin-left: -20px;
}

#test {
    display: flex;
    flex-direction: column;
    background-color: white;
    grid-column: 4/10;
    grid-row: 4/9;
    border: 5px solid black;
    border-radius: 20px;
    outline: 20px ridge white;
}

#composition {
    grid-column: 5/9;
    grid-row: 5/5;
    text-align: center;
    font-family: "Arial Black";
    padding: 0;
    font-size: 1.5em;
    margin-top: -30px;
}

#line1 {
    grid-column: 5/9;
    grid-row: 7/8;
    border-top: 2px solid black;
    margin-top: -10px;
}

#line2 {
    grid-column: 5/9;
    grid-row: 7/8;
    border-bottom: 2px solid black;
    margin-bottom: 0px;
}

/*#doriansworld {
    grid-column: 6/8;
    grid-row: 6/7;
    text-align: center;
    font-family: "Permanent Marker";
    color: rgb(210, 29, 120);
    font-size: 4em;
    margin-top: -20px;
    line-height: 70px;
    text-decoration: underline rgb(214, 157, 0) wavy 2px;
    text-shadow: 5px 5px  black;
}*/

#doriansworld2 {
    grid-column: 5/8;
    grid-row: 6/7;
    margin-left: 30px;
    margin-top: -60px;
}

#doriansworld25 {
    grid-column: 5/8;
    grid-row: 7/8;
    margin-left: 30px;
    margin-top: 5px;
}

#doriansworld2 img {
    width: 30vw;
}

#doriansworld25 img {
    width: 30vw;
}

#gum {
    grid-column: 9/10;
    grid-row: 4/5;
    margin-left: 50px;
    filter: drop-shadow(8px 8px 5px black);
}

#gum img {
    width: 10vw;
}

/*#silverstar2 {
    grid-column: 5/6;
    grid-row: 10/11;
    margin-left: 60px;
    margin-top: 10px;
}

#silverstar2 img {
    width: 3vw;
}*/

#denimstar {
    grid-column: 4/5;
    grid-row: 3/4;
    margin-left: 20px;
    transform: rotate(40deg);
}

#denimstar img {
    width: 80px;
}

#smiley {
    grid-column: 5/6;
    grid-row: 3/4;
    margin-top: 10px;
    margin-left: -10px;
    filter: drop-shadow(8px 8px 5px black);
    transform: rotate(-10deg);
}

#smiley img {
    width: 100px;
}

#puffypinkstar {
    grid-column: 4/5;
    grid-row: 4/5;
    margin-left: -40px;
}

#puffypinkstar img {
    width: 80px;
}

#flowergem {
    grid-column: 4/5;
    grid-row: 7/8;
    margin-left: -10px;
    margin-top: 0px;
    /*filter: drop-shadow(8px 8px 5px black);*/
}

#flowergem img {
    width: 160px;
}

#butterflysticker {
    grid-column: 9/10;
    grid-row: 2/3;
    margin-left: -30px;
    margin-top: 20px;
}

#butterflysticker img {
    width: 150px;
}

#exclamation {
    grid-column:10/11;
    grid-row:5/6;
    margin-left: 50px;
    margin-top: -40px;
}

#exclamation img {
    width: 150px;
}

#pinkglitterstar {
    grid-column: 9/10;
    grid-row: 7/8;
    margin-top: 15px;
    margin-left: 20px;
}

#pinkglitterstar img {
    width: 100px;
}

/*change to a button eventually for accessibility*/
#enter {
    /*background-color: #ddd;*/
    grid-column: 6/8;
    grid-row: 10/11;
    text-align: center;
    line-height: 55px;
    font-family: "Arial Black";
    font-size: 40px;
    /*outline: 5px groove darkgray;*/
    /*transition: transform 0;*/
}

#enter a {
    color: lightblue;
    -webkit-text-stroke: 2px rgb(214, 21, 117);
}

/*#enter:hover {
    transform: rotate(10deg);
}*/

/* everything below for homepage.html.
------------------------------------------------------ 
everything above was for index.html*/

/*#blinkiesbox {
    grid-column: 4/10;
    background-color: #eee;
    display: flex;
    outline: 5px solid hotpink;
}

footer {
}

*/

.flowerbuttons {
    background-color: pink;
    grid-column: 2/12;
    grid-row: 2/5;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-left: 40px;
}