101 lines
1.6 KiB
CSS
101 lines
1.6 KiB
CSS
|
|
||
|
|
||
|
body {
|
||
|
margin: 0;
|
||
|
background: #0f0f0f;
|
||
|
color: white;
|
||
|
width: 100vw;
|
||
|
height: 100vh;
|
||
|
}
|
||
|
|
||
|
#head {
|
||
|
background: slategray;
|
||
|
padding: 1rem 2rem ;
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
position: sticky;
|
||
|
border-bottom: 1px solid rgba(255,255,255,.5)
|
||
|
}
|
||
|
|
||
|
#head .center {
|
||
|
font-size: 30px;
|
||
|
font-family: "Nanum Myeongjo", serif;
|
||
|
}
|
||
|
|
||
|
#head .right, #head .left {
|
||
|
display: flex;
|
||
|
width: 15rem;
|
||
|
justify-content: space-around;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
#head .right span, #head .left span {
|
||
|
cursor: pointer;
|
||
|
-webkit-user-select: none; /* Safari */
|
||
|
-ms-user-select: none; /* IE 10 and IE 11 */
|
||
|
user-select: none; /* Standard syntax */
|
||
|
}
|
||
|
|
||
|
#head .right .pp {
|
||
|
font-weight: 700;
|
||
|
padding: 5px 10px;
|
||
|
border: 1px solid white;
|
||
|
background: darkgreen
|
||
|
}
|
||
|
|
||
|
#splash {
|
||
|
background: #2f2f2f;
|
||
|
height: 85vh;
|
||
|
display: flex;
|
||
|
justify-content: end;
|
||
|
align-items: center;
|
||
|
padding-right: 15vh;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: white;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
#splash .rh {
|
||
|
width: 25vw;
|
||
|
text-align: right;
|
||
|
font-size: 60px;
|
||
|
position: relative;
|
||
|
right: 0;
|
||
|
}
|
||
|
|
||
|
#splash .rh .free {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
|
||
|
.block {
|
||
|
padding: .5vh 5vw 2vw;
|
||
|
}
|
||
|
|
||
|
.innerblock {
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.innerblock p {
|
||
|
width: 50%;
|
||
|
}
|
||
|
|
||
|
.light {
|
||
|
background: #2f2f2f;
|
||
|
}
|
||
|
|
||
|
.punchcrew {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: space-between;
|
||
|
}
|
||
|
|
||
|
.punchcrew .person {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
}
|