/*
======================================================
MannaLibrary.net (Image viewer and Info section)
style.css
======================================================
*/


/* ---------------------------------------------------
   Reset
--------------------------------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    scrollbar-gutter: stable;
}
/* ---------------------------------------------------
   Top navigation
--------------------------------------------------- */

.top-navigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:15px;
}

.top-navigation a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#333333;
    padding:4px;
    border:2px solid #2bc8c8;
    border-radius:8px;
}

.top-navigation img{
    display:block;
    width:60px;
    height:auto;
}

/* ---------------------------------------------------
   Body
--------------------------------------------------- */

body{

    background:#181818;

    color:#eeeeee;

    font-family:Arial, Helvetica, sans-serif;

    line-height:1.5;

}

h1{

    margin-bottom:8px;
    color:#eeeeee;
    font-size:2rem;

}

.centered {
    text-align:center;
}




.info-box{
    background:#333333;
    padding:18px;
    margin-bottom:18px;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
}

.info-box h2{
    font-size:18px;
    margin-top:0;
    margin-bottom:10px;
    color:#d8d8d8;
}

.info-box p{
    color:#bdbdbd;
}

.info-box a:not(.button-link){
    color:#8ccccc;
}

.info-box a:not(.button-link):hover{
    color:#50e2e2;
}

.info-box p:last-child{
    margin-bottom:0;
}

/* ---------------------------------------------------
   Links
--------------------------------------------------- */

a{

    color:#8ccccc;

    text-decoration:none;

    transition:color 0.2s;

}

a:hover{

    color:#50e2e2;

}


/* ---------------------------------------------------
   Header
--------------------------------------------------- */

header{

    background:#202020;

    border-bottom:2px solid #2bc8c8;

    text-align:center;

    padding:25px;

}



header p{

    color:#8ccccc;

}


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

main{

    max-width:1200px;

    margin:auto;

    padding:30px;

}

main p{

    color:#d0d0d0;

}


/* ---------------------------------------------------
   Headings and page spacing
--------------------------------------------------- */

main > h1{

    margin-top:0px;

    margin-bottom:8px;

}

main > section{

    margin-top:32px;

}

main > h1 + section{

    margin-top:0;

}

main section h2{

    margin-bottom:8px;

}

main section p + p{

    margin-top:4px;

}

.about-page{
    max-width:1120px;
}

.about-page h1{

    margin-top:1px;

    margin-bottom:8px;

}

.project-links{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

    margin-top:10px;

    margin-bottom:28px;

}

.about-page ul{

    padding-left:22px;

    margin-top:12px;

    margin-bottom:24px;

}


/* ---------------------------------------------------
   Grid
--------------------------------------------------- */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}


/* ---------------------------------------------------
   Card
--------------------------------------------------- */

.card{

    background:#333333;

    border:2px solid #252525;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    transition:0.2s;

}

.card:hover{

    border-color:#2bc8c8;

    transform:translateY(-4px);

}

.card img{

    width:100%;

    display:block;

}

.card h3{

    text-align:center;

    padding:15px;

    color:#b8b8b8;

}


/* ---------------------------------------------------
   Buttons
--------------------------------------------------- */

button,
.back-button,
.button-link{

    background:#2bc8c8;

    color:#111111;

    border:none;

    border-radius:8px;

    padding:12px 22px;

    cursor:pointer;

    min-width:130px;

    font-size:1rem;

    margin:10px 6px;

    display:inline-block;

    text-align:center;

    text-decoration:none;

}

button:hover,
.back-button:hover,
.button-link:hover{

    background:#50e2e2;

    color:#111111;

}

.back-button + .button-link{

    display:block;

    width:fit-content;

}


/* ---------------------------------------------------
   Days
--------------------------------------------------- */

.days{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(70px,1fr));

    gap:10px;

    margin-top:20px;

}

.day{

    background:#2a2a2a;

    border:1px solid #444444;

    border-radius:8px;

    text-align:center;

    padding:14px;

    cursor:pointer;

    transition:0.2s;

}

.day:hover{

    border-color:#2bc8c8;

}


/* ---------------------------------------------------
   Image Viewer
--------------------------------------------------- */

.viewer{

    text-align:center;

}

.viewer img{

    max-width:100%;

    max-height:62vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:12px;

    border:2px solid #333333;

}


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

footer{

    text-align:center;

    color:#999999;

    padding:25px;

}

.about-link{

    display:inline-block;

    margin-bottom:0.75rem;

}

.footer-logo{

    display:block;

    width:180px;

    max-width:45vw;

    height:auto;

    margin:28px auto 16px;

}

footer small{

    display:block;

}


/* ---------------------------------------------------
   Responsive fine-tuning
--------------------------------------------------- */

@media (max-width:768px){

    header{

        padding:20px 18px;

    }

    main{

        padding:24px 18px;

    }

    button,
    .back-button,
    .button-link{

        padding:12px 16px;

        min-width:72px;

    }

    .footer-logo{

        display:none;

    }

}

@media (max-width:480px){

    header{

        padding:16px 14px;

    }

    main{

        padding:20px 14px;

    }

    main section h2{

        margin-bottom:8px;

    }

    button,
    .back-button,
    .button-link{

        margin:8px 4px;

    }

    footer{

        padding:18px 12px;

    }

}





/* Standard størrelse for PC/skrivebord */
.mobil-lite-bilde {
    width:400px;
    max-width:100%;
    height:auto;
}

/* Mindre størrelse på mobil */
@media (max-width:480px){

    .mobil-lite-bilde {
        width:80%;
        max-width:350px;
        height:auto;
    }

}