* {
    z-index: 1;
}

body {
    background-color: #e1fffe;
    margin:0vw;
}

#foot {
    font-size: 0.7vw;
    margin:0vw;
    z-index:900;
    position:absolute;
    left: .3vw;
    top:0.3vw;
    color: rgb(219, 253, 255)
}

@keyframes bob {
    0% {
        top:-0.3vw;
    }

    50% {
        top:0vw;
    }


    100% {
        top:-0.3vw;
    }
}

#dinosaur {
    position: fixed;
    left: 4vw;
    margin:0vx;
    padding:0vw;
    z-index: 100;

    width:15vw;
    height:8vw;
    animation: bob 3s ease-in-out alternate infinite;
}


#rollercoaster {
    position: absolute;
    height:133vw;
    height:70vw;
    width:100vw;
    object-fit:cover;
}

.section_1 {
    padding-bottom:36.5vw;
    width:100%;
    display:flex;
}

.blueprint_intro_container {
    position: absolute;
    width:auto;
    height: 40vw;
    top:2.8vw;
    left:17.5vw;
    animation: shake 2s alternate infinite;
    animation: 3s ease-in-out alternate 0s normal none infinite shake;
}

#blueprint_hammer {
    position: relative;
    top:-2vw;
    width:22vw;
    height:auto;
    left:20vw;
    transform: rotate(10deg);
}

#blueprint_hat {
    top:-2vw;
    right:0.2vw;
    width:15.5vw;
    height:10vw;
    position: absolute;
    z-index:3;
    overflow:hidden;
}

#blueprint_intro {
    position: absolute;
    width:auto;
    left:-17.5vw;
    height: 40vw;
    top:2.8vw;
}

@keyframes shake {
    0% {
        transform:rotate(-2deg);
    }

    100% {
        transform:rotate(2deg);
    }
}

@keyframes open {
    0% {
        border-width: 0.4vw;
    }

    100% {
        border-width: 0.55vw;
        border-color: #ff7d41;
    }
}

@keyframes open2 {
    0% {
        border-width: 0.5vw;
    }

    100% {
        border-width: 0.6vw;
        border-color: #a8e99f;
    }
}
.borderpulse:hover {
    animation: open 0.6s ease-in-out alternate infinite; 
}


#title_img {
    width: 40vw;
    height: 12.5vw;
    position: relative;
    left:55%;
    padding-top:0vw;
    z-index: 2;
    overflow:hidden;
}

#img_desc h1 {
    position:relative;
    text-shadow: 0 0.1em 0.1em #f19b95;
    margin-top:-1.5vw;
    margin-left:0.1vw;
    padding: 0.5vw;
    background-clip:padding-box;
    height:2vh;
    color:rgb(163, 11, 11);
    font-size: 2vw;
}

#img_desc h2 {
    position: relative;
    margin-top:-0.2vw;
    margin-left:0.2vw;
    text-shadow: 0 0.1em 0.1em #f19b95;
    border-radius: 1em;;
    padding: 1.1vh;
    background-clip:padding-box;
    height:0vh;
    color:rgb(163, 11, 11);
    font-size: 1.25vw;
}

#img_desc:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 0.3em 0.4em 0.5em;
    border-width: 0.5em;
}

#img_desc {
    width:40vw;
    height:25vw;
    position:relative;
    background-color: #ffffff;
    border-width: 0.4em;
    border-style: solid;
    border-color: #5d5e5a;
    top:15vw;
    right:-15vw;
    box-shadow: rgba(0, 0, 0, 0.15) 0.25em 0.25em 0.175em;
}

#btn_img {
    width:1.5vw;
    height:1.5vw;
    right:-37.9vw;
    z-index:10;
    top: 0.2vw;
    position:relative;
    background-color: #ff3535;
    
    border-style: solid;
    border-color: #9e340a;
    font-size: 1.9vw;

    box-shadow: rgba(0, 0, 0, 0.15) 0.05vw 0.1vw 0.08vw;
    text-align: left;
}

