body {
    font-family: "RobotoSlab", serif;
/*
    color: #222;
 */
    color: rgba(255,241,224,1);
    background: #F6F4F1;
    overflow-y: scroll;
}

h3 {
    text-align: center;
}

label {
	font-family: "Playfair Display", serif;
}

section {
}

article:before {
    content: '';
    display: block;
    position: fixed;
    top: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    border: 1px solid rgba(255,241,224,0.2);
    z-index: 10;
    pointer-events: none;
}

#intro {
    position: fixed;
    width: 100%;
    height: 100%;
    text-rendering: optimizeLegibility;
    text-align: center;
    display: flex;
    align-items:     center;
    justify-content: center;
    /* insert mobile background here */
    background-image: url('../img/AWarmNight.jpeg');
    background-size: cover;
    background-position: center left;
}
#actualcontent {
    position: absolute;
    margin-top: 100vh;
    width:  100%;
    height: 50em;
    /* insert mobile background here */
/*
    background: #F6F4F1;
    background-image: linear-gradient(to bottom, transparent 0%, #F6F4F1 100vh);
*/
    background-image: url('../img/AWarmNight.jpeg');
    background-attachment: fixed;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    visibility: hidden;
    display: none;
}
#actualcontent:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0%, #F6F4F1 100vh);
}

/* Configure the step mechanism.
--------------------------------------------- */  

