html {
  overflow: hidden;
  background: #123;
}

#fullScreen{
	width: 100vw;
	height: 100vh;
	background-image: url("../img/IJWH.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#wallpaper{
  display: block;
  font-size: 52px;
  color: transparent;
  background: #123;
}

#pageHeader{
    width: 100vw;
 height: auto;
 position: fixed;
 top: 20px;
display: flex;
justify-content: center;
    
}

#pageHeader h1{
    color: rgba(255, 255, 255, .55);
    font-family: sans-serif;
    filter: blur(2px);
}

#wallpaper::before, #wallpaper::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

#wallpaper::before {
  text-shadow: 2.3772499778em -0.2914791919em 7px rgba(255, 91, 0, 0.9), -0.0174905477em 0.848076582em 7px rgba(150, 255, 0, 0.9), 0.1123127278em 2.2790767774em 7px rgba(0, 255, 112, 0.9), -0.2863282214em 2.1757075436em 7px rgba(24, 0, 255, 0.9), 0.8955841924em 1.8758024249em 7px rgba(238, 0, 255, 0.9), -0.496823515em 2.3931898383em 7px rgba(255, 98, 0, 0.9), -0.0844236231em 0.4407763677em 7px rgba(247, 255, 0, 0.9), 1.0920809445em -0.2381871674em 7px rgba(21, 255, 0, 0.9), 0.4836787271em 1.1031601145em 7px rgba(255, 210, 0, 0.9), 1.7710801654em 1.4268708022em 7px rgba(0, 233, 255, 0.9), 0.1315862194em 1.928088477em 7px rgba(158, 0, 255, 0.9), 2.4877626741em 1.1660354295em 7px rgba(255, 0, 67, 0.9), 1.1032982873em 1.5510104272em 7px rgba(126, 255, 0, 0.9), 0.4751119856em 0.9068037575em 7px rgba(0, 71, 255, 0.9), 1.9515208782em -0.1107022407em 7px rgba(0, 255, 82, 0.9), -0.1831515974em 1.3772272507em 7px rgba(0, 255, 208, 0.9), 0.4783280651em 1.3033133855em 7px rgba(24, 255, 0, 0.9), 0.4087018441em 1.4802984131em 7px rgba(0, 111, 255, 0.9), -0.2906585469em -0.100118874em 7px rgba(255, 174, 0, 0.9), -0.1364297417em 1.2595182341em 7px rgba(0, 24, 255, 0.9), 2.298423005em 1.2052282754em 7px rgba(255, 246, 0, 0.9), 0.8707299704em 0.8500567137em 7px rgba(55, 255, 0, 0.9), 1.8825776414em 0.8922227421em 7px rgba(255, 88, 0, 0.9), 0.4551636566em -0.2301517909em 7px rgba(0, 112, 255, 0.9), 2.2910875438em 1.188435166em 7px rgba(0, 72, 255, 0.9), -0.2015130185em 0.1046606439em 7px rgba(0, 255, 169, 0.9), 1.0946575843em 1.1710703846em 7px rgba(130, 0, 255, 0.9), -0.4003254383em -0.3826845545em 7px rgba(255, 0, 38, 0.9), 0.1357120651em 0.5199559674em 7px rgba(255, 0, 215, 0.9), 0.8329298423em 1.1907487781em 7px rgba(37, 0, 255, 0.9), 0.7245942872em 2.2771256702em 7px rgba(137, 255, 0, 0.9), 0.4727200887em 1.9077988714em 7px rgba(0, 254, 255, 0.9), 0.3655424181em 0.4428850173em 7px rgba(0, 222, 255, 0.9), -0.4264052539em 1.6277081538em 7px rgba(204, 0, 255, 0.9), 1.1348264034em 0.5658151327em 7px rgba(0, 253, 255, 0.9), 1.8367433964em 1.6622931953em 7px rgba(76, 0, 255, 0.9), 0.244614192em 2.1860754832em 7px rgba(0, 82, 255, 0.9), -0.3195844423em -0.1542605562em 7px rgba(255, 158, 0, 0.9), 2.2221950065em 0.6860805476em 7px rgba(222, 255, 0, 0.9), 2.3434336144em 0.647982468em 7px rgba(255, 121, 0, 0.9), 0.2829490477em -0.246657039em 7px rgba(57, 0, 255, 0.9);
  animation-duration: 44s;
  animation-delay: -27s;
}

