.nav {
background-color: var(--ze-primary-bg-color);
}
.nav::after {
content: '';
position: absolute;
width: 100vw;
height: 1px;
top: 6vh;
background-color: var(--ze-secondary-text-color);
}
.nav-item, .nav-item:visited, .nav-item:link {
color: var(--ze-secondary-text-color);
&::before, &::after {
background-color: var(--ze-secondary-text-color);
}
}
.start-page {
/* display: flex; */
/* flex-wrap: wrap; */
width: 100%;
min-height: 94vh;
background-color: var(--ze-primary-bg-color);
/* row-gap: 3rem; */
/* justify-content: center; */
& > .contactmeSection {
display: flex;
flex-wrap: wrap;
width: 100%;
min-height: 94vh;
/* justify-content: space-evenly; */
/* align-items: center; */
justify-content: center;
@media (max-width: 1175px) {
flex-direction: column-reverse;
}
& > .textSection {
/* display: grid; */
/* grid-template-columns: repeat(3, 1fr); */
/* grid-template-rows: repeat(5, 1fr); */
gap: 0;
/* width: 60vw; */
flex-grow: 1;
& > div {
color: var(--ze-secondary-text-color);
}
& > div:first-child {
margin-top: 4rem;
font-size: clamp(30px, 6vw, 3rem);
text-align: center;
grid-area: 1 / 1 / 2 / 4;
}
& > div:nth-child(2) {
justify-self: flex-start;
grid-area: 2 / 1 / 3 / 4;
margin: 2rem 0 4rem 7rem;
font-family: "DancingScript";
font-size: clamp(22px, 8vw, 3rem);
@media (max-width: 1175px) {
margin: 2rem 0 2rem 7rem;
/* margin-inline: auto; */
}
}
}
& > .picSection {
align-self: center;
& > img {
/* width: clamp(240px, 25vw, 80rem); */
width: clamp(300px, 38vw, 80rem);
/* height: 100%; */
height: 94vh;
object-fit: cover;
/* object-position: center 60%; */
object-position: center;
/* aspect-ratio: 1 / 1; */
backface-visibility: hidden;
@media (max-width: 1175px) {
/* height: unset; */
height: 26rem;
/* margin-top: 4rem; */
}
}
}
}
}
.textSection .text-area {
display: flex;
font-size: clamp(16px, 3vw, 2.2rem);
/* margin: 2rem 0 0 0; */
margin: 0 0 4rem 0;
gap: 1rem;
& > .area-icon {
width: clamp(18px, 6vw, 4rem);
/* height: 4vw; */
mask-repeat: no-repeat;;
mask-size: contain;
background-color: var(--ze-secondary-text-color);
&.phone {
mask-image: url('data:image/svg+xml,');
}
&.mail {
mask-image: url('data:image/svg+xml,');
}
&.instagram {
mask-image: url('data:image/svg+xml,');
}
}
& a {
font-weight: 600;
}
@media (max-width: 1175px) {
margin-bottom: 3rem;
}
}
@media (max-width: 800px) {
.start-page > .contactmeSection > .first > div:not(:first-child) {
margin: 2rem 0 0 2rem;
}
}