/*=============================================================================================================*/
/*  GLOBAL                                                                                                     */
/*=============================================================================================================*/
    
    *,
    *:before,
    *:after { 
        margin: 0;
        padding: 0;
        
        --colorLIGHT: #9cceee;
        --colorDARK : #09303c;
        --colorBACKG: #dff2ff;
        --colorHOVER: #df7621;

    }
    
    a {
        color: var(--colorLIGHT);
        text-decoration: none;
        
        transition: all .24s ease-out;
        
        --nav-link-color: #9cceee;
        --nav-link-color-hover: #D73A42;
    }
    
    a:hover {
        color: var(--colorHOVER);
    }
    
    @media (any-pointer:fine) { 
  
        .mobile {
            display: none;
        }
        
        .desktop {
            display: inline-block;
        }
    }
    
    @media (any-pointer:coarse) {
  
        body {
            zoom: 2.0;
        }
        
        .mobile {
            display: inline-block;
        }
        
        .desktop {
            display: none;
        }
    }
    

    
/*=============================================================================================================*/
/*  HEADER                                                                                                     */
/*=============================================================================================================*/
  
    body {
        background-color: var(--colorDARK);
    }
    
    body > header {
        height: auto;
        max-width: 100%;
        overflow: hidden;
        
        border-top:    1px solid var(--colorLIGHT);
        border-bottom: 1px solid var(--colorLIGHT);
        
        margin-top: 115px;
        
        background-image: url("https://udvdrpsdz.hr/sredstvo/slika/zaglavlje.webp");
        background-repeat: no-repeat;
        
        display: flex;
        align-items: center;
    }
    
/*=============================================================================================================*/

    body > header > div {  
        margin-left: auto;
        margin-right: auto;
        
        margin-top: auto;
        margin-bottom: auto;
        
        display: flex;
        
        padding-top: 45px;
        padding-bottom: 45px;
    }
    
    @media (any-pointer:fine) { body > header > div { 
        padding-left: 54px;
        padding-right: 54px;
    } }
    
    @media (any-pointer:coarse) { body > header > div { 
        padding-left: 0px;
        padding-right: 0px;
        
        margin-left: auto;
        margin-right: auto;
    } }
    
    body > header img.logo.left {
        width: 126px;
        height: 126px;
        
        margin-top: -4px;
    }
    
    body > header img.logo.right {
        width: 100px;
        height: 126px;
    }
    
    body > header .middle {
        font-family: "Times New Roman",Times,serif;
        font-size: 26px;
        font-weight: 600;
        
        color: var(--colorLIGHT);
        line-height: 1.75;
        letter-spacing: 0px;
        
        text-align: center;
        
    }
    
    @media (any-pointer:fine) { body > header .middle { 
        padding-left: 80px;
        padding-right: 80px;
    } }
    
    @media (any-pointer:coarse) { body > header .middle
     { 
        padding-left: 20px;
        padding-right: 25px;
    } }
/*
    body > header span.middle {
*/
    body > header span {
    }
    
/*
    body > header span.below {
        font-family: "Times New Roman",Times,serif;
        font-size: 26px;
        font-weight: 600;
        
        color: var(--colorLIGHT);
        text-align: center;
        line-height: 1.75;
        letter-spacing: 0px;
        
        margin-top: 156px;
    }
*/
    
/*
    @media (max-width: 56.1875em) {
        body > header span.middle {
            display: none;
        }
    
        body > header span.below {
            display: auto;
            margin-left: -16px;
        }
        
        body > header img.logo.left {
            margin-right: -36px;
        }
        
        body > header img.logo.right{
            margin-left: -36px;
        }
    }
    
    @media (min-width: 56.1875em) {
        body > header span.middle {
            display: auto;
        }
        body > header span.below {
            display: none;
        }
    }
*/
    
/*=============================================================================================================*/
/*  MENU                                                                                                       */
/*=============================================================================================================*/
  
    nav > menu {
        list-style: none;
        display: flex;
        
        font-family: Ubuntu, Arial, sans-serif;
        font-size: 18px;
        color: var(--colorLIGHT);
        
        padding-left: 54px;
        padding-right: 54px;
        
        padding-top: 24px;
        padding-bottom: 24px;
        
        max-width: 1200px;
        margin-left:  auto;
        margin-right: auto;
    }
    
    nav > menu > li {
        padding-left: 0px;
        padding-right: 16px;
    }
    
    nav {
        border-bottom: 1px solid var(--colorLIGHT);
    }
    
