@font-face {
    font-family: "Quicksand";
    src: url("./Quicksand.ttf") format("truetype"), url("../Quicksand.ttf") format("truetype");
}
@font-face {
    font-family: "Raleway";
    src: url("./Raleway.ttf") format("truetype"), url("../Raleway.ttf") format("truetype");
}
:root {
    --navigation-bg: linear-gradient(#4c5a4d 0, rgba(76, 90, 77, 0.89) 5px 100%);
}

html, body {
    background-attachment: fixed;
    margin: 0px;
    background: #4c5a4d;
    /* overflow: hidden; */
    background-position: center top;
    overscroll-behavior: none;
}

.navigation {
    height: 60px;
    position: fixed;
    top: 0px;
    left: 0px;
    min-width: 100vw;
    z-index: 1;
    box-shadow: 0px 0px 5px 0px black;
    background: var(--navigation-bg);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -ms-backdrop-filter: blur(3px);
}

.typeform-widget iframe {
    transform: unset !important;
}

.navigation ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    min-height: 60px;
    position: fixed;
    z-index: 3;
    width: 100%;
}

.navigation ul li {
    height: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: inline-block;
}

.navigation ul li a {
    padding: 20px;
    font-family: "Quicksand";
    text-decoration: none;
    color: white;
    cursor: pointer;
    line-height: 20px;
}

.navigation ul li a:hover:not(.selected) {
    background-color: rgba(0, 0, 0, 0.5);
}

.navigation .selection {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    transition: all 0.3s;
}

main {
    padding: 10px;
    /* overflow: scroll;
    height: calc(100vh - 80px);
    width: calc(100vw - 20px); */
    margin-top: 60px;
    background: linear-gradient(45deg, rgb(255, 255, 255), rgb(207, 248, 210));
    background-attachment: fixed;
    padding-bottom: 10vh;
}

h1, h2, label {
    font-family: Quicksand;
}

h2 {
    font-size: 70px;
}

form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.input-container {
    display: flex;
    text-align: left;
    margin-top: 10px;
}

.input-container label {
    width: 25%;
}

.input-container input, .input-container textarea {
    width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background: white;
    font-family: Raleway;
}

.input-container textarea {
    resize: none;
    overflow: scroll;
    height: 200px;
}

form input[type="submit"], #contact button {
    width: 100%;
    border-radius: 1000000px;
    width: 100%;
    border: 1px solid black;
    background: white;
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    font-family: Quicksand;
}

h1 {
    margin-top: 0px;
    font-size: 40px;
}

p {
    font-family: Raleway;
}

.bg {
    height: 200px;
    width: 100vw;
    margin: -10px;
    background-image: url(smallCoverArt.png);
    color: white;
    background-attachment: fixed;
    background-position: center top;
}
.bg.tall {
    /* height: calc(100vh - 60px); */
    background-position: center top;
    background-attachment: scroll;
    /* background-size: cover; */
    /* margin-top: calc(100vh - 260px); */
    position: sticky;
    position: -webkit-sticky;
    bottom: 0px;
    display: inline-block;
    align-self: flex-end;
}
.bg-container {
    /* padding-top: calc(100vh - 260px); */
    height: 100vh;
    /* box-sizing: border-box; */
    display: flex;
}

.bg h1 {
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    text-align: center;
    /* vertical-align: middle; */
    height: 100%;
    line-height: 200px;
}

.tiktok-embed {
    padding: 5px;
    background-color: white;
    box-shadow: 0 0 10px 10px white;
}
/* #contact {
    margin-bottom: calc(100vh - 60px);
} */
@media (max-width: 30rem) {
    .navigation {
        display: none;
    }
    main {
        /* min-height: calc(100vh - 20px); */
        margin-top: 0px;
    }
    #contact {
        margin-bottom: 0;
    }
}
#listen a img {
    width: 120px;
}
#listen a {
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transform: scale(1);
    transition: transform ease-in-out 0.1s;
    font-family: Quicksand;
    font-weight: 700;
    text-decoration: none;
    color: black;
}
a.listen-text {
    text-decoration: none;
    color: black;
}
a.listen-text::after {
    content: "\0279E";
    padding-left: 10px;
    transform: translateX(0);
    transition: transform ease-in-out 0.1s;
    display: inline-block;
}
#listen a:not(.listen-text):hover, #listen a:not(.listen-text):focus {
    transform: scale(1.05) rotateZ(1deg);
}
#listen a:nth-of-type(even):not(.listen-text):hover, #listen a:nth-of-type(even):not(.listen-text):focus {
    transform: scale(1.05) rotateZ(-1deg);
}
a.listen-text:hover::after, a.listen-text:focus::after {
    transform: translateX(5px);
}
section {
    text-align: center;
    margin-bottom: 5vh;
}
.typeform-sidetab-button {
    box-shadow: 0px 0px 5px 0px black !important;
    transition: box-shadow ease-in-out 0.2s;
}
.typeform-sidetab-wrapper {
    box-shadow: 0px 0px 5px 0px black !important;
    border-radius: 8px 0 0 8px
}
.open .typeform-sidetab-wrapper {
    overflow: hidden;
}
:not(.open) .typeform-sidetab-button:hover, :not(.open) .typeform-sidetab-button:focus {
    box-shadow: 0px 0px 10px 0px black !important;
}
.open .typeform-sidetab-button, .open .typeform-sidetab-button:hover, .open .typeform-sidetab-button:focus {
    box-shadow: 0px 0px 5px 0px black !important;
}
.to-top-btn-container {
    position: absolute;
    left: 0;
    top: 100vh;
    width: 100vw;
    height: calc(100% + 17px);
    z-index: 9999999;
    margin: 0;
    pointer-events: none;
}
.to-top-btn {
    pointer-events: all;
    position: sticky;
    top: calc(100vh - 50px);
    left: 100vh;
    width: 0;
    height: 0;
    background: black;
    display: inline-block;
    border-top-left-radius: 50%;
    padding: 25px;
    color: white;
    text-decoration: none;
    cursor: pointer;
}
.to-top-btn-content {
    transform: translate(-50%, -50%);
    display: inline-block;
    transition: transform ease-in-out 0.1s;
}
.to-top-btn:hover:not(:active) .to-top-btn-content {
    transform: translate(-50%, -50%) translateY(5px);
}
.to-top-btn:active .to-top-btn-content {
    transform: translate(-50%, -50%) translateY(-5px);
}