* {box-sizing: border-box;
scrollbar-color:black #fac116;}

h1, h2, h3, h4 {font-family: 'Amarante', display;
color:#fac116;}

h1 {font-size:48pt;}
h2 {font-size:32pt;
margin-bottom:0;} 
h3 {font-size:20pt;
margin:0;}

body {background-color: rgb(19, 19, 19);
background-image:url(https://i.postimg.cc/4NfYmZ1x/bgs11.png);
background-position: bottom right;
background-attachment: fixed;
background-repeat:repeat-x;}

img {max-width:100%;}

.main {color:white;
width:80%;
max-width:800px;
margin:auto;
font-family:'Atkinson Hyperlegible', sans-serif;
}

#happyhalloween {float: left;
    width:400px;
}

h1 {text-align: center;}

.candybowl {border:15px solid #FF7B00;
    border-bottom:80px solid #FF7B00;
    border-top:5px solid #FF7B00;
border-radius:100%;
height:300px;
width:550px;
margin:auto;
overflow:hidden;
background: #c76000;
}

.candybowlcontainer {position:relative;
width:fit-content;
margin:auto;}

#example {left:200px;
top:25px;}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
  transition:0.5s;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 14pt;
  text-align: center;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
    transition:0.5s;
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
    transition:0.5s;
  scale:1.1;
  rotate:-5deg;
  image-rendering: optimizeQuality;
}

#bat, #candybar, #eyedango, #boople, #eyeball, #rockcandy, #poisonapple, #dirtpudding, #sanic, #lolly {position:absolute;}

#bat {
left:120px;
top: -40px;}
#candybar {
left:150px;
top:150px;}
#eyedango {top:10px;
left:380px;}
#boople {top:60px;
left:190px;}
#eyeball {top:150px;
left:340px;}
#dirtpudding {top:30px;
left:401px;}
#rockcandy {left:200px;
top:120px;}
#poisonapple {top:140px;
left:260px;}
#sanic {left:30px;
top:40px;
}
#lolly {left:250px;
top:-20px;}


.costumes {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    border: solid 8px #005758;
    overflow: auto;
    gap: 15px;
    row-gap: 100px;;
    background: #140c008a;
    backdrop-filter: blur(10px);
    border-radius: 20px;;
}

.costumeentry {
    height: 223px;
    width: 240px;
    text-align: center;
    border: #140c00 solid 5px;
    outline: 5px #ea9335 solid;
}

.premade {margin:auto;}

.visit {
    background-color: #005758;
    font-family: 'Amarante', display;
color:#fac116;
    text-transform: uppercase;
    font-size: 18pt;
    width: 230px;
    padding: 5px;
    z-index: 3;
    position: relative;
    border: outset 2px;
}

.visit a {color:inherit;}

.iframewrapper {
    height: 213px;
    width: 230px;
    overflow: hidden;
}

iframe {
    height: 1065px;
    width: 1150px;
    padding: 0;
    -ms-transform: scale(0.20);
    -moz-transform: scale(0.20);
    -o-transform: scale(0.20);
    -webkit-transform: scale(0.20);
    transform: scale(0.20);
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
}