@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Italianno&display=swap');
/*

    #4F5D37 - Green
    #D0824C - Orange

*/


.tinted-background {
    background-image: linear-gradient(#4F5D3780, #4F5D3780),
                    url('../img/strand.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60vh; /* Full screen height */
}

* {
    margin: 0;
    padding: 0;

    /* CSS HEX */
    --dark-moss-green: #4f5d37ff;
    --indian-red: #bd5c58ff;
    --cinnabar: #e05d3dff;
    --caramel: #d0824cff;
    --platinum: #e1e2e6ff;

    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
}

* a {
    text-decoration: none;
}

html {
    background-color: var(--dark-moss-green);
    color: var(--caramel);
}

.top-wrapper {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 4rem;
    height: 8.5rem;
    width: 100vw;
}

.bottom-sheet {
    text-align: center;

    padding-top: 2rem;

    position: fixed;
    bottom: 0;
    left: 0;
    height: 40vh;
    min-height: 15rem;
    width: 100%;

    background-color: var(--platinum);
}

.social-icons {
    position: absolute;

    bottom: 2.5rem;
    left: 0;
    right: 0;
    margin: auto;
}

/* Desktop specifc below */
@media only screen and (min-width: 800px) {

    .bottom-sheet {
        height: 25vh;
    }

    .tinted-background {
        height: 85vh; /* Full screen height */
    }

    .social-icons {
        width: 25vw;
    }

    .bottom-sheet .info {
        text-align: left;

        margin-left: 5rem;
        position: absolute;
        top: 50%;
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .bottom-sheet h1 {
        font-size: 2.75em;
    }

    .bottom-sheet h2 {
        font-size: 2.25em;
    }

    .bottom-sheet h3 {
        font-size: 1.75em;
    }

    .bottom-sheet .social-icons {
        text-align: right;
        height: 3rem;

        margin-right: 5rem;
        position: absolute;
        top: 25%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .top-wrapper {
        text-align: start;
        position: absolute;
        left: 5rem;
        margin: 0;
        margin-top: 4rem;
    }
}

/* For extra thin phones (e.g. iPhone X) */
@media only screen and (max-width: 400px) {
    .bottom-sheet h1 {
        font-size: 2.25em;
    }

    .bottom-sheet h2 {
        font-size: 1.75em;
    }

    .bottom-sheet h3 {
        font-size: 1.5em;
    }
}


.italianno {
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
}

.crimson {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}

.text-green {
    color: var(--dark-moss-green);
}

.text-orange {
    color: var(--caramel);
}