#btn_img:hover {
    opacity: 0.9;
}

#img_desc span:hover {
    
    color:#575757;
    width:5.5%;
    height:11.5%;
    position:absolute;
    background-color: #aa3030;
    padding-right: 0.05em;
    border-width: 0.09em;
    padding-top: 0.05em;
    
    border-style: solid;
    border-color: #b83a14;
    font-size: 2vw;
    top:0.3vw;
    right:0.3vw;
    box-shadow: rgba(0, 0, 0, 0.15) 0.05em 0.1em 0.08em;
    text-align: left;
}


.section_2 {
    padding-top:15vw;
    padding-bottom: 26vw;
    display:flex;
}

.blueprint_info{
    display:block;
    position:relative;
    width: 15vw;
    top:16.5vw;
    right:-41vw;
    height:27.5vw;
    width:27.5vw;
    border-color:rgb(97, 78, 43);
    box-shadow: rgba(201, 91, 40, 0.192) 0vw 0vw 0.4em 0.2em;
    border-style: solid;
    border-width: 0.1em;
    border-color: #bfddd4;
    text-shadow: 0 0 0.08em #ce6629;
    padding:1vw;
    margin-top: -8vw;

    font-size:2vw;
    color:rgb(0, 0, 0);

    background-image: url("imgs/paper_background.jpg");
    background-size: 100% 100%;
    background-clip: padding-box;
}

.black_border {
    border-color: rgb(218, 128, 27);
}
#section_1_blueprint {
    width:65vw;
    position:absolute;
    left:2vw;
    height:auto;
    box-shadow: rgba(40, 154, 199, 0.877) 0vw 0vw 1em 0.4em; 
}

#robux {
    color:rgb(117, 185, 117)
}

.blueprint_title {
                font-size: 3.5vw;
                padding:0.5vw;
                position:relative;

                right:-68vw;                
                top:1.75vw;
                z-index:20;
                padding-top:1.vw;
                padding-left:1.5vw;
                width:25vw;
                height:4vw;
                           border-color: rgba(191, 243, 243, 0.644);
                           border-width:0.05vh;
                           border-style: solid;
                           text-shadow: 0.03vw 0.01vw 0.05vw #7e9b67;
                           box-shadow: rgba(15, 90, 65, 0.877) 0.02vw 0.02vw 0.05vw 0.02vw; 
                           background-color: rgb(252, 197, 126);
                           background-clip:border-box;
                           background-image: url(imgs/paper_background.jpg);
                           background-repeat: repeat;
                
}

.outline {
    position:relative;
    background-color: #e08720;
    width:70vw;
    height:109.6vw;
    left:14.2vw;
    top:8vw;
    border-radius: 1vw;
    background-image: url("imgs/pattern_1.jpg");
    background-size: cover;
    background-clip: content-box;
    background-blend-mode: lighten;
}


.section_3 {
    position:relative;
    top:-110.5vw;
    display:flex;
    flex-wrap: nowrap;
    margin-bottom: -5vw;
    padding-top: 10vw;
    width:75vw;
    height:22vw;
    flex-direction: column;
    align-content:stretch;
    align-items:stretch;
    padding-left: 1vw;
    gap:17vw 1vw;
}

#section_3_title:hover {
    animation: open 0.4s alternate infinite;
}

#section_3_title {
    position:absolute;
    padding-top: 0.5vw;
    font-size: 4vw;

    margin-bottom: -8vw;
    color:#683104;
    width:21vw;
    margin-top:0vw;
    margin-left:37.5vw;
    padding-left: 0.7vw;
    height:5.25vw;
    border-radius:0.1em;
    border-width:0.1em;
    border-color:rgb(223, 111, 59);
    background-color: #f3bd6b;
    border-style:solid;
    text-shadow: 0.01em .01em .05em #ad5c26;
    box-shadow: rgba(243, 154, 70, 0.877) 0.03em .03em .04em .01em; 
    background-image: url(imgs/paper_background.jpg);
    background-size: 100% 100%;
}

