html { position:relative; min-height:100%; }

body { margin:0; color:#ffe700; font-family: "Poiret One", sans-serif; font-size:1.25rem; background-color:#2e0055; font-size:1.25rem; }

.mainHeader { color:#ffffff; font-family:'Waterfall', cursive; font-size:7rem; }
.mainHeaderSmallest { color:#ffffff; font-size:1.5rem; }
.mainCenter { text-align:center; padding-top:calc(50vh - 120px); padding-left:1.5rem; padding-right:1.5rem; }

.header { padding-left:3rem; color:#ffe700; font-family:'Waterfall', cursive; font-size:5rem; }
.headerSmall { padding-left:3rem; color:#ffe700; font-family: "Waterfall", cursive; font-size:2rem; margin-top:-20px; }

a { color:#ff0095; text-decoration:underline; }
a:hover { color:#2e0055; }

.fontCursive { font-family:'Waterfall', cursive; }
.fontCursiveL { font-family:'Waterfall', cursive; font-size:4rem; }

.subtitle { padding-top:1rem; font-family:'Waterfall', cursive; font-size:5rem; }
.subtitle a { font-size:5rem; }
.tcenter { text-align:center; }

.subsubtitle { padding-top:1rem; font-family:'Waterfall', cursive; font-size:3rem; }
.subsubtitle i { font-size:2rem; }

.pl { padding-left:3rem; }
.pall { padding:5rem; }
.pallS { padding:2rem; }

.sFont { font-size:1rem; }

.videoFrame { text-align:center; }
.videoFrame iframe { width:320px; height:200px; border:solid #ff0095 0.5rem; border-radius:1.5rem; }

.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }

.flex { display:flex; align-items:stretch; flex-wrap: wrap; }
.flex > div { padding:0 2.5px 0 2.5px; flex-grow: 1; }
.flex > div > img { width: 100%; }

.flex50 { display:flex; align-items:stretch; }
.flex50 > div { padding:0 2.5px 0 2.5px; flex-grow: 1; }
.flex50 > div > img { width: 100%; }

.displate { width:315px; margin:auto; }
.displate > div > div > a > img { max-width:100px; }

.whiteBackground { color:#ffe700; background-color:#5800a5; }
.whiteBackground a { color:#ffe700; }

.mainBackground { min-height:100vh; background-repeat:no-repeat; background-position:center; background-size:cover; background-image:url('../images/magic.png'); }
.displateBackground { background-size:cover; background-position:center; }
.mainWhiteBackground { padding:5rem 10rem; color:#ff0095; background-color:#ffffff; }
.mainPurpleBackground .learnmore a { color:#ffffff; }
.mainPurpleBackground .videoFrame iframe { border-color:#ffffff; }
.mainPurpleBackground { padding:5rem 10rem; color:#ffffff; background-color:#5800a5; }
.mainPurple2Background { padding:5rem 10rem; color:#fffa00; background-color:#8f00ff; }

.mainPurpleBackground a { color:#ffffff; }
.mainPurpleBackground a:hover { color:#ff0095; }
.mainPurpleBackground .defaultImage img { border-color:#ffffff; }

.defaultImage img { width:300px; height:300px; border:solid #ff0095 0.5rem; border-radius:1.5rem; }
.dani img { width:200px; height:200px; border:solid #ff0095 0.5rem; border-radius:1.5rem; }
.dani img:hover { border-color:#2e0055; }
.youtube img { width:200px; height:200px; border:solid #ff0095 0.5rem; border-radius:1.5rem; }
.youtube img:hover { border-color:#2e0055; }
.maps iframe { width:200px; height:200px; border:solid #ff0095 0.5rem; border-radius:1.5rem; }
.maps iframe:hover { border-color:#2e0055; }

@media (orientation: portrait)
{
    .flex50 { display:flex; align-items:stretch; flex-wrap: wrap; }
    .flex50 > div { padding:0 2.5px 0 2.5px; flex-grow: 1; width:100%; }
    
    .displate { width:310px; margin:auto; }
    .displate > div > div > a > img { max-width:150px; }
    
    .wallpaper > div { width: 100%; }

    .hideMobile { display:none; }
    .mainWhiteBackground { padding:2.5rem 5rem; }
    .mainPurpleBackground { padding:2.5rem 5rem; }

    .mainHeader { font-size:5rem; }
    .pall { padding:2rem; }

    @media (max-width:768px)
    {
        .mainWhiteBackground { padding:1rem 1.5rem; }
        .mainPurpleBackground { padding:1rem 1.5rem; }
        .pall { padding:0.5rem; }
        .subtitle { text-align:center; padding-left:0; font-size:4rem; }
        .header { text-align:center; padding-left:0; font-size:3.5rem; }
        .headerSmall { text-align:center; padding-left:0; font-size:1.5rem; }
        .mainCenter { padding-top:calc(50vh - 88px) }
        .mainHeader { font-size:4rem; }
        .videoFrame { padding:0.5rem; }
        .videoFrame iframe { width:280px; height:185px; }
    }
}

@media (orientation: landscape)
{
    .mainWhiteBackground { padding:2.5rem 5rem; }
    .mainPurpleBackground { padding:2.5rem 5rem; }
    .pall { padding:2rem; }
}