m0e.space/frontend/src/app.css

95 lines
1.9 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Jeko-SemiBold';
src: url('/fonts/Jeko Semi Bold.ttf')
}
@font-face {
font-family: 'Jeko-MediumItalic';
src: url('/fonts/Jeko Medium Italic.ttf')
}
@font-face {
font-family: 'Jeko-Regular';
src: url('/fonts/Jeko Regular.ttf')
}
html {
min-height:100%;
/* position:relative; */
}
html,
body {
height: 100%;
}
main {
background-color: #1B1D29;
/* border-radius: 50px; */
box-shadow: 29px 38px 50px -29px #08090D;
}
#title {
text-shadow: 0px 0px 30px #1F3891;
}
.button {
@apply w-full h-32 md:w-56 md:h-16 text-3xl md:text-lg rounded-full font-title font-normal text-white flex items-center justify-center p-4 bg-center bg-contain transition ease-in-out text-center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
background: linear-gradient(0deg, rgba(27, 29, 41, 0.49), rgba(27, 29, 41, 0.49));
box-shadow: inset 0px 0px 30px #000000;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-backdrop-filter: brightness(50%);
backdrop-filter: brightness(50%);
}
.button:hover {
box-shadow: inset 0px 0px 100px #000000;;
}
#button1 {
background-image: url('/projects.jpg?webp');
}
#button2 {
background-image: url('/hosted.jpg?webp');
}
.error {
font-size: 50pt;
}
.main {
height: 100%;
width: 100%;
}
body {
background: linear-gradient(107.56deg, #12151E 0%, #060910 100%);
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.bg {
pointer-events: none;
position: fixed;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
z-index: -1;
}
.link {
background-image: url('/link.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
background-color: #151515;
}