network-website/assets/contact-style.css

119 lines
2.5 KiB
CSS
Raw Normal View History

2024-06-05 22:14:01 +02:00
@font-face {
font-family: 'workbench';
src: url('../assets/font.woff2') format('woff2');
}
2024-06-05 23:36:25 +02:00
@media (min-width: 600px){
body {
background-color: #2e2e2e;
background-image:
linear-gradient(to bottom,
#000000,
#1a5c008a,
#000000
);
background-size: 100% 3px;
background-repeat: repeat-y;
margin: 0;
font-family: 'workbench', sans-serif;
}
2024-06-05 22:14:01 +02:00
}
2024-06-05 23:36:25 +02:00
@media (max-width: 600px){
body {
background-color: #2e2e2e;
background-image:
linear-gradient(to bottom,
#000000,
#1a5c008a,
#000000
);
background-size: 100% 3.5px;
background-repeat: repeat-y;
margin: 0;
font-family: 'workbench', sans-serif;
}
}
2024-06-05 22:14:01 +02:00
.navbar {
background:
radial-gradient(
farthest-corner at 50% 50%,
rgba(0, 0, 0, 0.6),
rgba(20, 20, 20, 0.6) 50%,
rgba(40, 40, 40, 0.6) 100%
);
background-size: 100% 300px;
background-position: 0% 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.logo {
font-size: 1.5rem;
color: #33ccffca;
text-shadow: 0 0 10px #33ccffbe;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
font-size: 1.2rem;
color: #33ccffab;
text-decoration: none;
transition: color 0.2s ease;
text-shadow: 0 0 3px #33ccffaf;
pointer-events: initial;
}
.nav-links a:hover {
color: #33ccffda;
}
.contact-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #33ccffab;
text-shadow: 0 0 3px #33ccffaf;
padding: 10px;
pointer-events: none;
}
.contact-container h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
.contact-container p {
font-size: 1.2rem;
margin: 0.5rem 0;
}
.contact-container a {
color: #33ccffab;
text-decoration: none;
transition: color 0.2s ease;
pointer-events: stroke;
}
.contact-container a:hover {
2024-06-05 23:36:25 +02:00
color: #33ccff;
2024-06-05 22:14:01 +02:00
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
2024-06-06 00:54:18 +02:00
background: transparent;
}
2024-06-05 22:14:01 +02:00
.nav-links {
flex-direction: column;
align-items: center;
}
.nav-links li {
margin: 5px 0;
}
}