@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --dark-green: #053306;
    --gray: #6e7a6c;
    --dark-blue: #00354f;
    --blue: #006481;
    --beige: #fffcea;
    --tan: #eae6cb;
    scroll-behavior: smooth;
    scroll-padding-top: 2.5rem;
    overflow-x: hidden;
}

h1, h1 a, h3, h5 {
    font-family: Oswald, sans-serif;
}

h2, h4, h6, p, a, div, span {
    font-family: Lato, sans-serif;
}

header {
    width: 100%;
    background-image: -webkit-linear-gradient(#083421, #4a4c0d);
    background-image: linear-gradient(var(--dark-blue), var(--dark-green));
    filter: drop-shadow(0px 7px 4px #003311);
}

nav ul {
    display: flex;
    gap: 1.2rem;
    justify-content: space-between;
    width: fit-content;
    padding-right: 4rem;
}

nav li {
    list-style: none;
    cursor: pointer;
}

nav li a {
    color: var(--beige);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem;
    transition: all ease 250ms;
}

.hero-img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    filter: brightness(0.65);
}

.hero-text {
    margin: 1.5rem;
}

.inner {
    width: 80%;
    margin: auto;
}

.col-70 {
    width: auto;
}

.project-list div {
    width: 100%;
}

.share-bar {
    margin: 2rem 0.5rem;
    display:flex;
    gap:.5rem;
    align-items:center;
    flex-wrap:wrap
}

.share-btn,.share-link {
    display: flex;
    gap: 0.25rem;
    border:1px solid #ddd;
    padding:.5rem .75rem;
    border-radius:.5rem;
    background:#fff;
    cursor:pointer;
    text-decoration:none;
    font:600 14px/1 system-ui
}

.share-btn:hover,.share-link:hover {
    background:#f5f5f5
}

#ryan-pic {
    box-shadow: #003311 0 3px 10px;
    width: 70%;
}

.content p {
    margin: 0;
    width: 80%;
}

.socials {
    width: 80%;
    margin: 2rem auto;
}

.socials a {
    text-decoration: none;
    color: inherit;
    font-size: clamp(0.8rem, 12vw, 2.5rem);
    padding-right: 1.25rem;
    transition: all ease 250ms;
}

.socials a:hover {
    color: var(--blue);
    filter: drop-shadow(0 2px var(--gray));
    transition: all ease 250ms;
}

@media screen and (width >= 769px) {
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    nav li a:hover, h1 a:hover {
        color: var(--tan);
        filter: drop-shadow(0px 6px 6px var(--gray));
        transition: all ease 250ms;
    }

    #hero {
    position: relative;
    width: 100%;
    height: 98vh;
    filter: brightness(0.8);
    }

    .hero-text {
        margin: unset;
        position: absolute;
        color: var(--beige);
        font-weight: bold;
        font-size: clamp(1.35rem, 2vw, 3rem);
        inset: 50%;
        width:max-content;
        z-index: 500;
        user-select: none;
        cursor: default;
    }

    #ryan-pic {
    width: 36%;
    margin: -1rem auto 4rem auto;
    }

    .col-80 {
        width: 80% !important;
    }

    section {
        min-height: 100vh;
    }

    section > .inner {
        margin: 0 auto;
        width: 85vw;
        padding-top: 2rem;
        display: flex;
        gap: 1.5rem;
    }

    .left {
        position: relative;
        width: 60%;
        padding: 0;
    }
    
    .left img {
        display: block;
        max-width: 75%;
    }

    .right {
        width: 65ch;
    }

    .project-list {
        display: flex;
        flex: 1 1 50%;
        flex-wrap: wrap;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .project-list div {
        max-width: 45%;
        position: relative;
    }

    .col-70 {
        min-width: 70%;
    }

    .content p {
        width: unset;
    }

    .socials {
        margin: 3rem 0;
        width: unset;
    }

    .socials a {
        font-size: clamp(0.8rem, 8.5vw, 3rem);
    }

    .hymn-features li {
        font-size: 0.9rem;
    }
}



h1 a {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-left: 3rem;
    padding: 1rem;
    user-select: none;
    color: var(--beige);
    text-decoration: none;
    transition: all ease 250ms;
}

h2 {
    font-size: 3.25rem;
    cursor: default;
    user-select: none;
    color: var(--dark-green);
    position: relative;
    display: inline-block;
}

.left h2::before, article h2::before {
    content: "";
    height: 4px;
    width: 100%;
    background-color: var(--blue);
    position: absolute;
    top: -3px;
}

main {
    min-height: 100vh;
}

.about-ryan, #hymns .inner .right {
    margin-top: 4rem;
}

.no-blue-link {
    color: inherit;
    font-weight: bold;
    transition: all ease 300ms;
}
.no-blue-link:hover {
    background-color: var(--beige);
    transition: all ease 300ms;
}

#hymns {
    background-color: var(--beige);
}

#hymns .inner .right {
    width: 70vw;
    display: flex;
    gap: 6rem;
    font-size: 1.15rem;
}

.hymn-list {
    margin-bottom: 1rem;
    color: var(--dark-green);
}

.hymn-list a, .project-link {
    color: var(--dark-blue);
    transition: all ease 250ms;
}
.hymn-list a:hover, .project-link:hover {
    color: var(--blue);
    transition: all ease 250ms;
}

.project-list div h3 {
    color: var(--dark-blue)
}

footer {
    min-height: 75vh;
    background-image: -webkit-radial-gradient(var(--dark-blue), var(--dark-green));
    background-image: radial-gradient(var(--dark-blue), var(--dark-green));
    color: var(--beige);
    position: relative;
}

footer .inner {
    margin: 0 auto;
    width: 85vw;
    padding-top: 2rem;
}

footer h2 {
    color: var(--beige);
}

footer .content {
    height: calc(100% - 12rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.public-domain {
    position: absolute;
    bottom: 0;
    padding-bottom: 1rem;
}

 .to-top {
    position: fixed;
    right: 2%;
    bottom: 0;
    z-index: 10000;
    height: 40px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    text-transform: uppercase;
    transition: all ease-in-out 400ms;
  }

  .to-top > a {  
    text-decoration: none;
    color: var(--blue);
    font-size: 1.85rem;
    transition: all ease-in-out 300ms;
  }

  .to-top a:hover {
    color: var(--gray);
    opacity: .7;
    transition: all ease-in-out 300ms;
  }

  .visible {
    opacity: 80%;
    transition: all ease-in-out 500ms;
  }