/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


@font-face {
    font-family: 'Circus'; /*a name to be used later*/
  src: url('CarnivaleeFreakshow.eot?') format('embedded-opentype'), /* IE6-IE8 */
       url('CarnivaleeFreakshow.woff2') format('woff2'), /* Super Modern Browsers */
       url('CarnivaleeFreakshow.woff') format('woff'), /* Pretty Modern Browsers */
       url('CarnivaleeFreakshow.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('CarnivaleeFreakshow.svg') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'Carnival'; /*a name to be used later*/
  src: url('Caderia/Caderia.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('Caderia/Caderia.woff2') format('woff2'), /* Super Modern Browsers */
       url('Caderia/Caderia.woff') format('woff'), /* Pretty Modern Browsers */
       url('Caderia/Caderia.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Caderia/Caderia.svg') format('svg'); /* Legacy iOS */
}
/** THIS IS NECESSARY **/
.wiggle span {
  position: relative;
  transition: .5s top;
}

body {
  background-image: url("Pics/lowerStage.png"), url("Pics/Curtain.png"), url("Pics/FlipCurtain.png"), url("Pics/background.png");
  background-size: 90% 15%, 300px, 300px, 50px;
  background-position: center bottom, 0px 90px, 100% 90px, left top;
  background-repeat: no-repeat,no-repeat, no-repeat, repeat;
  background-attachment: fixed, scroll,  scroll, scroll;
  height: 100%;
}

body,
html {
  height: 100%;
}

.Lidl {
  background-image:url("Pics/BlueWhite.png");
  background-size: 436px;
  padding-bottom: 500pt;
  padding-top: 300px;
  margin-top: -300px;

}

.sto {
  margin-left: 3px;
  margin-right: 3px;
  text-align: justify;
  font-size: 19px;
}

.redLink{

}

.redLink a{
  text-decoration: none;
  color: #bb1414;
  background-color: #ffeac5;
  font-weight: bold;
}


div#main {
  height: auto;
  margin-left: 100pt;
  margin-right: 100pt;
}

div#left {
  margin-top: 359px;
  background-image: url("Curtain.gif");
  background-repeat: repeat-y;
  background-size: 120px;
  width: 120px;
  height: 4000px;
  float: left;
  position: absolute;
  left:0;
}

div#right {
  margin-top: 359px;
  background-image: url("Curtain.gif");
  background-repeat: repeat-y;
  background-size: 120px;
  width: 120px;
  height: 4000px;
  float: right;
  position: absolute;
  right:0;
  transform: scaleX(-1)
  
}

.gore {
  background-image: url("Pics/TopCurtain.png"), url("Pics/CurtainsBack.png");
  background-size: 370px, 300px;
  background-position: left top, left top;
  background-repeat: space, round;
  padding: 100px;
  margin: -20px;
  margin-bottom: -50px;
}
.dolu{
  position: absolute;
  size: 100%, 10%;
    background-image: url("Pics/lowerStage.png");
  background-size: 370px;
  background-position: center bottom;
  background-repeat:round;

  
}
.logo{
  background-clip: content-box;
  text-align: center;
  position:static;
}
.logo img{
  margin-top: 56px;
  width: 1250px;
  height: auto;
}
.ToDoList {
  font-family: 'Circus';
  font-size: 22px;
  list-style-type: square;

  background-image: url("Pics/PurpleTileBG.png");
  background-attachment: fixed;

  background-size:320px, auto;
  border:solid;
  color: #d6bc8f;
}
.ToDoList h2{
  text-align: center;
}
.ToDoList li{
  font-size: 25px;
}

.dqsno {
  width: 260px;
  z-index: 1;
  top: 0;
  right: 0;

  overflow-x: hidden;
  float:right;
  margin-right: 20px; 
}
.dqsno h1,h2,h3{
  font-family: "Circus";
}

.BasicTextDqsno{
  background-image: url("Pics/PurpleTileBG.png");
  background-attachment: fixed;
  
  font-size: 27px;
  background-size:320px, auto;
  border:solid;
  color: #d6bc8f;
  font-family: "Circus";
  padding-left: 15px;
}
.lqvo{
  width: 260px;
  z-index: 1;
  overflow-x: hidden;
  float: left;
  margin-left:20px;
  text-align: left;
}
.Kolko {
  background-image: url('Pics/PurpleTileBG.png');
  background-size: 320px;
  background-attachment: fixed;
  width:320px auto;
  margin-top: 15px;
  font-family:"Carnival";
  font-size:medium;
  color:#FFFFFF;
  padding-left: 1px;
  padding-top: 10px;
}
#moveshit{
  position:absolute;
  left: 0;
  margin: -520px 1030px;
}
#AlignWhyWontYou {
  text-align: center;
}
#surpriseButton {
  background-color: #6b0e7f;
  color: white;
  font-family: 'Circus';
  padding: 0.60em 5em;
  border: none;
  border-radius: 0.2em;
  font-size: 25px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
#surpriseButton:hover,
#surpriseButton:focus {
  background-color: #8216a6;
  transform: scale(1.05);
  outline: none;
}
.Ticket{
  width: 120px;
  rotate: 40deg;
}
.ZaRosen{
  background-image: url("Pics/PurpleTileBG.png");
  background-attachment: fixed;
  background-size: 320px, auto;
  border: solid;
  color: #d6bc8f;
}
.Magic{
  background-image: url("Pics/TiledBG.png");
  background-size: 320px, auto;
  background-attachment: fixed;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin-left: 220pt;
  margin-right: 220pt;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 2px solid;
  color: #ffeac5;
}
.Magic #p1{
  text-align: center;
  font-family: 'Carnival';
}
.Stuff{
  margin-top: 10px;
  background-image: url("Pics/PurpleTileBG.png");
  background-size: 320px, auto;
  background-attachment: fixed;
  padding-left: 10px;
  border: solid;
  color: #d6bc8f;
}
.Stuff h3{
  font-size: 32px;
  text-align: center;
}
.Stuff a{
  font-family: 'Carnival';
  text-decoration: none;
  color: #ffdbf6;
  font-size: 20px;
}

.vsichko {
  background-image: url("Pics/TiledBG.png");
  background-size: 320px auto;
  background-attachment: fixed;

  padding-left: 20px;
  padding-right: 20px;
  margin-left: 220pt;
  margin-right: 220pt;
  border: solid;
  text-align: center;
  font-family: 'Carnival';
  color: #ffeac5;
  letter-spacing: 0.1em;
}
.vsichko h1{
  font-size: 55px;
  font-family: 'Circus';

}

.vsichko h2{
  font-size: 35px;
  font-family: 'Circus';

}

.vsichko a{
  color: #bb1414;
  background-color: #ffeac5;
 font-weight: bold;
}

.drapes img {
  width: 300px;
  height: auto;
  position: absolute;
}
.Back{  
  top: 770px;
  height: 100px;
}
.Back img{
  position: absolute;
  height: 230px;
  margin-top: -140px;
  margin-left: 750px;
  rotate: 6deg;
}
.autism{
  margin-left: -880px;
  margin-top: 320px;
  height: 330px;
  rotate: -15deg;
}
.RDrape {
  z-index: -1;
  top: 0;
  left: 0;

  object-fit: fill;
}

.LDrape {
  transform: scaleX(-1);
  z-index: -1;
  top: 0;
  right: 0;

  object-fit: fill;
}

.rosen {
  margin-top: -15px;
  margin-left: 5px;
  width: 250px;
  height: 140px;
}