164 lines
2.5 KiB
CSS
164 lines
2.5 KiB
CSS
@import url("../../../lib/fonts/notcouriersans/regular/style.css");
|
|
@import url("../../../lib/fonts/notcouriersans/bold/style.css");
|
|
@import url("../../../lib/fonts/cantarell/bold/style.css");
|
|
|
|
body
|
|
{
|
|
/* background: url("../resource/Ink.png"); */
|
|
background-size: 100% auto;
|
|
margin: 15px;
|
|
}
|
|
|
|
div#title
|
|
{
|
|
text-align: center;
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div#title img#plank
|
|
{
|
|
border-top: 13px dotted lime;
|
|
border-radius: 100px;
|
|
border-bottom: 18px dashed lime;
|
|
z-index: 0;
|
|
}
|
|
|
|
div#title img#board
|
|
{
|
|
width: 100px;
|
|
transform: rotate(70deg);
|
|
background-color: yellow;
|
|
border: 3px groove pink;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50px;
|
|
left: 52%;
|
|
border-radius: 40px;
|
|
}
|
|
|
|
div#title img#lizard
|
|
{
|
|
width: 1000px;
|
|
background-color: rgba(255, 100, 100, .2);
|
|
opacity: .9;
|
|
position: absolute;
|
|
top: 0px;
|
|
z-index: 2;
|
|
left: 40%;
|
|
border-radius: 40px;
|
|
}
|
|
|
|
div#question
|
|
{
|
|
width: 65%;
|
|
margin: auto;
|
|
border: 5px double cyan;
|
|
background: #B0D0D0E0;
|
|
line-height: 28px;
|
|
color: #282828;
|
|
padding: 50px;
|
|
border-radius: 18px;
|
|
font-family: NotCourierSansBold;
|
|
font-size: 34px;
|
|
margin-bottom: 18px;
|
|
position: absolute;
|
|
top: -10px;
|
|
z-index: 0;
|
|
}
|
|
|
|
div#blob
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
div#detail
|
|
{
|
|
font-family: NotCourierSans;
|
|
font-size: 80px;
|
|
text-align: justify;
|
|
}
|
|
|
|
div#detail a
|
|
{
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 30px;
|
|
font-size: 12px;
|
|
z-index: 3;
|
|
}
|
|
|
|
div#detail a#blake
|
|
{
|
|
top: 95px;
|
|
}
|
|
|
|
div#detail2
|
|
{
|
|
font-family: NotCourierSans;
|
|
font-size: 80px;
|
|
text-align: justify;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
}
|
|
|
|
div#detail3
|
|
{
|
|
font-family: NotCourierSans;
|
|
font-size: 80px;
|
|
text-align: justify;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
}
|
|
|
|
div#detail4
|
|
{
|
|
font-family: NotCourierSans;
|
|
font-size: 80px;
|
|
text-align: justify;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
/* color: gray; */
|
|
/* opacity: .5; */
|
|
}
|
|
|
|
div#detail5
|
|
{
|
|
font-family: NotCourierSans;
|
|
font-size: 80px;
|
|
text-align: justify;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
/* opacity: .3; */
|
|
}
|
|
|
|
div#photo
|
|
{
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
div#photo img
|
|
{
|
|
width: 300px;
|
|
border: 18px ridge pink;
|
|
}
|
|
|
|
div#boarding
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
div#boarding img
|
|
{
|
|
border-radius: 30px;
|
|
margin: 40px 5px;
|
|
border: 8px solid black;
|
|
width: 200px;
|
|
}
|