@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

* {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
}

:root {
    font-size: 18px;


    /* Pistachio green */
    --col_pistachio_40: #F4F9F1;
    --col_pistachio_30: #DFECD5;
    --col_pistachio_20: #CADFB9;
    --col_pistachio_10: #BFD8AB;
    --col_pistachio_00: #A4C989;
    --col_pistachio_01: #94BF73;
    --col_pistachio_02: #7FB257;
    --col_pistachio_03: #6B9A47;
    --col_pistachio_04: #577E3A;
    --col_pistachio_05: #44622D;
    
    /* Carrot orrange */
    --col_carrot_40: #FEF5EB;
    --col_carrot_30: #FDE1C4;
    --col_carrot_20: #FCCE9C;
    --col_carrot_10: #FBBA74;
    --col_carrot_00: #F9A03F;
    --col_carrot_01: #F89225;
    --col_carrot_02: #ED7E07;
    --col_carrot_03: #C66906;
    --col_carrot_04: #9E5405;

    /* Charcoal blue */
    --col_charoal_40: #7A9FB8;
    --col_charoal_30: #608CA9;
    --col_charoal_20: #4F7792;
    --col_charoal_10: #406177;
    --col_charoal_00: #2C4251;
    --col_charoal_01: #243642;
    --col_charoal_02: #162027;
    --col_charoal_03: #0F151A;
    --col_charoal_04: #070A0D;

    /* Cosmos red */
    --col_cosmosred_40: #D23751;
    --col_cosmosred_30: #B72A41;
    --col_cosmosred_20: #962235;
    --col_cosmosred_10: #741A29;
    --col_cosmosred_00: #53131E;
    --col_cosmosred_01: #430F18;
    --col_cosmosred_02: #320B12;
    --col_cosmosred_03: #21070C;
    --col_cosmosred_04: #110406;

    /* Cosmos red */
    --col_cosmosred_40: #D23751;
    --col_cosmosred_30: #B72A41;
    --col_cosmosred_20: #962235;
    --col_cosmosred_10: #741A29;
    --col_cosmosred_00: #53131E;
    --col_cosmosred_01: #430F18;
    --col_cosmosred_02: #320B12;
    --col_cosmosred_03: #21070C;
    --col_cosmosred_04: #110406;

    --main-brown: #E6DCC1;
    --main-green: #A4C989;
    --main-grey: #92A187;
    --main-brightblue: #89B8E9;
    --main-blue: #84A7B3;
    --grey-1: #A69F8B;
    --grey-2: #CCC3AB;
    --grey-3: #666256;

    --margin-xxs: .25rem;
    --margin-xs:  .5rem;
    --margin-s: .75rem;
    --margin-m: 1.00rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.50rem;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*------------------ General Rules ------------------*/

p {

}

a {
    text-decoration: none;
    color: black;
}


h1 {
    font-size: 2.0rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.3rem;
}


/* Default table*/ 
table {
    border-collapse: collapse;
}

td,
th {
    padding: 8px;
    border: none;
    margin: 0;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--grey-3);
    color: white;
}

/* Solid spacer */
hr.solid {
    margin: 0;
    border-top: 1px solid black;
    width: 100%;
    padding: 0;
}

/* Block quote */
blockquote {
    position: relative;
    padding: 15px 20px;
    margin: 20px 0;
    background-color: #f9f9f9;
    border-left: 5px solid #ccc;
    font-style: italic;
    quotes: "“" "”" "‘" "’"; 
}

blockquote:before {
    content: open-quote;
    font-size: 40px;
    color: #ccc;
    position: absolute;
    left: 10px;
    top: -10px;
}

blockquote p {
    display: inline; 
    margin: 0;
    padding-left: 10px; 
}

/* MAIN PAGE HERO SECTION */
.main-hero-section {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin: var(--margin-s) 0px;
    width: 100%;
    height: 400px;
    /* border: 1px solid #333; */
}

.main-hero-section .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    box-sizing: border-box;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    height: 100%;
    width: 100%;
}

/* MAIN PAGE APPETIZER SECTION */
.main-apetizer {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    flex-flow: column;
    width: 100%;
    margin: var(--margin-xs);
    height: auto;
    /* border: 1px solid #333; */
}

