You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

241 lines
3.7 KiB
CSS

4 years ago
*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 1s;
}
body { margin: 5em; background: black; font-family: Georgia; color: pink; overflow: scroll;
}
.new{}
@font-face {font-family: Anka;
src: url("fonts/AnkaCoder-b.ttf");}
.cover {
width: 100%;
max-width: 100%;
height:100%;
background-color:#000000;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
z-index: 10;
color: black;
position: fixed;
top: 50%;
left: 50%;
z-index:9;
transform: translate(-50%, -50%);
opacity: 1;
}
#game-text{
position: sticky;
margin-top: 20px;
z-index: 10;
max-width: 30%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
/*button {
width: 1%;
height: 30px;
text-align:left;
font-size: 1em;
margin-top:15px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: red;
font-family: Anka;
color: yellowgreen;
background-color:rgba(255, 0, 0, 0);;
position: fixed;
text-decoration: none;
z-index: 10;
top: 50%;
border-radius: 20px;
}
button:hover {
width: 1%;
height: 30px;
text-align:left;
font-size: 1em;
margin-top:15px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: red;
font-family: Anka;
color: yellowgreen;
background-color:rgba(255, 0, 0, 0);
position: fixed;
text-decoration: none;
z-index: 10;
top: 50%;
scale: 160%;
}*/
#yes{
left: 35%;
}
#no{
right:35%;
}
#forward{
top:35%;
left: 50%;
transform: translate(-50%, -50%);
}
#back{
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
width: 60%;
max-width: 70%;
height: 80%;
background-color: #b0abb4de;
padding: 10px;
border-radius: 5px;
z-index: 10;
color: #e30534;
position:fixed;
top: 20em;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
padding: 1em;
box-shadow: 0 0 40px #214c12;
overflow: scroll;
overflow-x: hidden;
}
.container:hover{box-shadow: 0 0 60px #FF2200;}
/*.container:hover{box-shadow: 0 0 10px black, 0 0 20px black, 0 0 30px yellowgreen;}*/
.container2 {
width: 50%;
max-width: 80%;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
z-index: 10;
color: #214c12;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
}
.btn {
background-color: #bfeaea;
border: rgba(255, 0, 0, 0);
border-radius: 5px;
color:#214c12;
outline: none;
z-index: 11;
font-family: Anka;
position: fixed;
top: 10px;
left: 10px;
max-width: 50%;
text-decoration: none;
box-shadow: 0 0 10px #214c12;
padding: 2px;
}
.btn2 {
background-color: #bfeaea;
border: rgba(255, 0, 0, 0);
border-radius: 5px;
color:#214c12;
outline: none;
z-index: 11;
font-family: Anka;
position: fixed;
top: 10px;
right: 10px;
max-width: 50%;
text-decoration: none;
box-shadow: 0 0 10px #214c12;
padding: 2px;
}
.btn3 {
background-color: #bfeaea;
border: rgba(255, 0, 0, 0);
border-radius: 5px;
color:#214c12;
outline: none;
z-index: 11;
font-family: Anka;
position: fixed;
top: 3em;
left: 10px;
max-width: 50%;
text-decoration: none;
box-shadow: 0 0 10px #214c12;
padding: 2px;
}
#text{z-index: 10;
color: #7f00ff}
p{z-index: 10;
color:#7f00ff;
}
a{ text-decoration: none;
color: red;
}
a:hover{ text-decoration: none;
color: red;
size: 4em;}
button:hover {
border-color: black;
background-color: darkgray;
z-index: 10;
box-shadow: 0 0 10px #214c12;
}
button {background-color:yellow;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="container"] {
width: 100%;
}
}
#anchor{font-size: 3em;}