Scribd
Upload
13 views

Style Css

Uploaded by

asepggg00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Style Css

Uploaded by

asepggg00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

style.

css
body {
/* https://coolors.co/f06449-ede6e3-7d82b8-36382e-613f75 */
--background-color: #ede6e3;
--wall-color: #36382e;
--joystick-color: #210124;
--joystick-head-color: #f06449;
--ball-color: #f06449;
--end-color: #7d82b8;
--text-color: #210124;

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;


background-color: var(--background-color);
}

html,
body {
height: 100%;
margin: 0;
}

#center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

#game {
display: grid;
grid-template-columns: auto 150px;
grid-template-rows: 1fr auto 1fr;
gap: 30px;
perspective: 600px;
}

#maze {
position: relative;
grid-row: 1 / -1;
grid-column: 1;
width: 350px;
height: 315px;
display: flex;
justify-content: center;
align-items: center;
}

#end {
width: 65px;
height: 65px;
border: 5px dashed var(--end-color);
border-radius: 50%;
}

#joystick {
position: relative;
background-color: var(--joystick-color);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 50px;
grid-row: 2;
}

#joystick-head {
position: relative;
background-color: var(--joystick-head-color);
border-radius: 50%;
width: 20px;
height: 20px;
cursor: grab;

animation-name: glow;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-delay: 4s;
}

@keyframes glow {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}

.joystick-arrow:nth-of-type(1) {
position: absolute;
bottom: 55px;

width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

border-bottom: 10px solid var(--joystick-color);


}

.joystick-arrow:nth-of-type(2) {
position: absolute;
top: 55px;

width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--joystick-color);
}

.joystick-arrow:nth-of-type(3) {
position: absolute;
left: 55px;

width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

border-left: 10px solid var(--joystick-color);


}

.joystick-arrow:nth-of-type(4) {
position: absolute;
right: 55px;

width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

border-right: 10px solid var(--joystick-color);


}

#note {
grid-row: 3;
grid-column: 2;
text-align: center;
font-size: 0.8em;
color: var(--text-color);
transition: opacity 2s;
}

a:visited {
color: inherit;
}

.ball {
position: absolute;
margin-top: -5px;
margin-left: -5px;
border-radius: 50%;
background-color: var(--ball-color);
width: 10px;
height: 10px;
}

.wall {
position: absolute;
background-color: var(--wall-color);
transform-origin: top center;
margin-left: -5px;
}
.wall::before,
.wall::after {
display: block;
content: "";
width: 10px;
height: 10px;
background-color: inherit;
border-radius: 50%;
position: absolute;
}

.wall::before {
top: -5px;
}

.wall::after {
bottom: -5px;
}

.black-hole {
position: absolute;
margin-top: -9px;
margin-left: -9px;
border-radius: 50%;
background-color: black;
width: 18px;
height: 18px;
}

You might also like