/*
======================================================
Manna Library HTML v0.2
style.css
======================================================
*/


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

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


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

body{

    background:#181818;

    color:#eeeeee;

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

    line-height:1.5;

}


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

header{

    background:#202020;

    border-bottom:2px solid #2bc8c8;

    text-align:center;

    padding:25px;

}

header h1{

    margin-bottom:8px;

    font-size:2rem;

}

header p{

    color:#8ccccc;

}


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

main{

    max-width:1200px;

    margin:auto;

    padding:30px;

}


/* ---------------------------------------------------
   Headings
--------------------------------------------------- */

h2{

    margin-bottom:25px;

}


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

.grid{

    display:grid;

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

    gap:25px;

}


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

.card{

    background:#252525;

    border:2px solid #333333;

    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;

}


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

button{

    background:#2bc8c8;

    color:#111111;

    border:none;

    border-radius:8px;

    padding:12px 22px;

    cursor:pointer;

    font-size:1rem;

    margin:10px 6px;

}

button:hover{

    background:#50e2e2;

}


/* ---------------------------------------------------
   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{

    width:100%;

    max-width:1280px;

    border-radius:12px;

    border:2px solid #333333;

}


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

footer{

    text-align:center;

    color:#999999;

    padding:25px;

}