links.joshs.pro/style.css
2023-08-27 03:31:29 -04:00

73 lines
1.2 KiB
CSS

@import url('https://fonts.bunny.net/css?family=abril-fatface:400|rubik:600,800i,900i');
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #18181b;
}
#links-container {
display: flex;
flex-direction: column;
align-items: center;
}
.link-box {
background-color: #F43F5E;
color: white;
padding: 10px 20px;
margin: 10px;
border-radius: 10px;
text-align: center;
width: 200px;
font-size: 16px;
font-family: 'Abril-Fatface', sans-serif;
position: relative;
}
.link-box img {
max-width: 16px;
margin-right: 10px;
}
a {
color: white;
text-decoration: none;
}
.tooltip {
position: absolute;
top: 100%;
left: 0;
background-color: #333;
color: white;
padding: 5px;
border-radius: 5px;
z-index: 1;
font-size: 12px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}