/*=============================================================================================================*/
/*  POSTS                                                                                                      */
/*=============================================================================================================*/

    main article {
        padding-left: 92px;
        padding-right: 92px;
        
        padding-bottom: 90px;
        
        margin-left:  auto;
        margin-right: auto;
        
        max-width: 1200px;
        
        background-color: var(--colorBACKG);
    }
    
    main article:first-child {
        padding-top: 90px;
    }
    
    main article {
        font-family: Ubuntu, Arial, sans-serif;
        color: var(--colorDARK);
    }
    
/*-------------------------------------------------------------------------------------------------------------*/

    main article header time {
        font-style: italic;
        margin-top: 16px;
    }
    
    main article header h2 {
        margin-top: 24px;
        margin-bottom: 24px;
        
        font-size: 32px;
    }
    
    main article main {
        font-size: 18px;
        
        line-height: 2.0;
    }
    
    main article header a , 
    main article header a:hover {
        color: var(--colorDARK);
    }
    
/*-------------------------------------------------------------------------------------------------------------*/
/*  the article in the actual posts                                                                                           */
/*-------------------------------------------------------------------------------------------------------------*/

    main > article > main > p {
        margin-top: 24px;
    }

    main > article > main > p:first-child {
        margin-top: 0px;
    }
    
    main > article:first-child {
        padding-top: 54px;
    }
    
    main > article > main {
        padding-bottom: 54px;
    }

/*-------------------------------------------------------------------------------------------------------------*/

    table {
        border-collapse: separate; 
        border-spacing: 10px;
    }
    
    table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
    }
    
    table > tbody > tr > td {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        
        padding: 4px;
        
        height: 142px;
    }
    
    table > tbody > tr > td > a {
        border-radius: 12px;
        display: block;
        height: 100%;
        width: 100%;
    }
    
    table > tbody > tr > td > a > img {
        border-radius: inherit;
        object-fit: cover;
        display: block;
        height: 100%;
        width: 100%;
    }

/*=============================================================================================================*/
/*  INFO                                                                                                     */
/*=============================================================================================================*/

    article#info {
        padding: 92px;
        
        padding-top: 72px;
        padding-bottom: 72px;
    }
    
    article#info > p {
    
        margin-top: 32px;
    }
    
    article#info > p:first-child {
        margin-top: 0px;
    }

/*=============================================================================================================*/
/*  DOCUMENTS                                                                                                     */
/*=============================================================================================================*/

    article#docs {
        padding: 92px;
        
        padding-top: 52px;
        padding-bottom: 52px;
    }
    
    article#docs > p {
        font-size: 18px;
        
        margin-top: 32px;
    }
    
    article#docs > p:first-child {
        margin-top: 0px;
    }
    
    article#docs a {
        color: var(--colorDARK);
        
        padding-top: 12px;
        padding-bottom: 12px;
        
        display: inline-block;
    }
    
    article#docs a:hover {
        color: var(--colorHOVER);
    }
    
    article#docs hr {
        border: none;
        
        border-top: 1px solid var(--colorLIGHT);
        border-bottom: 1px solid var(--colorBACKG);
        
        margin-left: -24px;
        margin-right:  -24px;
    }
    
/*=============================================================================================================*/
/*  FOOTER                                                                                                     */
/*=============================================================================================================*/

    body footer {
        border-top: 1px solid var(--colorLIGHT);
        
        padding-top: 54px;
        padding-bottom: 54px;
        
        padding-left: 54px;
        padding-right: 54px;
        
        font-family: Ubuntu, Arial, sans-serif;
        font-size: 15px;
        color: var(--colorLIGHT);
        
        text-align: center;
        line-height: 25px;
        
        line-height: 1.75;
    }
    
    footer img.logo {
        width:  126px;
        height: 126px;
        
        display: inline; 
        margin-top:    calc(20px + 8px);
        margin-bottom: calc(20px + 0px);
        
        text-align: center;
        display: inline;
    }

/*=============================================================================================================*/