@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra+SC&display=swap');

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

.flex {
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    flex-wrap: wrap;
}

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

body {
  background-image: url(https://personaljesus.neocities.org/backgrounds/purplesatinbg.jpg);
  color: black;
  font-family: Almendra SC;
}

p {
  margin-left:5px;
  margin-right:5px;
}

#player {
    width: 350px;
    height: 25px;
    position:relative;
  }

#jesusbox {
  background-image:url(/backgrounds/tan.gif);
  height: 650px;
  width: 450px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
}

#jesusbox.alt {
  background-image: url(/backgrounds/clouds.gif);
}

#one {
  background-image:url(/backgrounds/flowers.png);
  height: 650px;
  width: 450px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
}

#two {
  background-image:url(/backgrounds/flowers.png);
  height: 650px;
  width: 450px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
}

.cloudbg {
  background-image: url(/backgrounds/clouds.gif);
}

.jesusbox1 {
  background-image:url(/backgrounds/clouds.gif);
  height: 650px;
  width: 450px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
}

.jesusbox2 {
  background-image:url(/backgrounds/flowers.png);
  height: 650px;
  width: 450px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
}

.titlecard {
  background-color:#ede9df;
  height: 40px;
  width: 375px;
  border-radius: 15px;
  text-align:center;
  border: 2px solid #291b00;
  margin-top:5px;
}

.itembox {
  background-color:#ede9df;
  height: 300px;
  width: 550px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
  position:relative;
}

.clothesbox {
  background-color:#ede9df;
  height: fit-content;
  width: 1080px;
  border: 5px solid #291b00;
  border-radius: 25px;
  text-align: center;
  position:relative;
}

.clouds {
  background-image: url(/backgrounds/clouds.gif);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
  position: relative;
}

.clouds:hover {
  cursor:pointer;
}

.flowers {
  background-image: url(/backgrounds/flowers.png);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
  position: relative;
}

.flowers:hover {
  cursor:pointer;
}

.fence {
  background-image: url(/backgrounds/fence.gif);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
  position: relative;
}

.fence:hover {
  cursor:pointer;
}

.default {
  background-image: url(/backgrounds/tan.gif);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
  position: relative;
}

.default:hover {
  cursor:pointer;
}

.golg {
  background-image: url(/backgrounds/golg.jpg);
  background-size: 100px 100px;
  background-repeat:no-repeat;
  height: 100px;
  width: 100px;
  position: relative;
  display:block;
}

.golg:hover {
  cursor:pointer;
}

.seaofgalilee {
  background-image: url(/backgrounds/sea.jpg);
  background-size: 100px 100px;
  background-repeat:no-repeat;
  height: 100px;
  width: 100px;
  position: relative;
  display:block;
}

.seaofgalilee:hover {
  cursor:pointer;
}

.temple {
  background-image: url(/backgrounds/temple.jpg);
  background-size: 100px 100px;
  background-repeat:no-repeat;
  height: 100px;
  width: 100px;
  position: relative;
  display:block;
}

.temple:hover {
  cursor:pointer;
}

.mount {
  background-image: url(/backgrounds/mount.JPG);
  background-size: 100px 100px;
  background-repeat:no-repeat;
  height: 100px;
  width: 100px;
  position: relative;
  display:block;
}

.mount:hover {
  cursor:pointer;
}

.protest {
  background-image: url(/backgrounds/protest.jpg);
  background-size: 100px 100px;
  background-repeat:no-repeat;
  height: 100px;
  width: 100px;
  position: relative;
  display:block;
}

.protest:hover {
  cursor:pointer;
}

.item {
  position:relative;
  display:block;
  width: 100px;
  height: 100px;
}

.quote {
  position:relative;
  display:block;
  width:200px;
  height:100px;
}

.clothes {
  position:relative;
  display:block;
  width: 350px;
  height:400px;
}

/*face IDs*/

#godspell {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#pantocrator {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#comodilla {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#whitejesus {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#3d {
  position: absolute;
  display:block;
  width: 80px;
  height:100px;
  z-index: 6;
}

#3djesus {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#jcss {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#boechapel {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#jamaica {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#velasquez {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#popmag {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

#giuliani {
  position: absolute;
  display:block;
  width: 150px;
  height:250px;
  z-index: 6;
}

#heqi {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 6;
}

/*clothes IDs*/ 

#redeemer {
  position: absolute;
  display:block;
  width: 350px;
  height:400px;
  z-index: 5;
}

#cross-dv {
  position: absolute;
  display:block;
  width: 350px;
  height:430px;
  z-index: 5;
}

#mount {
  position: absolute;
  display:block;
  width: 280px;
  height:400px;
  z-index: 5;
}

#majesty {
  position: absolute;
  display:block;
  width: 250px;
  height:400px;
  z-index: 5;
}

#buddha {
  position: absolute;
  display:block;
  width: 250px;
  height:400px;
  z-index: 5;
}

#godspellclothes {
  position: absolute;
  display:block;
  width: 300px;
  height:400px;
  z-index: 5;
}

#eccehomo {
  position: absolute;
  display:block;
  width: 150px;
  height:400px;
  z-index: 5;
}

#oda {
  position: absolute;
  display:block;
  width: 250px;
  height:400px;
  z-index: 5;
}

#agony {
  position: absolute;
  display:block;
  width: 250px;
  height:350px;
  z-index: 5;
}



/*accessories IDs*/

#sacredheart {
  position: absolute;
  display:block;
  width: 70px;
  height:100px;
  z-index: 7;
  filter: drop-shadow(0 0 10px #f5ab0c);
}

#crown {
  position: absolute;
  display:block;
  width: 100px;
  height:70px;
  z-index: 7;
}

#pride {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 7;
}

#wound {
  position: absolute;
  display:block;
  width: 25;
  height:50;
  z-index: 7;
}

#halo {
  position: absolute;
  display:block;
  width: 225px;
  height:190px;
  z-index: 3;
  filter: drop-shadow(0 0 10px #f5ab0c);
}

#maga {
  position: absolute;
  display:block;
  width: 100px;
  height:100px;
  z-index: 7;
}

#crook {
  position: absolute;
  display:block;
  width: 100px;
  height:500px;
  z-index: 7;
}

#lamb {
  position: absolute;
  display:block;
  width: 200px;
  height:200px;
  z-index: 7;
}

#loaf {
  position: absolute;
  display:block;
  width: 75px;
  height:75px;
  z-index: 7;
}

#communion {
  position: absolute;
  display:block;
  width: 100px;
  height:75px;
  z-index: 7;
}

/*quote IDS*/

#mark12-31 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#matthew7-1 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#john14-6 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#luke23-46 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#acts20-35 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#thomas114 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#rev21-8 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}

#matthew10-34 {
  position: absolute;
  display:block;
  width: 200px;
  height:100px;
  z-index: 8;
}