/* .class > div:nth-child(-n + 3 of .affected_class)
   .class > div.affected_class:nth-child(-n + 3)
   
   
   The first one applies to the first three .affected_class elements regardless of if their position is < 3
   The second one applies to the first three div elements, and to the possible .affected_class elements there 
*/

/*
static - This is default. Element is positioned according to the normal document flow
relative - Element is positioned relative to its normal position in the document flow
fixed - Element is positioned relative to the viewport
absolute - Element is positioned relative to the nearest positioned ancestor (i.e. parent has pos other than static)
sticky - Element toggles between a relative and fixed position, depending on the scroll position
*/

.step_1, .step_2, .step_3, .step_4 {
    display:flex;
    flex-direction: column;
    align-items:start;
    padding-top:1vw;
    margin-right:2vw;
    padding-left:15vw;

    height:25vw;
    border-width:0.1em;
}


.step_1_h2 {
    transform:rotate(3deg);
}

.step_2_h2 {
    transform:rotate(-3deg);
}

.step_3_h2 {
    transform:rotate(2deg);
}

.step_4_h2 {
    transform:rotate(-1deg);
}

.step_1_h1, .step_2_h1, .step_3_h1, .step_4_h1 {
    font-size:1.75vw;
                       margin-top:0.5vw;
                       margin-left:1vw;
                       padding-right:0.2vw;
                       padding-left:0.2vw;
                       border-color: rgb(231, 147, 79);
                       border-radius: 0.2vw;
                       border-width:0.2vw;
                       border-style: solid;
                       text-shadow: 0.05vw 0.05vw 0.1vw #7e9b67;
                    box-shadow: rgba(175, 89, 8, 0.877) 0.08vw 0.08vw 0.2vw 0.01vw; 
                       background-color: rgb(252, 197, 126);
                       background-clip:padding-box;
}

.step_1_h2, .step_2_h2, .step_3_h2, .step_4_h2 {
    font-size:1vw;
                       margin-top:2.1vw;
                       margin-left:1.5vw;

                       padding-right:0.2vw;
                       padding-left:0.2vw;
                       padding : 0.15vw;
                       border-color: rgb(231, 147, 79);
                       border-radius: 0.2vw;
                       box-shadow: rgba(241, 234, 166, 0.877) 0.02vw 0.04vw 0.05vw 0.1vw; 
                       border-style: solid;
                       background-color: rgb(255, 211, 153);
                       background-clip:padding-box;
}

.step_1 div:nth-child(2) {
    position:absolute;
    height: 27.5vw;
    z-index:0;
}

.step_1_h2 {
    width: 22vw;
}

.step_1 div:nth-child(2) img { /* This 2nd div child always contains the image. 1st div child is always text, accordingly. */
    border-radius:0.2em;
    width:auto;
    height:90%;
    overflow:hidden;
    box-shadow: rgba(181, 201, 170, 0.877) 0em -0.1em 0.8em 0.5em; 
}

#step_1_idea {
    color: green;
    font-size: 2vw;
}

.step_2 div:nth-child(2) {
    position:absolute;
    height: 27.5vw;
    z-index:0;
}

.step_2 div:nth-child(2) img { /* This 2nd div child always contains the image. 1st div child is always text, accordingly. */
    border-radius:0.2em;
    width:auto;
    height:90%;
    overflow:hidden;
    box-shadow: rgba(211, 216, 143, 0.877) 0em -0.1em 0.4em 0.2em; 
 
}

#step_2_idea {
    color: rgb(60, 88, 214);
    font-size: 2vw;
}

.step_3 div:nth-child(2) {
    position:absolute;
    height: 27.5vw;
    z-index:0;
}

