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.

229 lines
4.2 KiB
CSS

@font-face {
font-family: sinistre;
src: url(fonts/Sinistre-StCaroline.woff),
url(fonts/Sinistre-StCaroline.otf);
}
@font-face {
font-family: jolybolditalic;
src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
url(fonts/JolyDisplay-BoldDisplayItalic.otf);
}
@font-face {
font-family: jolyregularitalic;
src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
url(fonts/JolyDisplay-RegularDisplayItalic.otf);
}
@font-face {
font-family: jolyregular;
src: url(fonts/JolyDisplay-RegularDisplay.woff),
url(fonts/JolyDisplay-RegularDisplay.otf);
}
@font-face {
font-family: jolyheavyitalic;
src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
}
body{
font-size: 4vw;
padding-left:4%;
padding-top:2.5%;
padding-right:2.5%;
padding-bottom: 2.5%;
font-family: sinistre;
line-height: 5.3vw;
max-width: 100%;
max-height: 100%;
}
::-moz-selection { /* Code for Firefox */
background-color: white;
}
::selection {
background-color: white;
}
.blur_background {
filter: blur(2px);
}
.title{
font-family: jolybolditalic;
}
span.special1{
font-family: jolybolditalic;
}
span.special2{
font-family: jolyregularitalic;
}
form {
display: inline;
}
label {
display: inline;
}
input#player_name {
-webkit-appearance: none;
border: 0px transparent solid;
border-radius: 25vw;
font-size: 3.5vw;
color: black;
font-family: jolybolditalic;
text-align: center;
background-color: #d166ff;
-webkit-box-shadow: 0px 0px 8px 8px #d166ff;
-moz-box-shadow: 0px 0px 8px 8px #d166ff;
box-shadow: 0px 0px 8px 8px #d166ff;
}
button {
-webkit-appearance: none;
background-color: white;
border: 0.2vw black solid;
border-radius: 20vw;
font-family: jolybolditalic;
color:black;
cursor:pointer;
font-size: 4vw;
padding-bottom:0.7vw;
}
button:hover {
border: 0.2vw transparent solid;
color: #d166ff;
-webkit-box-shadow: 0px 0px 8px 5px #c94dff;
-moz-box-shadow: 0px 0px 8px 5px #c94dff;
box-shadow: 0px 0px 8px 5px #c94dff;
}
.special_button{
color: #c94dff;
cursor: pointer;
}
.special_button:hover{
color: #c94dff;
cursor: pointer;
filter: blur(2px);
}
span.button_text{
padding:1vw;
}
#info_box {
position: absolute;
bottom:7%;
right:4%;
font-size: 22px;
line-height: 25px;
color: #c94dff;
background: #ffffff;
font-family: jolyregular;
text-align: center;
width: 550px;
height: 115px;
border-radius: 10px;
padding: 15px;
border: #c94dff solid 1px;
}
#info_box:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: #ffffff transparent;
border-width: 20px 15px 0;
bottom: -20px;
left: 77%;
margin-left: -15px;
}
#info_box:before {
content: '';
position: absolute;
width: 0;
z-index: 0;
border-style: solid;
border-color: #c94dff transparent;
border-width: 21px 16px 0;
bottom: -21.5px;
left: 77%;
margin-left: -16px;
display: block;
}
a {
color: #c94dff;
}
div.line {
display: inline-block;
border-top: 0.3vw solid black;
padding-bottom: 20px;
width: 14vw;
transform: rotate(-4deg);
}
div.line3 {
display: inline-block;
border-top: 0.3vw solid black;
padding-bottom: 20px;
width: 40vw;
transform: rotate(-4deg);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.radio {
font-size: 2.25rem;
color: black;
display: inline;
grid-template-columns: min-content auto;
grid-gap: 0.5em;
}
/*#ccb3ff*/
input.avatar {
opacity: 0;
width: 0;
height: 0;
}
input:checked + .radio__control {
background-color: #d166ff;
border: #d166ff;
-webkit-box-shadow: 0px 0px 8px 8px #d166ff;
-moz-box-shadow: 0px 0px 8px 8px #d166ff;
box-shadow: 0px 0px 8px 8px #d166ff;
}
.radio__control {
display: inline-block;
width: 1.5vw;
height: 1.5vw;
border-radius: 50%;
border: 0.2vw solid currentColor;
margin-right: 2vw;
}