body {
 background-image: url("portfoliobg.png");
 background-color: #cccccc;
}

.kay-pho-du-regular {
  font-family: "Kay Pho Du", serif;
  font-weight: 400;
  font-style: normal;
}
.kay-pho-du-medium {
  font-family: "Kay Pho Du", serif;
  font-weight: 500;
  font-style: normal;
}
.kay-pho-du-semibold {
  font-family: "Kay Pho Du", serif;
  font-weight: 600;
  font-style: normal;
}
.kay-pho-du-bold {
  font-family: "Kay Pho Du", serif;
  font-weight: 700;
  font-style: normal;
}


#playertoggle {
    width: 900px;
    display: flex;
    justify-content: center;
    align-content: center;
    order: -1;
}

#myDIV {
  width: 960px;
  height: 477px;
  display: flex;
  justify-content: center;
  align-content: center;   
  margin-top: -5px;
  text-align: center;
  background-image: url("musicbg.png");
  display: none;
  position: absolute;
  z-index: 1;
}

.dialogue {
  width: 70%;
  font-size: 23px;

}

.dialogue2 {
  width: 100%;
  font-size: 23px;

}

#gameholder {
    display: flex;
    width: 1300px;
    /* background-image: url(backdrop.png); */
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap

}

.gamecube {
    border: 2px;
    width: 600px;
  font-size: 20px;
    margin-top: 20px;
    column-gap: 3em;
    row-gap: 1em; 


}

/* .ui{
    background-image: url(portfolio/container.png);
    width: 1700px;
    height: 800px;
    display: flex;
    justify-content: center;
    align-content: center;

} 
#backbutton{
    width: 200px;
    height: 200px;  
    background-image: url(back.png);
    justify-content: flex-start;
    align-content: flex-start;
} */

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



.frame{
    width: 800px;
    height: 670px;
  /*  background-image: url(container.png); */
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    column-gap: 3em;
}
.framegraph{
    width: 1200px;
    height: 900px;
    background-image: url(portfolioframe.png);
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    flex-wrap: wrap;
    column-gap: 3em;
    row-gap: 3em; 
}

a#greenie{
    width: 186px;
    height: 120px; 
    justify-content: center;
    order: 1;
    background-image: url(greeniesmall.png);
    display: block;
    align-content: flex-end
    
}

a#sbicon1{
   width: 480px;
    height: 300px; 
    justify-content: center;
    order: 1;
    background-image: url(sbicon1.png);
    display: block;
    align-content: flex-end
    
}
a#sbicon1:hover {
    background-image: url(sbicon1hover.png);
}


.box {
  color: white;
  cursor: pointer;
  width: 170px;
  height: 210px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


#content {
  padding: 100 0px;
  font-size: 20px;
  display: none;
  order: 998;
}



.collapsible {
  background-image: url(categsub1.png);
  cursor: pointer;
  background-color:transparent;
  padding: 18px;
  width: 300px;
  height: 150px;
  border: none;
  text-align: center;
  outline: none;
  font-size: 20px;
}

.collapsibleb {
  background-image: url(categsub2.png);
  background-color:transparent;
  cursor: pointer;
  padding: 18px;
  width: 300px;
  height: 150px;
  border: none;
  text-align: center;
  outline: none;
  font-size: 20px;
}

.collapsiblec {
  background-image: url(categsub3.png);
  background-color:transparent;
  cursor: pointer;
  padding: 18px;
  width: 300px;
  height: 150px;
  border: none;
  text-align: center;
  outline: none;
  font-size: 20px;
}

/*
.collapsiblec:active {
  background-image: url(categsub3press.png);
}
*/

.content2 {
  max-height: 0;
  width: 85%;
  display: flex; 
  justify-content: center; 
  align-items: flex-start;   
  overflow: hidden;
  transition: max-height 2s ease-out;
}

.content3 {
  max-height: 0;
  width: 85%;
  display: flex; 
  justify-content: center; 
  align-items: flex-start;   
  overflow: hidden;
  transition: max-height 20s ease-out;
}

.imgbox
{
  display: flex;
  flex-wrap: wrap;
  /* background-image: url(backdrop.png); */
  justify-content: center;


}


.endweb {
  padding: 20 100px;
  font-size: 15px;
  order: 999;
}

.cont1 {
  background-image: url(backdrop1.png);
   background-repeat: no-repeat;
}

.cont2 {
  background-image: url(backdrop2.png);
   background-repeat: no-repeat;
}

.cont3 {
  background-image: url(backdrop3.png);
   background-repeat: no-repeat;
}

.cont4 {
  background-image: url(backdrop4.png);
   background-repeat: no-repeat;
}

.cont5 {
  background-image: url(backdrop5.png);
   background-repeat: no-repeat;
}

.cont6 {
  background-image: url(backdrop6.png);
   background-repeat: no-repeat;
}






#box1{
    background-image: url(porticon1.png);
    cursor: pointer;
}
#box1:hover {
    background-image: url(porticon1h.png);
}

#box2{
    background-image: url(porticon2.png);
}
#box2:hover {
    background-image: url(porticon2h.png);
}

#box3{
    background-image: url(porticon3.png);
}
#box3:hover {
    background-image: url(porticon3h.png);
}

#box4{
    background-image: url(porticon4.png);
}
#box4:hover {
    background-image: url(porticon4h.png);
}

#box5{
    background-image: url(porticon5.png);
}
#box5:hover {
    background-image: url(porticon5h.png);
}

#box6{
    background-image: url(porticon6.png);
}
#box6:hover {
    background-image: url(porticon6h.png);
}    
    

--------------

.artcontainer{
    width: 1200px;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-direction: column-reverse;
    flex-wrap: wrap     
}

.artbox{
    width: 50%;
    height: 50%;  
}

#artbox1{
    background-image: url(art/art1.png);
}
#artbox2{
    background-image: url(art/art2.png);
}
#artbox3{
    background-image: url(art/art3.png);
}
#artbox4{
    background-image: url(art/art4.png);
}
#artbox5{
    background-image: url(art/art5.png);
}
#artbox6{
    background-image: url(art/art6.png);
}
#artbox7{
    background-image: url(art/art7.png);
}
#artbox8{
    background-image: url(art/art8.png);
}
#artbox9{
    background-image: url(art/art9.png);
}
#artbox10{
    background-image: url(art/art10.png);
}
#artbox11{
    background-image: url(art/art11.png);
}
#artbox12{
    background-image: url(art/art12.png);
}
#artbox13{
    background-image: url(art/art13.png);
}
#artbox14{
    background-image: url(art/art14.png);
}
#artbox15{
    background-image: url(art/art15.png);
}
#artbox16{
    background-image: url(art/art16.png);
}