/* just setting margins and padding to 0 */
/* And stopping possible scroll */
body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;

}

/* The death scren, set to it's position of left: 200% */
/* So that it can be moved onscreen when the player dies */
#dead{
    background-color: black;
    position: absolute;
    align-items: center;
    justify-content: center;
    justify-items: center;
    left: 200%;
    display: grid;
    grid-template-rows: 80% 10%;
    height: 100vh;
    gap: 5%;
    width: 100vw;
    background-color: #000000;
        img{
            height: 80vh;
            grid-row: 1 / 2;
        }
        .border{
            display: flex;
            justify-content: center;
            align-items: center ;
            position: relative;
            grid-row: 2 /3;
            height: 10vh;
            width: 20vw;
            padding-left: 5%;
            padding-right: 5%;
            border-color: aliceblue;
            border-style: double;
            z-index: 2;
            p{
                color: azure;
            }
            ul{
                color: azure;
                padding-left: 10%;
                padding-right: 40%;
            }
            }
}

/* Just making sure items all fit and dont scroll */
.container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Aligning the background image and sizing it */
.background{
    display: flex;
    align-items: center;
    justify-content: center ;
    height: 100vh;
        img{
            width:100vw;
            height:100vh;
        }
}

/* The counter */
/* Set to display grid */
#counts{
    color: rgb(255, 255, 255);
    display: grid;
    /* These values are used to position the image within the bounds of counts properly */ 
    /* Those bounds being the top 10% of the screen */
    /* Along with the counter itself */
    grid-template-columns: 50% 30% 20%;
    /* Using 1fr to force all items to stay on the same row, and overlap */
    grid-template-rows: 1fr;
    align-items: end;
    justify-content: end;
    padding-right: 2.5%;
    height: 10vh;
    img{
        grid-column: 1 / 4;
        grid-row: 1 /2;
        height: 10vh;
        z-index: 2;
        width: 100vw;
    }
    /* This is just the border class within the counts div */
       .border{
        grid-column: 3/4;
        grid-row: 1 /2;
        padding-left: 5%;
        padding-right: 5%;
        border-color: aliceblue;
        border-style: double;
        z-index: 2;
        p{
            padding-left: 45%;
        }
        ul{
            padding-left: 50%;
        }
        }
     
}


        

/* Just setting the bounds of the game, and making their position relative */
#bounds{
    width: 100%;
    height: 100%;
    position: relative;
}
/* The plater character */
#vessel{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    /* Position absolute, as it is easier to modify velocity using absolute position */
    position:absolute;
      /* Set to z-index: 1 so the vessel is always visible in front of the platform divs  */
      /* Otherwise large platforms would obstruct visibility */
    z-index: 1;
       height: 10%;
       width:2%;
       /* background-colour was used to determine the size of the hitbox in coding*/
       /* background-color: red; */
  
       /* Scaling the image to fit the hitbox as close as possible */
        img{
            position: relative;
            object-fit: contain;
            scale: 70%;
            left: 15%;   
        }
}

/* Setting the initial ground to be along the bottom of the screen */
.ground{
    display: flex;
    background-color: rgb(0, 0, 0);
    height: 10%;
    width:100%;
    position:absolute;
    bottom:0px;
    left: 0px;

}

/* The same as the other platforming divs (platforming2, platforming 3, etc.) */
/* They are separate to allow individual modifications */
/* Such as in the javascript for the position array */
#platforming1{
    display:grid;
    justify-items: center;
    align-items: end;
    position:absolute;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap:5%;
    height:100%;
    width:100%;
    bottom: 20%;
    /* The platform class is similar in all divs */
    /* Except for the background colour used for debugging */
    /* And the initial width */
        .platform{
        /* background-color: green; */
        width:45%;
        height:3%;
        position: relative;
        
        }

}

#platforming2{
    display:grid;
    justify-items: center;
    align-items: end;
    position:absolute;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap:5%;
    height:100%;
    width:100%;
    bottom: 40%;
        .platform{
        /* background-color: rgb(0, 4, 255); */
        width:20%;
        height:3%;
        position: relative;
        }

}

#platforming3{
    display:grid;
    justify-items: center;
    align-items: end;
    position:absolute;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap:5%;
    height:100%;
    width:100%;
    bottom: 60%;
        .platform{
        /* background-color: rgb(255, 0, 191); */
        width:30%;
        height:3%;
        position: relative;
        }

}

#platforming4{
    display:grid;
    justify-items: center;
    align-items: end;
    position:absolute;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap:5%;
    height:100%;
    width:100%;
    bottom: 80%;
        .platform{
        /* background-color: rgb(255, 217, 0); */
        width:50%;
        height:3%;
        position: relative;
    }

}

#platforming5{
    display:grid;
    justify-items: center;
    align-items: end;
    position:absolute;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap:5%;
    height:100%;
    width:100%;
    bottom: 100%;
        .platform{
        /* background-color: rgb(0, 247, 255); */
        width:40%;
        height:3%;
        position: relative;
}
}

/* The parts of the platform class consistent in all divs */
.platform{
    display: grid;
    justify-content: center;
    /* Using CSS grid to align the plat image, and the spikes */
    grid-template-columns: 27% 27% 27%;
    gap: 9.5%;
        .spikes{
                    display: flex;
                    height: 125%;
                    width: 90%;
                    /* background-color: gray; */
                    position: relative;
                    /* Set to bottom: 100% so the spikes sit on top of the pltforms */
                    bottom:100%;
                    /* All spikes are initially invisible */
                    opacity: 0;
                    img{
                        /* Height is set to 200%, in order to keep spikes visible */
                        /* No matter where on the platform they are set to visible */
                        position: relative;
                        width: 100%;
                        height: 200%;
                        bottom: 100%;
                    }
                    }
                    /* The plat image is set to span all 3 grid columns */
                    /* The bottom value is set, so that the top of the plat image */
                    /* Intersects with the top of the hitbox */
        .plat{
            position: relative;
            grid-column: 1 / span 3;
            width: 100%;
            bottom: 47.5%;
            z-index: 0;
        }

    }

/* The shade */
.shade1{
    display: flex;
    align-items: center;
    /* was used in debugging for the hitbox */
    /* background-color: purple; */
    height: 10%;
    width:3%;
    position:absolute;
    /* The shade's initial position, just outside of the screen */
    /* Moves to the bottom when the javascript starts */
    bottom:20%;
    right: -5%;
    /* Also set so it is always visible when in the play area */
    z-index: 1;

            img{
            height: 50%;
            width:200%;
            scale: 400%;       
        }
}


/* Used for debugging */
/* .keylog {
    width: 30%;
    border-right: 1px solid #000000;
} */

/* Just making sure there isnt a list style */
ol, ul {
	list-style: none;
}