@charset "utf-8";
/* CSS Document */
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease;
opacity: var(--before-opacity, 1);
/* Personalized Styles */
/* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#131613+0,ff3538+24,45c429+51,ff35bf+81,131613+100,f18e99+100 */
background: rgb(19,22,19); /* Old browsers */
background: -moz-linear-gradient(top, rgba(19,22,19,1) 0%, rgba(255,53,56,1) 24%, rgba(69,196,41,1) 51%, rgba(255,53,191,1) 81%, rgba(19,22,19,1) 100%, rgba(241,142,153,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(19,22,19,1) 0%,rgba(255,53,56,1) 24%,rgba(69,196,41,1) 51%,rgba(255,53,191,1) 81%,rgba(19,22,19,1) 100%,rgba(241,142,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(19,22,19,1) 0%,rgba(255,53,56,1) 24%,rgba(69,196,41,1) 51%,rgba(255,53,191,1) 81%,rgba(19,22,19,1) 100%,rgba(241,142,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#131613′, endColorstr=’#f18e99′,GradientType=0 ); /* IE6-9 */
}
body.ready-to-play {
/* Personalized Styles */
background: url('../img/forest-bg-1.jpg') center repeat-x;
background-size: cover;
}
div.game-logo {
transition: all 0.5s ease;
}
p {
display: inline-block;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin: 0;
/* Personalized Styles */
font-size:50px;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
/* Start: Personalized Styles */
p.start-button {
margin-top: 165px;
z-index: 1;
}
p.start-button a {
text-decoration: none;
border: 1px solid black;
background: green;
color: black;
}
p.start-button a:hover {
background: red;
}
/* End: Personalized Styles */
body div.game-body {
opacity: 0;
width: 100%;
height: 100%;
transition: all 1s ease;
}
body.ready-to-play div.game-body{
opacity: 1;
}
#platform-container {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
overflow: visible;
}
.platform {
width: 100%; /* Adjust the width of the platforms as needed */
height: 20px; /* Adjust the height of the platforms as needed */
background: transparent;
position: absolute;
bottom: 0;
}
#player {
position: absolute;
bottom: 20px; /* Adjust the bottom position to match the platform height */
left: 0;
/* Personalized Styles */
width: 100px;
height: 144px;
background: url('../img/my-project-1.png') center no-repeat;
background-size: contain;
border: 1px solid black;
}
.projectile {
position: absolute;
width: 35px;
height: 5px;
/* Personalized Styles */
border: 1px solid teal;
border-radius: 10px;
}
div.enemy {
position: absolute;
bottom: 20px; /* Adjust the bottom position to match the platform height */
right: 0;
/* Personalized Styles */
width: 50px;
height: 50px;
background: url('../img/my-project-2.png') center no-repeat;
background-size: contain;
border: 1px solid black;
}
/* Health Bar Styles */
div.health-bar {
position: relative;
margin: .5em .5em auto auto;
overflow: hidden;
transition: all 1s ease;
/* Personalized Styles */
width: 500px;
height: 40px;
border: 2px solid black;
border-radius: 50px;
}
div.health {
position: relative;
width: 100%;
height: 100%;
/* Personalized Styles */
/* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff0004+0,ff0004+33,f2ff00+33,f2ff00+68,3fff00+68,3fff00+100 */
background: rgb(255,0,4); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,0,4,1) 0%, rgba(255,0,4,1) 33%, rgba(242,255,0,1) 33%, rgba(242,255,0,1) 68%, rgba(63,255,0,1) 68%, rgba(63,255,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,0,4,1) 0%,rgba(255,0,4,1) 33%,rgba(242,255,0,1) 33%,rgba(242,255,0,1) 68%,rgba(63,255,0,1) 68%,rgba(63,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,0,4,1) 0%,rgba(255,0,4,1) 33%,rgba(242,255,0,1) 33%,rgba(242,255,0,1) 68%,rgba(63,255,0,1) 68%,rgba(63,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff0004′, endColorstr=’#3fff00′,GradientType=1 ); /* IE6-9 */
}
div.energy-bar {
position: relative;
margin: .5em .5em auto auto;
overflow: hidden;
transition: all 1s ease;
/* Personalized Styles */
width: 500px;
height: 40px;
border: 2px solid black;
border-radius: 50px;
}
div.energy {
position: relative;
width: 100%;
height: 100%;
/* Personalized Styles */
/* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=1 ); /* IE6-9 */
}
div.score-bar {
position: relative;
margin: .5em .5em auto auto;
text-align: left;
overflow: hidden;
transition: all 1s ease;
/* Personalized Styles */
width: 500px;
height: 40px;
line-height: 40px;
font-size: 20px;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: white;
font-weight: bold;
border: 2px solid black;
border-radius: 50px;
/* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
background: rgb(255,214,94); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffd65e’, endColorstr=’#febf04′,GradientType=1 ); /* IE6-9 */
}
.audio-button {
position: absolute;
top: 1em;
left: 1em;
}
