yuki/styles.css

199 lines
2.9 KiB
CSS

body
{
font-family: 'Shantell Sans', cursive;
background: url("bg.jpg") #306;
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
}
@supports (background-image: url("bg.avif"))
{
body
{
background-image: url("bg.avif");
}
}
main
{
background-color: rgba(255, 255, 255, 0.5);
color: black;
width: 960px;
margin: 16px auto;
border-radius: 1em;
padding: 0.5em;
}
#logo
{
background-color: transparent;
width: 256px;
height: 256px;
margin: auto;
margin-top: 6em;
margin-bottom: 4em;
perspective: 1000px;
}
#logo-inner
{
position: relative;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
transition: transform 0.8s;
transform-style: preserve-3d;
}
#logo:hover #logo-inner
{
transform: rotateY(-180deg);
}
#logo-front, #logo-back
{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
font-family: "Rampart One", sans-serif;
background-color: white;
color: black;
border-radius: 50%;
box-shadow: 8px 8px 0px 2px black;
font-size: 160px;
}
#logo-back
{
background: url("yuki.png") white;
background-size: cover;
transform: rotateY(180deg);
@supports (background-image: url("yuki.avif"))
{
background-image: url("yuki.avif");
}
}
#logo-back video
{
width: 100%;
height: 100%;
border-radius: 50%;
}
h1
{
font-size: 3em;
font-weight: 600;
margin-bottom: 0;
}
ul
{
padding-left: 0;
margin-top: 3em;
margin-bottom: 3em;
}
li
{
width: 50%;
margin: 1em auto;
background-color: blueviolet;
list-style-type: none;
border-radius: 16px;
box-shadow: 6px 6px black;
transition: 0.2s;
}
li:hover, button:hover, input:focus, textarea:focus
{
transform: translate(4px, 4px);
box-shadow: 2px 2px black;
outline: none;
}
li a, li a:visited
{
display: block;
text-decoration: none;
color: white;
width: 100%;
height: 100%;
padding: 0.5em 0;
}
form
{
text-align: left;
}
input, button, textarea
{
width: calc(100% - 8px);
font-family: 'Shantell Sans', cursive;
background-color: blueviolet;
color: white;
border: none;
border-radius: 8px;
box-shadow: 6px 6px black;
padding: 4px;
transition: 0.2s;
}
button
{
width: inherit;
padding: 4px 4em;
}
textarea
{
resize: vertical;
}
.center
{
text-align: center;
}
footer
{
padding-top: 2em;
}
nav a
{
text-decoration: none;
}
nav a img
{
box-shadow: 4px 4px black;
transition: 0.2s;
}
nav a img:hover
{
transform: translate(2px, 2px);
box-shadow: 2px 2px black;
}
@media screen and (max-width: 992px) {
main
{
width: calc(100% - 32px);
}
}
@media screen and (max-width: 600px) {
li
{
width: 100%;
}
}