/* ========================================= */
/* Body */
/* ========================================= */
html,
body {
    margin: 0;
    padding: 0;
}

body {

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


    min-height: calc(100vh - 4rem);

    background-image: url("assets/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transform: translateY(-30px);

    text-align: center;

    gap: 1.4rem;

    padding: 2rem;

}


/* ========================================= */
/* Greeting */
/* ========================================= */

#greeting {

font-size: 2.5rem;
font-weight: 600;

}

/* ========================================= */
/* Clock */
/* ========================================= */

#clock {

font-size: 1.4rem;

font-weight: 400;

letter-spacing: .08em;

color: rgba(255,255,255,.88);

margin-top: -1rem;

margin-bottom: .4rem;

}

/* ========================================= */
/* Weather */
/* ========================================= */

#weather {

font-size: 1rem;

font-weight: 300;

letter-spacing: .04em;

color: rgba(255,255,255,.82);

margin-top: -.35rem;

}

/* ========================================= */
/* Search */
/* ========================================= */

#search-section {

width: 100%;
display: flex;
justify-content: center;
margin: 2rem 0;

}

#search-form {

width: min(680px, 90%);

}

#search-input {

width: 100%;
padding: 0.95rem 1.25rem;

border-radius: 999px;

border: 1px solid rgba(255,255,255,.35);

background: rgba(255,255,255,.22);
backdrop-filter: blur(18px);

color: white;

font-size: 1rem;

outline: none;

transition:
background .25s ease,
border-color .25s ease,
box-shadow .25s ease;

}

#search-input::placeholder {

color: rgba(255,255,255,.60);

}

#search-input:focus {

background: rgba(255,255,255,.28);

border-color: rgba(255,255,255,.45);

box-shadow: 0 0 18px rgba(255,255,255,.12);

}


/* ========================================= */
/* Sections */
/* ========================================= */

section {

    width: min(900px, 90vw);

}


/* ========================================= */
/* Footer */
/* ========================================= */

footer {

    display: flex;

    justify-content: center;
    align-items: center;

    margin-top: 2rem;

}


/* ========================================= */
/* Home Button */
/* ========================================= */

#home-button {

position: absolute;

top: 2rem;
left: 2rem;

text-decoration: none;

font-size: 1.6rem;

opacity: .75;

transition: opacity .2s ease;

}

#home-button:hover {

opacity: 1;

}


/* ========================================= */
/* Bookmark Grid */
/* ========================================= */

#bookmark-grid a {

display: inline-block;

text-decoration: none;

color: white;

font-size: 1rem;

padding: .55rem 1.2rem;

border-radius: 12px;

background: rgba(255,255,255,.10);

backdrop-filter: blur(12px);

transition:
background .25s ease,
transform .15s ease;

}

#bookmark-grid a:hover {

background: rgba(255,255,255,.18);

transform: translateY(-2px);

}

#bookmark-grid a:focus {

outline: 2px solid rgba(255,255,255,.6);

outline-offset: 2px;

}