tsaibar/css/main.css

113 lines
1.7 KiB
CSS

:root {
--black: #000501;
--white: #F9F9F9;
--yellow: #EFEA5A;
--green: #16DB93;
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
overflow-x: hidden;
background-color: var(--black);
background-image: url(../media/SpaceBackground.png);
background-size: 512px 512px;
background-repeat: repeat;
}
header {
background-color: var(--yellow);
padding: 0 0 20px 0;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
header > img {
width: 512px;
height: auto;
display: block;
margin: auto;
}
@media only screen and (max-width: 512px) {
header > img {
width: 90vw;
}
}
main {
border: 5px solid var(--yellow);
border-top: none;
color: var(--white);
padding: 42px;
font-family: 'Courier New', monospace;
background-color: black;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
header, main {
max-width: 1024px;
margin: auto;
}
main a, main a:visited {
color: var(--green);
text-decoration: none;
}
main a:hover {
border-bottom: 2px solid var(--green);
}
main address {
display: flex;
justify-content: space-around;
}
main section#wil ul {
list-style-type: '';
}
main section#wil ul li::before {
content: '🧡 ';
}
main section#wil ul li:nth-child(even)::before {
content: '💛 ';
}
main section#games ul {
list-style-type: '';
}
main section#games ul li::before {
content: '🟧 ';
}
main section#games ul li:nth-child(even)::before {
content: '🟨 ';
}
main ul li {
padding: 2px 0 2px 0;
}
main section#socials {
line-height: 200%;
}
td {
padding: 5px;
}
hr {
border: none;
border-top: 1px dashed var(--yellow);
}