.main-apetizer h4 {
    padding: var(--margin-xs) 0px;
}

/* MAIN PAGE DESSERT SECTION */
.main-dessert {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 140px;
    width: 100%;
    /* border: 1px solid #333; */
}

.main-dessert .lower_card {
    display: flex;
    box-sizing: border-box;
    height: 40px;
    width: 100%;
    border: 1px solid #333;
    align-items: center;
    justify-content: center;
    margin: var(--margin-s);
}

.header {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 5em;
    background: var(--col_pistachio_00);
    /* background: linear-gradient(90deg, rgba(49,56,44,1) 5%, rgba(146,161,128,1) 30%, rgba(146,161,135,1) 70%, rgba(49,56,44,1) 95%); */
    background: radial-gradient(farthest-corner,var(--col_pistachio_00), #333);
}

.header h1 {
    text-align: center;
    font-weight: 900;
    font-size: 40px;
    margin: 0 auto;
    color: #1c232c;

}

/* Logo Column */
.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-variant: small-caps;
}

.logo h1 {
    
}

.logo img {
    top: 0;
    display: flex;
    position: sticky;
    height: 50px;
    transition: width 1.5s ease;
    padding: 0 10px;
    color: #1c232c;
}


/*------------------ Top Navigation ------------------*/

.topnav {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
    top: 0;
    background-color: #333;
    position: sticky;
    width: 100%;
    padding: 0 calc((100% - 1024px)/2 + 5px);
    z-index: 999;
  }
  
.topnav a {
    box-sizing: border-box;
    width: 24.5vw;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    transition-duration: 0.3s;
    font-weight: 300;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
    box-shadow: inset 0 0 4px black;

  }
  
  .topnav a.active {
    background-color: var(--main-green);
    color: white;
    box-shadow: inset 0 0 4px black;

  }


/*------------------ Main Part ------------------*/

.main {
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--main-brown);
    padding: 0 calc((100% - 1024px)/2);
}

.main .latest-articles {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 10px calc((100% - 1024px)/2);
    justify-content: space-between;
}

.main .content {
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFF;
    margin: 10px 0px;
    padding: 1vw 2vw;
    text-align: justify;
    border-radius: 5px;
}

.main .blog_entry {
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFF;
    margin: 10px 0px;
    padding: 1vw 2vw;
    text-align: justify;
    border-radius: 5px;
}

.main .content h4 {
    text-align: center;
    font-variant: small-caps;

}

/* ------------------------- Cards ------------------------- */

.latest-articles .card {
    margin: 0 calc(3%/2);
    padding: 0px;
    border-radius: 2%;
    flex-direction: column;
    flex-wrap: wrap;
    height: 400px;
    width: calc(31%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    transition-duration: 0.4s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.latest-articles .card:hover {
    transform: scale(1.01);
}

.latest-articles .card .card_title_1 {
    position: absolute;
    color: #000;
    box-sizing: border-box;
    z-index: 100;
    transition-duration: 0.8s;
    top: calc(80% + 2% + 1.1rem);
    font-weight: 600;
    font-size: 1.1rem;
    margin: auto;
}

.latest-articles .card:hover .card_title_1 {
    top: calc(80% + 2% + 1.1rem + 50%);
    color: #000;
    background-color: rgba(255, 255, 255, 0.0);
    font-weight: 1000;
    font-size: 1.2rem;
}

.latest-articles .card .card_title_2 {
    position: absolute;
    color: #000;
    box-sizing: border-box;
    z-index: 100;
    transition-duration: 0.8s;
    top: calc(15% - 50%);
    font-weight: 600;
    font-size: 1.1rem;
    margin: auto;
}

.latest-articles .card:hover .card_title_2 {
    top: 15%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.0);

    font-weight: 1000;
    font-size: 1.2rem;
}

.latest-articles .card .card_body {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 30%);
    border-radius: 2%;
    position: absolute;
    top: calc(10% + 15% + 5%);
    padding: 0 10px;
    transition-duration: 0.6s;
    margin: auto;
}

.latest-articles .card img {
    width: calc(100% - 16px);
    height: calc(100% - 20%);
    top: 8px;
    position: absolute;
    border-radius: 2%;
    object-fit: contain;
    transition: 0.6s;
    display: inline;
    filter: grayscale(65%);
    margin: auto;
}

