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

.background {
  background: gray url("./the-perfect-answer-ep-cover.jpeg") repeat 0 0;
  background-size: 30%;
  width: 100%;
  margin: 0;
  text-align: center;
  height: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  -webkit-animation: slide 20s linear infinite;
  animation: slide 20s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.background::before {
    transform: rotate(30deg);
}

.background h1 {
  font-family: sans-serif;
  font-size: 120px;
  color: white;
  margin-top: 80px;
}

.background p a {
  font-family: sans-serif;
  font-size: 110px;
  color: white;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -512px -512px; }
}

/* content */
#logo {
    width: 100%;
    height: 100%;
    margin-top: -5px;
    margin-bottom: -40px;
}

#logosmall {
    width: 10%;
    height: 10%;
    margin-top: -5px;
    margin-bottom: -40px;
}

body {
  color: #fff;
  font-family: arial, sans-sarif;
  background-color: #333;
  text-align: center;
}

h3 {
    margin-top: -15px;
    padding-bottom: 20px;
    font-style: italic;
}

#content {
    width: 80vh;
    background-color: rgb(245, 245, 220, 0.2);
    display: block;
    margin-top: 50px;
    margin-bottom: 50px;
    backdrop-filter: blur(15px);
    max-width: 80vw;
    font-weight: bold;
}

#intro {
    margin-bottom: 120px;
}

#blurb {
    font-style: italic;
    font-size: 26px;
}

#insta a {
    color: rgb(255,194,95);
}

#spotify a {
    color: rgb(123,192,106);
}

#youtube a {
    color: rgb(242,54,71);
}

#tiktok a {
    color: rgb(57, 57, 57);
}

#apple a {
    color: rgb(255, 62, 173);
}

#bandcamp a {
    color: rgb(3,0,155);
}

#etc a {
    color: rgb(219,155,215);
}

#otherlinks {
    padding-top: 80px;
    margin-bottom: 120px;
}

#bio {
    color: white;
}

#speaker {
    padding: auto;
	height: 200px;
	width: 300px;
    padding: 0;
    margin: 0;
    object-fit: scale-down;
	position: relative;
	overflow: hidden;
	display: inline-block;
    margin-bottom: 20px;
    color: white;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;

    filter: brightness(0) invert(100%);

    &:hover {
        cursor: pointer;
    }
}

.mute {
    filter: brightness(0) invert(80%) !important;
}


/* bio page */
#biography {
    display: block;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: -40px; */
    padding: 0px;
    margin-bottom: -10px;
}

#biography-container {
    width: 85%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#biography-text {
    color:#333;
    width: 100%;
    text-align: left;
    text-wrap: initial;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
}

#home {
    /* padding-top: 100px; */
    color: white;
    margin-bottom: 160px;
}

#cat {
    display: block;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: -40px; */
    padding: 0px;
    margin-bottom: -10px;
}

#catimage {
    width: 90%;
}

#presslinks {
    margin: 50px;
}

#presslinks a {
    font-size: 20px;
}