/* ==font family== */
@font-face {
    font-family: "Reg";
    src: url("/PLEX_SANS/IBMPlexSans-Regular.woff2") format("woff2");
    font-display: swap;

}
@font-face {
    font-family: "Medium";
    src: url("/PLEX_SANS/IBMPlexSans-Medium.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Hover";
    src: url("/PLEX_SANS/IBMPlexSans-Bold.woff2") format("woff2");
    font-display: swap;
}


/* ==body== */
body {
    font-family: Reg;
    color: #e4284c;
    background-color: #fffbf3;
    padding: 0.5em;
    scroll-behavior: smooth;
}


/* ==header== */
#header {
    display: flex;
    top: 0;
    padding-bottom: 0.5em;
    background-color: #fffbf3;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2em;
}
.nav_link, .nav_link a, .home a{
    text-decoration: none;
    color: #e4284c;
    font-size: 1.7vw;
}
.nav_link a:hover, .home a:hover {
    font-family: Hover;
}


/* ==impressum== */
.impressum {
    text-decoration: none;
    color: #e4284c;
    font-size: 1vw;
}
.impressum a {
    text-decoration: underline;
    color: #e4284c;
}
.impressum a:hover{
    text-decoration: none;
    font-family: Hover;
}


/* ==about== */
.about {
    display: flex;
    gap: 2vw;
    font-size: 1.5em;
    color: #e4284c;
    padding-bottom: 3em;
    padding-top: 1em;
}
.about span:hover, .about a:hover {
    font-family: Hover;
}
.about span, .about a {
    text-decoration: underline;
    color: #e4284c;
}
.about_text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.red_gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3em;
    padding-bottom: 3em;
}
.red_gallery img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==projects== */
.project-preview {
    display: flex;
    justify-content: space-between;
    gap: 3em;
    font-size: 4vw;
    align-items: center;
}
.project-preview a{
    color: #e4284c;
    text-decoration: none;
}
.project-preview a:hover {
    font-family: Hover;
    color: #e4284c;
}

/* ==more== */
.more a {
    font-size: 5vw;
    text-decoration: none;
    color: #e4284c;
}
.more a:hover {
    font-family: Hover;
}

/* ==gallery== */
.gallery {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}
.column_photo {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1;
  min-width: 200px;
}
.column_photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.column {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1;
  min-width: 200px;
}
.column img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.next{
    display: flex;
    justify-content: space-between;
    font-size: 1.7em;
    text-decoration: none;
    color: #e4284c;
    padding-bottom: 1em;
    padding-top: 0.5em;
}
.next a {
    text-decoration: none;
    color: #e4284c;
}
.next a:hover {
    font-family: hover;
}

/* ==sure== */
.sure, .sure_answer {
    display: flex;
    justify-content: center;
    gap: 5em;
}
.sure a, .sure_yes a, .sure_no a{
    font-size: 5em;
    text-decoration: none;
    color: #e4284c;
}
.sure_yes a:hover{
    font-family: hover;
    color: blue;
}
.sure_no a:hover{
    font-family: hover;
    color: #e4284c;
}

/* ==footer== */
#footer {
    display: flex;
    bottom: 0;
    padding-top: 0.5em;
    background-color: #fffbf3;
    justify-content: space-between;
    align-items: center;
    padding-top: 3em;
}