#wallpaper::after {
  text-shadow: 0.8570551652em -0.0687049318em 7px rgba(255, 122, 0, 0.9), 1.1380363937em -0.2186339389em 7px rgba(0, 255, 22, 0.9), 1.379877285em 0.7871014773em 7px rgba(82, 0, 255, 0.9), -0.1520871706em 2.4658820677em 7px rgba(255, 0, 209, 0.9), 0.144217285em 2.2508392344em 7px rgba(0, 238, 255, 0.9), 0.9888978332em 0.0924079929em 7px rgba(42, 255, 0, 0.9), 2.4499576792em 1.0917677389em 7px rgba(216, 0, 255, 0.9), 2.1159046602em 0.8342471275em 7px rgba(0, 228, 255, 0.9), 1.997304723em 1.0073005497em 7px rgba(255, 0, 171, 0.9), 2.4747484747em -0.4928878245em 7px rgba(0, 255, 251, 0.9), -0.1623122499em 2.1827570899em 7px rgba(255, 0, 25, 0.9), 2.1848694004em 0.2453101147em 7px rgba(85, 0, 255, 0.9), 1.4025956911em 0.6479620272em 7px rgba(255, 0, 31, 0.9), 0.5823642418em 1.7621555583em 7px rgba(255, 0, 210, 0.9), 2.173012248em 1.5072030699em 7px rgba(152, 0, 255, 0.9), 0.876478947em 2.082265768em 7px rgba(0, 255, 220, 0.9), -0.0005585372em 0.0727765715em 7px rgba(0, 255, 236, 0.9), 0.8165341268em 1.1213826633em 7px rgba(0, 188, 255, 0.9), -0.1360345659em 1.992114873em 7px rgba(211, 0, 255, 0.9), -0.3791192533em 0.6424009723em 7px rgba(255, 0, 27, 0.9), 1.9620719963em -0.4869290025em 7px rgba(154, 0, 255, 0.9), 1.7938852406em 0.7878756814em 7px rgba(124, 255, 0, 0.9), 2.0253573573em 2.0275017922em 7px rgba(255, 0, 238, 0.9), 2.2836064873em 0.559248842em 7px rgba(189, 255, 0, 0.9), 2.2386664838em 2.1686932739em 7px rgba(0, 204, 255, 0.9), 0.4592896331em 2.3427482264em 7px rgba(156, 255, 0, 0.9), -0.2270230517em -0.060185657em 7px rgba(0, 255, 66, 0.9), 0.6270506913em 2.2551536272em 7px rgba(0, 255, 91, 0.9), 2.4949912206em 2.4322318004em 7px rgba(0, 255, 60, 0.9), 0.664048591em 1.9832566752em 7px rgba(0, 38, 255, 0.9), 0.0224754891em -0.2285537871em 7px rgba(164, 255, 0, 0.9), 2.261626816em 0.9039184976em 7px rgba(0, 255, 230, 0.9), 0.1958723843em -0.3960778893em 7px rgba(0, 255, 233, 0.9), 2.3898747592em 1.4879982967em 7px rgba(255, 0, 41, 0.9), 1.7198122487em 2.273728726em 7px rgba(123, 255, 0, 0.9), 0.9601887993em 1.5551931532em 7px rgba(0, 255, 189, 0.9), -0.2525841688em 1.2875038294em 7px rgba(0, 113, 255, 0.9), 0.1915429367em 1.2361489132em 7px rgba(0, 220, 255, 0.9), 0.0827492929em -0.0518073183em 7px rgba(254, 0, 255, 0.9), 1.4296023879em 0.1344855832em 7px rgba(255, 0, 151, 0.9), 0.2882556595em 2.2707134327em 7px rgba(2, 255, 0, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}


@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}

#invitationContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.fullWidthImg{
	width: 100%;
	height: auto;
}

#invitation{
    width: 75vw;
    height: auto;
    max-height: 60vh;
    overflow-y:auto;
    background: rgba(255, 255, 255, .5);
    padding: 5vw;
    /*display: flex;*/                 /* create nested flex container */
    /*flex-wrap: wrap;*/               /* enable flex items to wrap */ 
    /*justify-content: center;*/       /* center flex items on each line */
}


#invitation p{
    color: black;
    font-family: sans-serif;
    font-size: 1.25rem;
}

#invitation h1{
    color: black;
    font-family: sans-serif;
    font-size: 2rem;
    clear: both;
    text-align: center;
    margin: 0;
}

#invitation h2{
    color: black;
    font-family: sans-serif;
    font-size: 1.6rem;
    line-height: 1.65rem;
    clear: both;
    text-align: center;
    margin: 0;
}

#invitationImg{
 width: 75vw;
 height: auto;
 position: fixed;
 bottom: 20px;
display: flex;
justify-content: center;
}

#invitationImg img{ width: 20%; height: auto; opacity: .75;}

@media (orientation: portrait) {
    #invitation{max-height: 80vh;}
}