.step_3 div:nth-child(2) img { /* This 2nd div child always contains the image. 1st div child is always text, accordingly. */
    border-radius:0.2em;
    width:auto;
    height:90%;
    overflow:hidden;
    box-shadow: rgba(204, 126, 53, 0.87)  0em -0.1em 0.4em 0.2em; 
}

#step_3_idea {
    color: rgb(255, 109, 41);
    font-size: 2vw;
}

.step_4 div:nth-child(2) {
    position:absolute;
    height: 27.5vw;
    z-index:0;
}

.step_4 div:nth-child(2) img { /* This 2nd div child always contains the image. 1st div child is always text, accordingly. */
    border-radius:0.2em;
    width:auto;
    height:90%;
    overflow:hidden;
    box-shadow: rgba(126, 187, 107, 0.87) 0em -0.1em 0.4em 0.2em; }

#step_4_idea {
    color: rgb(68, 134, 24);
    font-size: 2vw;
}

/*                                                              */
/*                                                              */
/*                         SECTION 4 */

.section_4 {
    display:flex;
    flex-wrap: nowrap;
    padding-bottom: -5vw;
    padding-top: 10vw;
    width:auto;
    height: 42vw;
    flex-direction: column;
    align-content:center;
    align-items:center;
    gap:1vw;
    position:relative;

}


#what_counts {
    position:absolute;
    background-position-x:center;
    width:100vw;
    height:42.5vw;
    margin:5vw;
    margin:5vw;
    margin-top:-8vw;
    margin-left:2.5vw;
    border-radius: 0.1em;
}

.section_4 > div * {
    top:25vw;
    left:15vw;
    width:12.5vw;
    height:15vw;
    border-radius: 0.1em;
    border-color: rgb(64, 160, 60);
}

#counts_1 {
    position:absolute;
    top:25.5vw;
    left:17vw;
    width:26vw;
    height:3vw;
    border-width: .3em;
    border-style:dashed;
    border-radius: 0.2em;    
    border-color: rgb(143, 212, 140);
    padding:0.7vw;
    font-size:1.25vw;
    color:rgb(46, 71, 50);
    box-shadow: rgba(90, 134, 81, 0.555) .27em .25em .1em;
}

#counts_2 {
    position:absolute;
    top:31.5vw;
    left:17vw;
    width:26vw;
    height:2.5vw;
    border-width: .3em;
    border-style:dashed;
    border-radius: 0.2em;    
    border-color: rgb(143, 212, 140);
    padding:0.7vw;
    font-size:1.5vw;
    color:rgb(46, 71, 50);
    box-shadow: rgba(90, 134, 81, 0.555) .27em .25em .1em;
}

#counts_3 {
    position:absolute;
    top:37vw;
    left:17vw;
    width:26vw;
    height:3vw;
    border-width: .3em;
    border-style:dashed;
    border-radius: 0.2em;    
    border-color: rgb(143, 212, 140);
    padding:0.9vw;
    font-size:1vw;
    color:rgb(46, 71, 50);
    box-shadow: rgba(90, 134, 81, 0.555) .27em .25em .1em;
}


.section_5 {
    display:flex;
    position:relative;
    overflow:hidden;
}

#ending {
    width: 100vw;
    overflow:hidden;
    bottom:0vw;
    height: auto;
}


#signupbutton {
    position:absolute;
    width:30.75vw;
    height:2.6vw;
    right:4.175vw;
    bottom: 20.3vw; 
    z-index:11;
}


footer > div {
    font-size:1vw;
    padding:.5em;
    color: rgb(197, 96, 13);
    background-color: rgb(88, 40, 0);
}




