@font-face {
  font-family: "roboto";
  src:
    url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "roboto";
  src:
    url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "playfair display";
  src:
    url("../fonts/playfair-display/playfair-display.woff2") format("woff2"),
    url("../fonts/playfair-display/playfair-display.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


:root {
    --blue-background: #0691b2;
    --width: 100vw;
    --full-with: 100vw;
    --angle: -11deg;

    /* calculated by this formula:
    tan(11°) / 2
    11° is the current skewY value. */
    /* from https://9elements.com/blog/create-diagonal-layouts-like-its-2020/ */
    --magic-number: 0.09719;
    --skew-padding: calc(var(--width) * var(--magic-number)); 

    /* fluid typography */
    --fluid-min: 1rem;    /* 16px */
    --fluid-max: 1.5rem;  /* 24px */
    --fluid-min-vw: 320px;
    --fluid-max-vw: 1200px;

    --fluid-size: clamp(
        1rem,
        calc(1rem + (1.5 - 1) * ((100vw - 320px) / (1200 - 320))),
        1.5rem
    );
}

/* * {
    border: 1px solid red;
} */

html {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    max-width: 1000px;
    width: 100%;

    /* fluif typography */
    /* font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (2800 - 300))); */
    /* font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
    font-size: 1rem; /* fallback for older browsers */
    font-size: var(--fluid-size);
    font-family: Roboto, sans-serif;
}

/* HEADER SECTION */
.header {
    /* positions the child .diagonal-box relative to the .header */
    position: relative;
}

.diagonal-box {
    height: 460px;
    
    background-color: var(--blue-background);
    transform: skewY(var(--angle)) translateY(calc(-1 * var(--skew-padding)));

    /* padding-top clears the diagonal line and adds Xpx to padd the content from the top of the viewport */
    /* padding-top: calc(var(--skew-padding) + 25px) ; */

    /* z-index needs to be lower than that of content which comes on top of it */
    z-index: -1;

    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
}

.content-header {
    /* position relative places it on top of the .diagonal-box */
    position: relative;
    /* margin-top depends on the height of the .diagonal-box */
    margin-top: -430px;
    margin-left: 3rem;
    margin-right: 3rem;
}

.top-portrait {
    /* this gives the appearance of a square cropped image */
    width: 350px;
    height: 350px;
    object-fit: cover;

    /* this margin affects the position of the transformed .name-header */
    margin-right: 1rem;
    float: left;

    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
}

.name-header {
    /* skip the margin here
    because the name is translated but it keeps its position */
    /* margin-top: 50px; */

    font-size: 2.5rem;
    font-family: "Playfair Display", serif;
    color: white;
    transform: translate(-37%, 450%);
}

.text-container-header {
    background-color: white;
    padding-left: 1rem;
    padding-right: 1rem;

    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
}

.about-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: "Playfair Display", serif;
}

.social-header {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.svg-codeberg-button,
.svg-linkedin-button,
.svg-twitter-button {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}

.svg-codeberg,
.svg-linkedin,
.svg-twitter {
    width: 25px;
    height: auto;
}

/* MAIN SECTION */
.main-element {
    margin-top: var(--skew-padding);
    
    /* margin is the same as .content-header from the header section */
    margin-left: 3rem;
    margin-right: 3rem;

    padding-bottom: 3rem;

    /* position relative places it on top of the .diagonal-box - 
    to help with odd displays where the diagonal-box would go 
    all the way to the main-section */
    position: relative;
}

.heading-main {
    padding-bottom: 1rem;
    font-family: "Playfair Display", serif;
}

.section-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.article-container-main {
    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
}

.project-header-main {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.project-name-main {
    margin-right: auto;
    font-family: "Playfair Display", serif;
}

.project-description-main {
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.button-svg-codeberg-main,
.button-svg-link-main {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}

.svg-codeberg-main,
.svg-link-main {
    width: 25px;
    height: auto;
}

/* FOOTER SECTION */
.footer-element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    padding-left: 3rem;
    padding-right: 3rem; /* consistent with sections above */
    padding-top: 3rem;
    padding-bottom: 3rem;

    background-color: var(--blue-background);
}

.contact-container-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-heading-footer {
    font-family: "Playfair Display", serif;
}

.contact-heading-footer,
.get-in-touch-footer,
.post-address-footer,
.phone-number-footer,
.email-footer {
    color: white;
}

.phone-section-footer,
.email-section-footer {
    display: flex;
}

.svg-phone-footer,
.svg-email-footer {
    width: 25px;
    height: auto;
    fill: white;

    margin-right: 1rem;
}

.blockspam {
    display: none;
}

.social-icons-container-footer {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
}

.svg-codeberg-footer,
.svg-linkedin-footer,
.svg-twitter-footer {
    width: 25px;
    height: auto;
}

.svg-codeberg-footer circle {
    fill: black;
}

.portait-footer {
    width: 500px;
    height: 350px;
    object-fit: cover;
}

/* Media Queries */
/* Tablet breakpoint */
@media screen and (max-width: 850px) {
    /* HEADER SECTION */
    .diagonal-box {
        height: 330px;
    }

    .content-header {
        margin-top: -300px; /* correlated with height of .diagona-box */
    }

    .top-portrait {
        width: 250px;
        height: 250px;
    }

    .name-header {
        transform: translate(-10%, 0%);
    }

    .text-container-header {
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .about-header {
        text-align: center;
    }

    /* MAIN SECTION */
    /* no further styling needed for the main section */

    /* FOOTER SECTION */
    /* no further styling needed for the footer section */
}

/* Mobile breakpoint */
@media screen and (max-width: 500px) {
    /* HEADER SECTION */
    .diagonal-box {
        height: 480px;
    }

    .content-header {
        margin-top: -450px; /* correlated with height of .diagona-box */
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .top-portrait {
        width: auto;
        height: auto;
    }

    .name-header {
        text-align: center;
        transform: translate(0%, -10%);
    }

    .about-header {
        padding-top: 0;
    }

    .text-container-header {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;

        box-shadow: none;
    }

    .social-header {
        justify-content:center;
    }

    /* MAIN SECTION */
    .main-element {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* FOOTER SECTION */
    .footer-element {
        grid-template-columns: 1fr;

        /* no padding, since the image is flush with the margins,
        use margins on the text section */
        padding: 0;
    }

    .contact-container-footer {
        margin: 1rem;
    }

    .social-icons-container-footer {
        justify-content: center;
    }
}