86 lines
2.6 KiB
CSS
86 lines
2.6 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif;
|
|
font-size: 4.3vh;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
|
|
}
|
|
|
|
html, body {
|
|
background-color: #0f0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.2em;
|
|
margin: .5em 0;
|
|
}
|
|
|
|
#content {
|
|
display: flex;
|
|
}
|
|
|
|
.favorites {
|
|
padding: 1em;
|
|
}
|
|
|
|
.favorites li {
|
|
display: block;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.favorites ul {
|
|
width: 18.1em;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.favorites h1 {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.favorites button {
|
|
word-wrap: break-word;
|
|
width: 5.5em;
|
|
height: 5.5em;
|
|
margin: .25em;
|
|
border: .15em solid black;
|
|
border-radius: .25em;
|
|
opacity: 0.8;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.favorites__left ul {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.favorites__right ul {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.favorites__left button {
|
|
background-color: #800;
|
|
}
|
|
|
|
.favorites button:hover {
|
|
border-color: #909;
|
|
text-shadow: #909 3px 0px 0px, #909 2.83487px 0.981584px 0px, #909 2.35766px 1.85511px 0px, #909 1.62091px 2.52441px 0px, #909 0.705713px 2.91581px 0px, #909 -0.287171px 2.98622px 0px, #909 -1.24844px 2.72789px 0px, #909 -2.07227px 2.16926px 0px, #909 -2.66798px 1.37182px 0px, #909 -2.96998px 0.42336px 0px, #909 -2.94502px -0.571704px 0px, #909 -2.59586px -1.50383px 0px, #909 -1.96093px -2.27041px 0px, #909 -1.11013px -2.78704px 0px, #909 -0.137119px -2.99686px 0px, #909 0.850987px -2.87677px 0px, #909 1.74541px -2.43999px 0px, #909 2.44769px -1.73459px 0px, #909 2.88051px -0.838247px 0px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.favorites__left button:hover {
|
|
background-color: #70d;
|
|
}
|
|
|
|
.favorites__right button {
|
|
background-color: #008;
|
|
}
|
|
|
|
.favorites__right button:hover {
|
|
background-color: #e4005f;
|
|
}
|