.bar_1 {
    width:100vw;
    height: 12vw;
    z-index:100;
   
    margin-top:0vw;
    margin-bottom: 5vw;
    background-image: url("imgs/coaster_1.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.bar_2 {
    width:100vw;
    height: 13vw;
   
    margin-top:-3vw;
    margin-bottom: 3vw;
    background-image: url("imgs/coaster_2.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}


#gold_1 {
    position:relative;
    top:-24.5vw;
    width:99vw;
    margin-top: -5vw;
}

@keyframes rotation_1 {
    0% {
        transform:rotate(0deg);
        color:#683104;
    }

    25% {
        transform:rotate(-5deg);
        color:#7a5320
    }
    75% {
        transform:rotate(5deg);
        color:#557226
    }
    100% {
        transform:rotate(0deg);
        color:#5a7233
    }
}


#gold_info:hover {
animation: open2 1s alternate ease-in-out infinite;
}

#gold_info_2:hover {
animation: open2 1s alternate ease-in-out infinite;
}

#gold_info {
    padding-top: 0.4vw;
    padding-left:1vw;
    margin-left:-5vw;
    font-size: 4.2vw;
    position:absolute;
    top:-6vw;
    background-image: url(imgs/paper_background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    color:#683104;
    width:50vw;
    
    height:5.5vw;
    border-radius:0.1em;
    border-width:0.05em;
    border-color:rgb(174, 219, 132);
    background-color: #f3bd6b;
    border-style:solid;
    text-shadow: 0.01em .01em .05em #ad5c26;
    box-shadow: rgba(135, 196, 123, 0.877) .03em .03em .08em .04em; 
}
#gold_info_2 {
    padding-left: 0.5vw;
    margin-left:57vw;
    font-size: 1.25vw;
    position:absolute;
    padding-top:0.1vw;
    top:-1.8vw;
    background-image: url(imgs/paper_background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 10vw;

    color:#683104;
    width:7.6vw;
    
    height:1.75vw;
    border-radius:0.4em;
    border-width:0.2em;
    border-color:rgb(174, 219, 132);
    border-style:solid;
    box-shadow: rgba(135, 196, 123, 0.877) .03em .03em .2em .08em; 
}

#text_1 {
    position:absolute;
    z-index:101;
    top:12.4vw;
    right:4.1vw;
    width:30.9vw;
    height:3.4vw;
}
#text_2 {
    position:absolute;
    z-index:101;
    top:17.6vw;
    right:4.1vw;
    width:30.9vw;
    height:3.4vw;
}
#text_3 {
    position:absolute;
    z-index:101;
    top:22.8vw;
    right:4.1vw;
    width:30.9vw;
    height:3.4vw;
}
#text_4 {
    position:absolute;
    z-index:101;
    top:33.2vw;
    right:32.46vw;
    width:5em;
    height:1.7em;
}


#signup {
    position:absolute;
    height:35vw;
    width: 30vw;
    z-index:10;
}

#signup_div {
    position: relative;
    width:30vw;
    height:0vw;
    right:-65.38vw;
    bottom:58.5vw;
}

#section_2_bg {
    position: absolute;
    height:133vw;
    height:100vw;
    width:100vw;
    top:25vw;
    object-fit:cover;
    z-index:-1;
}

#section_3_bg {
    z-index:-1;
    position: relative;
    top:225vw;
    width:140vw;
    height:130vw;
    object-fit:contain;
}

#img_2 {
    position: relative;
    height: 0vw;
    right:20vw;
    z-index: -1;
    top:-100vw;
}

#enter_button {
    height: 10.2vw;
}

#join_now {

    position: relative;
    left:5.5vw;
    top: 10vw;
    width: 38.5vw;
    height:7.5vw;
    border-style: solid;
    border-radius: 0.1vw;
    border-color: rgb(89, 187, 85);
    background-color:rgb(126, 255, 87);
    border-radius: 0.2vw;
    font-size:6.5vw;
    color: rgb(75, 111, 63);
    text-align: center;
    text-shadow: 0.2vw 0.1vw 0.2vw #2e7a2b;
    box-shadow: rgba(90, 134, 81, 0.555) .04em .05em 0.03em;
    text-decoration:none;
}


#join_now:hover {
     width: 38.7vw;
    height:7.57vw;
    left:5.5vw;
    top:10.2vw;
}