.latest-articles .card:nth-child(1) .card_body {
    top: -100%;
}

.latest-articles .card:nth-child(2) .card_body {
    top: -100%;
}

.latest-articles .card:nth-child(3) .card_body {
    top: -100%;
}

.latest-articles .card:nth-child(1):hover .card_body {
    top: 30%;
}

.latest-articles .card:nth-child(1):hover img {
    transform: translateY(120%);
}

.latest-articles .card:nth-child(2):hover .card_body {
    top: 30%;
}

.latest-articles .card:nth-child(2):hover img {
    transform: translateY(120%);
}

.latest-articles .card:nth-child(3):hover .card_body {
    top: 30%;
}

.latest-articles .card:nth-child(3):hover img {
    transform: translateY(120%);
}

.latest-articles .card .card_body .entry_teaser {
    margin: auto;
    padding: 0;
    top: 20%;
    height: 50%;
}

.latest-articles .card:hover img {
    background-color: #000;
    opacity: 0;
}

.latest-articles .card .entry_link {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
    margin: 10px 0 0 0;
}

.latest-articles .card .entry_publish_date {
    position: absolute;
    right: 10px;
    bottom: 4%;
    color: #727272;
}

.latest-articles .card .entry_category {
    position: absolute;
    left: 10px;
    bottom: 4%;
    color: #727272;
}

/*------------------ Footer -------------------*/

.footer {
    box-sizing: border-box;
    background-color: var(--grey-3);
    color: white;
    padding: 0 calc((100% - 1024px)/2);
    border-top: 1px solid var(--main-green); 
}

/*---------------------------------------------//
//---------------- Responsiveness -------------//
//---------------------------------------------*/

  @media screen and (max-width:1024px) {
    

  }

  @media screen and (max-width:768px) {
    

    .latest-articles .card .entry_publish_date::before {
        content: "";
    }
  
    .header {
        height: 50px;
        padding: 5px 0;
    }

    /* Logo column */
    .logo img {
        height: 2rem;
        z-index: 100;
    }
    
    .logo h1 {
        display: none;
    }



    .topnav {
        padding: 0 1vw;
    }

    .topnav a {
        width: 24vw;
        padding: 8px 6px;
        font-size: 16px;    
    }

    .latest-articles .card .card_title_2 {
        display: none;
    }

    .latest-articles .card:nth-child(n) .card_body {
        left: 0;
        right: 0;
        top: 30%;
        opacity: 0;
        /* display: none; */
        visibility: hidden;
    }
    
    .latest-articles .card:nth-child(n):hover .card_body {
        opacity: 1;
        top: 30%;
        visibility: visible;
        /* display: inline; */
    }

    
    .main {
        padding: 0;
    }

    .main .latest-articles {
        flex-direction: column;
        margin: 0 0;
        padding: 10px 0;
        justify-content: space-between;
    
    }

    .latest-articles .card {
        width: 98vw;
        margin: 1vw 1vw;

    }

    .latest-articles .card:hover {
        transform: translateY(0);
    }  
    
    /* Card */
    .footer {
        padding: 0 10px;
    }
    

  }


  /* Karma */

  a.karma {
    margin: 10px 0 0;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
    text-align: center;
  }



.article_table {
    text-align: start;
    width: 100%;
}
.article_table th:nth-child(2), td:nth-child(2) {
    text-align: right;
}


.content h4 {
    font-size: 1.3rem;
}

.underline {
    position: relative;
    text-decoration: none;
  }

.underline::after {
    content: "";
    position: absolute;
    right: -2%;
    bottom: -2px; /* Anpassen der vertikalen Position */
    width: 104%; /* Anpassen der Breite */
    height: 1px; /* Anpassen der Dicke */
    background-color: #000; /* Anpassen der Farbe */
}


.pagination {
    padding: 10px 0;
    display: flex;
    justify-content: center;

}
.pagination .pagibutton {
    text-decoration: none;
    width: 100px;
    color: #fff;
    background-color: var(--grey-1);
    border: 1pt solid var(--grey-3);
    padding: 0 1px;
    margin: 0 1px;
    box-sizing: border-box;
  }

  
  .pagination .pagibutton a {
    color: #fff;
  }