@font-face {
    font-family: ShadSer;
    src: url(bootimages/SHADSER.TTF);
}

@font-face {
    font-family: Groovilicious;
    src: url(bootimages/GROOT.TTF);
}

@font-face {
    font-family: Rolide;
    src: url(/fonts/RolideRounded-Regular.otf);
}

body{
    cursor: url(bootimages/cursor/Alternate.cur), auto;
}

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 80px repeat(4, minmax(200px, min-content)) 1fr repeat(2, 0.5fr) repeat(2, minmax(300px, min-content)) 80px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background: url(bootimages/starsrbowbg.gif);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: min-content;
}

.backgroundImage {
    grid-area: 2 / 1 / 6 / 6;
    background: #2828B3;
    background: #2828B3;
    background: linear-gradient(73deg, #002b82 54%, #0036BA 50%, #0036BA 75%, #002b82  74%);
}
.div2 { 
    grid-area: 2 / 1 / 5 / 3; 
}
.div3 { 
    grid-area: 2 / 3 / 6 / 5; 
}

.backButtonthing { grid-area: 1 / 4 / 2 / 5; }

.infoGrid { grid-area: 5 / 1 / 6 / 3; }


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

.buttonFlex{
    display: flex;
    flex-direction: column;
    gap: 5px 0px;
    max-width: 600px;
    margin: auto;
}

.buttonContainer{
    height: 200px;
}

.buttonContainer:nth-child(1){
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-start;
    order: 0;
}

.buttonContainer:nth-child(2){
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-end;
    order: 0;
}

.buttonContainer:nth-child(3){
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-start;
    order: 0;
}

.buttonContainer:nth-child(4){
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-end;
    order: 0;
}

.buttonContainer img{
   max-height: 100%;
  min-width: 100%;
  vertical-align: bottom;
}

.chocolateButtons{
    filter: drop-shadow(5px 5px #ffffff);
}

.cuteButtons{
    width: 150px;
}

.infoThings{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
}

.backButton{
    background-color: #E3FCFF;
    border: #74B6F0 solid 10px;
    position: absolute;
    top: 25px;
    right: 100px;
    padding: 5px;
}

#hisName{
    font-family: ShadSer;
    font-size: 64px;
    color: #FCA3D3;
    margin: 30px 0 0 0;
}

#wantedPoster{
    filter: drop-shadow(-20px 5px 20px #FCA3D3);
}

#mainText{
    text-align: center;
    font-size: 30px;
}

/* PAGE 2 */

.secondPageBG { 
    grid-area: 7 / 1 / 12 / 5;
    background: url(bootimages/halftonebg.jpg);
    background-size: cover;
}
.div7 { grid-area: 7 / 3 / 8 / 5; }
.div8 { grid-area: 8 / 1 / 9 / 4; }
.div9 { grid-area: 9 / 1 / 11 / 5; }

.controlsFlex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: normal;
    gap: 20px 0px;
}

.controlsFlex img:nth-child(1){
    width: 64px;
    filter: hue-rotate(40deg);
}

.controlsFlex img{
    width: 64px;
    filter: hue-rotate(285deg);
}

.secondPageFlex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: normal;
    background-color: #ffffff55;
}

.secondFlexItems{
    max-width: 50%;
}

.secondFlexItems:nth-child(1){
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    font-family: Rolide;
    font-size: 32px;
    color: #004FCC;
    text-align: justify;
    padding-left: 50px;
}

.secondFlexItems:nth-child(2){
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: flex-start;
    order: 0;
}

.secondFlexItems img{
    width: 100%;
   height: auto;
}

#infoHeader{
    font-family: Groovilicious;
    font-size: 120px;
    color: #EC5AA3;
    font-weight: 200;
    margin: 0;
    padding: 0;
}

#infoBG{
    background-color: #FCA3D3;
}

#boothillTalk{
    z-index: 1;
    position: relative;
    top: -66px;
    left: 0px;
}