@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://www.colorzilla.com/gradient-editor/#fb83fa+0,e93cec+100;Pink+3D+2 */
background: #fb83fa; /* Old browsers */
background: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fb83fa 0%,#e93cec 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=0 ); /* IE6-9 */
}
body.ready-to-play {
/* Personalized Styles */
background: url('../img/broodMother-background.png') 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: 58px;
font-family: Copperplate,Copperplate Gothic Light,fantasy;
color: #00cc99;
}
/* Start: Personalized Styles */
p.start-button {
margin-top: 185px;
z-index: 1;
}
p.start-button a {
text-decoration: none;
border: 10px solid green;
background: blue;
color: lightblue;
}
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: blue;
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/luigi-mario.jpg') center no-repeat;
background-size: contain;
}
.projectile {
position: absolute;
width: 35px;
height: 35px;
/* Personalized Styles */
border: 1px solid cyan;
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/2.0 l.png') center no-repeat;
background-size: contain;
}
/* 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: 1px solid black;
border-radius: 50px;
}
div.health {
position: relative;
width: 100%;
height: 100%;
/* Personalized Styles */
/* Permalink - use to edit and share this gradient: https://www.colorzilla.com/gradient-editor/#d3615d+1,d3615d+21,b0b721+50,54a4ad+99,7dcfed+100;Custom+raimbow */
background: rgb(211,97,93); /* Old browsers */
background: -moz-linear-gradient(left, rgba(211,97,93,1) 1%, rgba(211,97,93,1) 21%, rgba(176,183,33,1) 50%, rgba(84,164,173,1) 99%, rgba(125,207,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(211,97,93,1) 1%,rgba(211,97,93,1) 21%,rgba(176,183,33,1) 50%,rgba(84,164,173,1) 99%,rgba(125,207,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(211,97,93,1) 1%,rgba(211,97,93,1) 21%,rgba(176,183,33,1) 50%,rgba(84,164,173,1) 99%,rgba(125,207,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3615d', endColorstr='#7dcfed',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: 1px solid black;
border-radius: 50px;
}
div.energy {
position: relative;
width: 100%;
height: 100%;
/* Personalized Styles */
/* Permalink - use to edit and share this gradient: https://www.colorzilla.com/gradient-editor/#357fe0+21,752201+46,752201+46,752201+46,752201+46,706a01+64,706a01+71,752201+77,752201+84,752201+84,8c3310+88,bf6e4e+100 */
background: rgb(53,127,224); /* Old browsers */
background: -moz-linear-gradient(top, rgba(53,127,224,1) 21%, rgba(117,34,1,1) 46%, rgba(117,34,1,1) 46%, rgba(117,34,1,1) 46%, rgba(117,34,1,1) 46%, rgba(112,106,1,1) 64%, rgba(112,106,1,1) 71%, rgba(117,34,1,1) 77%, rgba(117,34,1,1) 84%, rgba(117,34,1,1) 84%, rgba(140,51,16,1) 88%, rgba(191,110,78,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(53,127,224,1) 21%,rgba(117,34,1,1) 46%,rgba(117,34,1,1) 46%,rgba(117,34,1,1) 46%,rgba(117,34,1,1) 46%,rgba(112,106,1,1) 64%,rgba(112,106,1,1) 71%,rgba(117,34,1,1) 77%,rgba(117,34,1,1) 84%,rgba(117,34,1,1) 84%,rgba(140,51,16,1) 88%,rgba(191,110,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(53,127,224,1) 21%,rgba(117,34,1,1) 46%,rgba(117,34,1,1) 46%,rgba(117,34,1,1) 46%,rgba(117,34,1,1) 46%,rgba(112,106,1,1) 64%,rgba(112,106,1,1) 71%,rgba(117,34,1,1) 77%,rgba(117,34,1,1) 84%,rgba(117,34,1,1) 84%,rgba(140,51,16,1) 88%,rgba(191,110,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#357fe0', endColorstr='#bf6e4e',GradientType=0 ); /* 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: Copperplate,Copperplate Gothic Light,fantasy;
color: green;
font-weight: bold;
border-radius: 50px;
}
div.score {
position:relative;
width: 100%;
height: 100%;
}
.audio-button {
position: absolute;
top: 1em;
left: 1em;
}