input[name="intro-steps"] {
    display: none;
}
#intro-rest {
    position: absolute;
    border: 1px solid transparent;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items:     center;
    justify-content: center;
    -webkit-user-select: none; /* Safari */        
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
            user-select: none; /* Standard */
    visibility: visible;
    opacity: 1;
    animation: fade-in 2s backwards;
    animation-delay: 2s;
}
label[for^="step-"] {
    margin: 0 auto;
    cursor: pointer;
    display: block;
    visibility: hidden;
    opacity: 0;
    animation: fade-out 2s forwards;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
div[data-step] {
    position: absolute;
    display: inline-block;
    visibility: hidden;
    animation: fade-out 2s forwards;
    pointer-events: none;
}
label[for^="step-"]:active {
    background-color: transparent !important;
}
input[name="intro-steps"]:active {
    display: none;
    background-color: transparent !important;
}
div[data-step="1"] ,
label[for="step-1"] {
    position: absolute;
    visibility: visible;
    opacity: 1;
    bottom: auto;
    font-size: 300%;
    width: 4.5em;
    height: 1.4em;
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id^="step-"]:checked ~ section div[data-step="1"] ,
input[id^="step-"]:checked ~ section label[for="step-1"] {
    animation: fade-out 2s forwards;
    pointer-events: none;
}
input[id="step-1"]:checked ~ section div[data-step="2"] ,
input[id="step-1"]:checked ~ section label[for="step-2"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-2"]:checked ~ section div[data-step="4"] ,
input[id="step-2"]:checked ~ section label[for="step-4"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-4"]:checked ~ section div[data-step="5"] ,
input[id="step-4"]:checked ~ section label[for="step-5"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-5"]:checked ~ section div[data-step="6"] ,
input[id="step-5"]:checked ~ section div[data-step="6-1"] ,
input[id="step-5"]:checked ~ section label[for="step-6-1"] {
    animation: fade-in 2s forwards;
    animation-delay: 1s;
    pointer-events: auto;
}
input[id="step-6-1"]:checked ~ section div[data-step="6"] ,
input[id="step-6-1"]:checked ~ section div[data-step="6-2"] ,
input[id="step-6-1"]:checked ~ section label[for="step-6-2"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-6-2"]:checked ~ section div[data-step="6"] ,
input[id="step-6-2"]:checked ~ section div[data-step="6-3"] ,
input[id="step-6-2"]:checked ~ section div[data-step="6-3-1"] ,
input[id="step-6-2"]:checked ~ section label[for="step-6-3-1"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-6-3-1"]:checked ~ section div[data-step="6"] ,
input[id="step-6-3-1"]:checked ~ section div[data-step="6-3"] ,
input[id="step-6-3-1"]:checked ~ section div[data-step="6-3-2"] ,
input[id="step-6-3-1"]:checked ~ section label[for="step-6-3-2"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-6-3-2"]:checked ~ section div[data-step="6"] ,
input[id="step-6-3-2"]:checked ~ section div[data-step="6-3"] ,
input[id="step-6-3-2"]:checked ~ section div[data-step="6-3-3"] ,
input[id="step-6-3-2"]:checked ~ section label[for="step-6-3-3"] {
    animation: fade-in 2s forwards;
    pointer-events: auto;
}
input[id="step-6-3-3"]:checked ~ section div[data-step="6"] ,
input[id="step-6-3-3"]:checked ~ section div[data-step="6-3"] ,
input[id="step-6-3-3"]:checked ~ section div[data-step="6-3-3"] ,
input[id="step-6-3-3"]:checked ~ section label[for="step-6-3-3"] {
    animation: fade-in 2s forwards;
}
input[id="step-6-3-3"]:checked ~ section label[for="step-6-3-3"] > span {
    box-shadow: 0 0 0 1em rgba(255,241,224, 0.07);
    animation: upwards 2s infinite;
}
input[id="step-6-3-3"]:checked ~ #actualcontent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.line1 {
    padding-bottom: 1.5em;
}
.line2 {
    padding-top: 1.5em;
    border: 1px solid transparent;
}
div[data-step^="6"] > span:first-of-type {
    position: absolute;
    text-align: left;
}
.hidden {
    visibility: hidden;
}

.blob {
    position: fixed;
    bottom: 4em;
}
.blob > span {
    display: block;
    background: rgba(255,241,224,0.7);
    border-radius: 50%;
    margin: 1em;
    height: 1em;
    width: 1em;

    box-shadow: 0 0 0 0 rgba(255,241,224,1);
    transform: scale(1);
    animation: pulse 2s infinite;
}

/* Configure the styling of each step.
--------------------------------------------- */  

div[data-step="1"] > div {
	font-family: "AlexBrush", serif;
    text-shadow:
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px,
        rgba(255,255,255,1) 0px 0px;
    transform: scale(0.98);
    animation: justpulse 4s infinite;
}

/* Animations
--------------------------------------------- */  

@keyframes fade-out {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
    }
    99% {
        visibility: visible;
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes fade-in {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: scale(0.9);
    }
    1% {
        visibility: visible;
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(255,241,224, 1);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 1em rgba(255,241,224, 0);
    }

    100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(255,241,224, 0);
    }
}

@keyframes justpulse {
    0% {
        transform: scale(0.98);
        text-shadow:
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px,
            rgba(255,255,255,0.1) 0px 0px;
    }

    70% {
        transform: scale(1);
        text-shadow:
            rgba(255,255,255,0)   0.0px  60.0px,
            rgba(255,255,255,0)  60.0px   0.0px,
            rgba(255,255,255,0) -60.0px   0.0px,
            rgba(255,255,255,0)   0.0px -60.0px,
            rgba(255,255,255,0) -42.0px -42.0px,
            rgba(255,255,255,0)  42.0px  42.0px,
            rgba(255,255,255,0)  42.0px -42.0px,
            rgba(255,255,255,0) -42.0px  42.0px;
    }

    100% {
        transform: scale(0.98);
        text-shadow:
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px,
            rgba(255,255,255,0) 0px 0px;
    }
}

@keyframes upwards {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-2em);
    }
}


/* Media queries for different screen layouts
---------------------------------------------- */  

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

    .blob {
        bottom: 2em;
    }
    @keyframes upwards {
        0% {
            opacity: 0;
            transform: translateY(0);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translateY(-1em);
        }
    }

}

/* Small landscape screen layout
--------------------------------------------- */  
@media only screen 
  and (max-device-width: 10em) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
}

/* Large screen layout
--------------------------------------------- */  
  
@media screen and (min-width: 45em) {

  #intro {
    background-image: url('../img/AWarmNight.jpeg');
/*
    background-position: center;
*/
  }

    span[data-step="1"] ,
    label[for="step-1"] {
        font-size: 400%;
    }

}