html {
background: url("data:image/svg+xml; utf8,") no-repeat center center fixed;
background-size: cover;
height: 100%;
}
* {
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
text-decoration: none;
color: #c1c1c1;
border-radius: 10px;
}
h2 {
border-bottom: 1px solid goldenrod;
border-radius: 0;
width: fit-content;
margin: auto;
}
body {
display: grid;
grid:
"h"
"m"
"f";
width: 50%;
grid-template-rows: auto 1fr auto;
min-height: 100%;
margin: auto;
padding: 1%;
}
body>* {
border: solid 1px goldenrod;
padding: 0.5em;
margin: 0.1em;
background-color: rgb(0, 20, 20, 75%);
width: 100%
}
header {
grid-area: h;
}
main {
grid-area: m;
display: grid;
grid:
"a" "a"
"s" "s"
"c" "c";
min-height: 100%;
margin: auto;
padding: 1%;
}
#contact {
grid-area: c;
}
#services {
grid-area: s;
}
#about {
grid-area: a;
}
footer {
grid-area: f;
font-variant: small-caps;
}
.card {
background-color: rgb(0, 111, 111, 10%);
min-height: 10em;
display: block;
align-content: center;
}
#services-container {
display: grid;
grid: auto-flow / 1fr 1fr
}
#services-container>.card {
margin: 0.1em;
}
.card:hover {
background-color: rgb(0, 111, 111, 20%);
box-shadow: 2px 2px 1px rgb(0, 222, 222, 20%);
text-shadow: 2px 2px 1px rgb(0, 222, 222, 20%);
}
.card p {
font-size: larger;
}
#contact-button {
font-size: x-large;
font-weight: bolder;
}