@import "global.css";

/* GENERAL */

#bodyContent {
    /* background: repeating-radial-gradient(#a65a08, #326c85 50px); */
    background: url("../images/index/starField6.gif");
}

pre { display: inline-block; text-align: left; }

/* fade */
@keyframes fadeIn {
    from { opacity: 0%; }
    to   { opacity: 100%; }
}

/* float */

@keyframes floatKeyframes {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(15px); }
    100% { transform: translateY(0px); }
}
.float {
    animation: floatKeyframes 3s ease-in-out infinite;
}

/* float and tilt */

@keyframes floatAndTiltKeyframes {
    0%   { transform: translateY(0px) rotate(-2deg); }
    50%  { transform: translateY(15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(-2deg); }
}
.floatAndTilt {
    animation: floatAndTiltKeyframes 3s ease-in-out infinite;
}
.floatAndTilt:nth-child(1) { animation-delay: 0s; }
.floatAndTilt:nth-child(2) { animation-delay: -1s; }
.floatAndTilt:nth-child(3) { animation-delay: -2s; }
.floatAndTilt:nth-child(4) { animation-delay: -3s; }
.floatAndTilt:nth-child(5) { animation-delay: -1s; }

/* carousel */

.carousel {
    padding-top: var(--spacer-4);
    overflow-x: hidden;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.slides {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

.slide {
    padding: 5px;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: left 1.8s;
    position: absolute;
    z-index: 1;
}

.carousel a { display: inline-block; width: 100%; }
.slide img { display: block; margin: auto; }

/* introduction */

#messageInABottle_left {
    position: absolute;
    top: 50%;
    left: calc(0% - ((1000px - 100%) / 4));
    transform: translate(-50%, -50%);
    filter: hue-rotate(-40deg) contrast(150%) brightness(50%);
}
#messageInABottle_right {
    position: absolute;
    top: 50%;
    left: calc(100% + ((1000px - 100%) / 4));
    transform: translate(-50%, -50%);
    filter: hue-rotate(-40deg) contrast(150%) brightness(50%);
}
@media (max-width: 1000px) {
    #messageInABottle_left { left: calc(0% - ((100vw - 100%) / 4)); }
    #messageInABottle_right { left: calc(100% + ((100vw - 100%) / 4)); }
}
@media (max-width: 900px) { #messageInABottle_left, #messageInABottle_right { display: none; } }

#introduction {
    margin: auto;
    position: relative;
    max-width: 500px;
    width: 100%;
    background-color: var(--colour-1);
    padding: var(--spacer-4);
    border: 1px solid var(--colour-5);
    border-radius: 5px;
}

@media (max-width: 500px) { #introduction h2 { font-size: 20px; } }

#introduction > p {
    background-color: var(--colour-0);
    border: 1px solid var(--colour-5);
    padding: var(--spacer-4);
    border-radius: 5px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    margin: auto;
}

/* about */

#about {
    display: block;
    margin: var(--spacer-4) auto;
    max-width: 1000px;
    width: 100%;
    background-color: var(--colour-1);
    padding: var(--spacer-4);
    border: 1px solid var(--colour-5);
    border-radius: 5px;
}

#about > div {
    background-color: var(--colour-0);
    border: 1px solid var(--colour-5);
    padding: var(--spacer-4);
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--spacer-4)
}

#about > div > h2 { width: 100%; margin: 0px; text-align: left; }
@media (max-width: 500px) { #about > div > h2 { font-size: 20px; } }

#about > div > p { margin: 0px 0px 5px 0px; padding: 0px; text-align: justify; flex: 1 1 50% } /* bottom margin offsets the top margin on the scrolling code image */
#about #scrollingCode { 
    background-image: url("../images/index/scrollingCode.gif");
    width: 223px;
    height: 127px;
    box-shadow: 0 0 10px 10px var(--colour-0) inset;
    filter: hue-rotate(20deg) brightness(55%);
    display: block;
    margin: -5px auto 0px auto; /* -5px makes the top of the image appear inline with the paragraph next to it */
}

/* gardenPath */

#gardenPath { }

#gardenPath > div {
    position: relative;
    display: block;
    margin: auto;

    max-width: 1000px;
    width: 100%;
}

@keyframes footStepsWindingPulseKeyframes {
    0%   { opacity: 15%; }
    50%  { opacity: 60%; }
    100% { opacity: 15%; }  
}

