Violets-Purgatory/static/style.css

167 lines
2.6 KiB
CSS
Raw Normal View History

2023-10-22 12:16:47 -05:00
/* @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap'); */
:root {
2023-10-22 12:16:47 -05:00
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 0;
text-align: center;
}
h1 {
color: rgb(225, 215, 255);
font-size: 2.5rem;
2023-11-03 20:12:37 -05:00
margin-top: 20px;
}
h2 {
color: white;
font-size: 2rem;
}
2023-11-07 15:04:48 -06:00
body, html {
margin: auto;
2023-11-07 14:48:35 -06:00
background-color: rgb(30, 5, 60);
2023-11-07 14:40:43 -06:00
width: 100vw;
height: 100vh;
2023-11-07 15:04:48 -06:00
margin: 0;
padding: 0;
2023-11-07 13:00:16 -06:00
}
2023-10-22 12:16:47 -05:00
2023-11-07 14:40:43 -06:00
.fadediv {
2023-11-07 13:00:16 -06:00
animation-name: fade-in;
animation-duration: .75s;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
a {
color: rgb(230, 175, 255);
text-decoration: none;
display: inline-block;
transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.chip {
font-size: 1.3rem;
2023-11-03 20:12:37 -05:00
border: 2px gray solid;
border-radius: 8px;
background-color: black;
2023-11-03 20:12:37 -05:00
padding: 8px;
margin: 3px;
display: inline-block;
2023-10-22 16:34:09 -05:00
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
2023-11-07 14:48:35 -06:00
transform: scale(0.95)
}
.chip:hover {
2023-10-22 16:34:09 -05:00
/* background-color: rgb(20, 10, 30); */
2023-11-07 14:48:35 -06:00
transform: scale(1);
/* font-size: 1.35rem; */
2023-11-03 20:12:37 -05:00
border-color: white;
}
a:hover {
color: white;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
p {
color: white;
font-size: 1.2rem;
padding: 0;
margin: 10px;
}
img {
2023-11-07 13:00:16 -06:00
width: 60%;
max-width: 135px;
2023-11-03 20:12:37 -05:00
border: darkgray 4px solid;
border-radius: 50%;
2023-11-03 20:12:37 -05:00
transform: scale(0.95);
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
img:hover {
2023-11-03 20:12:37 -05:00
transform: scale(1.05);
border-color: rgb(255, 200, 255);
object-fit: cover;
}
hr {
color: white;
opacity: 0.25;
border-width: 2px;
margin: 20px 10%;
2023-10-22 12:16:47 -05:00
}
2023-11-03 20:12:37 -05:00
#card {
background-image: linear-gradient(-45deg, rgb(75, 25, 125), rgb(100, 30, 100));
background-color: rgb(50, 25, 100);
padding: 15px;
border: 2px white solid;
margin: auto;
2023-11-07 14:40:43 -06:00
max-width: 1000px;
2023-11-07 15:04:48 -06:00
width: 98%;
2023-11-03 20:12:37 -05:00
}
.me {
border-color: limegreen;
}
2023-11-07 13:16:50 -06:00
/* I am so sorry about this code,,, */
2023-10-22 12:16:47 -05:00
.love::before {
content: "<3 ";
color: rgb(255, 100, 150);
}
.like::before {
content: ":) ";
color: limegreen;
}
.silly::before {
content: ":P ";
color: aqua;
}
.fine::before {
content: ":/ ";
color: yellow;
}
.hate::before {
content: ">:( ";
color: red;
}
.love {
border-color: rgb(255, 100, 150);
}
.like {
border-color: limegreen;
}
.silly {
border-color: aqua;
}
.fine {
border-color: yellow;
}
.hate {
border-color: red;
}
@keyframes fade-in {
0% {
opacity: 0;
2023-10-22 16:34:09 -05:00
transform: translateY(20%);
2023-10-22 12:16:47 -05:00
}
100% {
opacity: 1;
transform: none;
}
}