/* footpath-1 */

#gardenPath > div:nth-child(1) { height: 300px; }

#gardenPath > div:nth-child(1) > img:nth-child(1) {
    width: 340px;
    height: 182px;
    filter: blur(0px) brightness(0) invert(34%) sepia(25%) saturate(1022%) hue-rotate(66deg) brightness(118%) contrast(127%);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(75deg);

    animation: footStepsWindingPulseKeyframes 3.25s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* footpath-1 > lamp */

@keyframes lamp {
    0%   { transform: translate(-50%, -50%) scaleX(-1); }
    50%  { transform: translate(-50%, calc(-50% + 5px)) scaleX(-1); }
    100% { transform: translate(-50%, -50%) scaleX(-1); }  
}
#gardenPath > div:nth-child(1) > img:nth-child(2) {
    position: absolute;
    top: 37%;
    left: calc(50% + 93px);
    transform: translate(-50%, -50%);

    animation: lamp 3s ease-in-out infinite;
}

/* footpath-1 > journal */
@keyframes journal {
    0%   { transform: translateY(0px) rotate(-4deg); }
    50%  { transform: translateY(13px) rotate(4deg); }
    100% { transform: translateY(0px) rotate(-4deg); }
}
#gardenPath > div:nth-child(1) > img:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 73%;
    animation: journal 3s ease-in-out infinite;
    animation-delay: -1s;
}
@media (max-width: 800px) { #gardenPath > div:nth-child(1) > img:nth-child(3) { left: 7%; } }

/* footpath-2 */

#gardenPath > div:nth-child(2) { height: 570px; overflow: hidden; }

#gardenPath > div:nth-child(2) > img:nth-child(1) {
    width: 479px;
    height: 256px;
    filter: blur(0px) brightness(0) invert(34%) sepia(25%) saturate(1022%) hue-rotate(66deg) brightness(118%) contrast(127%);

    position: absolute;
    top: 50%;
    left: 63%;
    transform: translate(-50%, -50%) rotate(130deg);

    animation: footStepsWindingPulseKeyframes 3.25s ease-in-out infinite;
}
@media (max-width: 800px) { #gardenPath > div:nth-child(2) > img:nth-child(1) { left: 66%; } }
@media (max-width: 700px) { #gardenPath > div:nth-child(2) > img:nth-child(1) { left: 71%; } }
@media (max-width: 600px) { #gardenPath > div:nth-child(2) > img:nth-child(1) { left: 75%; } }

/* footpath-2 > lamps */
@keyframes lamp2Keyframes {
    0%   { transform: translate(-50%, -50%); }
    50%  { transform: translate(-50%, calc(-50% + 5px)); }
    100% { transform: translate(-50%, -50%); }  
}
#gardenPath > div:nth-child(2) > img:nth-child(2) {
    position: absolute;
    top: 43%;
    left: calc(63% - 54px);
    transform: translate(-50%, -50%);

    animation: lamp2Keyframes 3s ease-in-out infinite;
    animation-delay: 0.75s;
}
@media (max-width: 800px) { #gardenPath > div:nth-child(2) > img:nth-child(2) { left: calc(66% - 54px); } }
@media (max-width: 700px) { #gardenPath > div:nth-child(2) > img:nth-child(2) { left: calc(71% - 54px); } }
@media (max-width: 600px) { #gardenPath > div:nth-child(2) > img:nth-child(2) { left: calc(75% - 54px); } }

/* footpath-2 > camera */
@keyframes cameraKeyframes {
    0%   { transform: translateY(0px) rotate(-4deg); }
    50%  { transform: translateY(13px) rotate(4deg); }
    100% { transform: translateY(0px) rotate(-4deg); }
}
#gardenPath > div:nth-child(2) > img:nth-child(3) {
    position: absolute;
    top: 55%;
    left: 34%;
    animation: cameraKeyframes 3s ease-in-out infinite;
    animation-delay: 0s;
    animation-delay: -2s;
    width: 88px;
}
@media (max-width: 800px) { #gardenPath > div:nth-child(2) > img:nth-child(3) { left: 20%; } }

/* cybercastle */

#cyberCastle {
    display: block;
    margin: var(--spacer-6) auto 0px auto;
}

/* RESPONSIVE - TABLET */

@media only screen and (max-width: 0px) {
    
    #bodyContent {
        background: var(--colour-1);
    }

    h1 {
        display: unset;
    }
}