body{ background-image: url("img/carpet.jpg"); background-attachment: fixed; background-position: center; background-size: 100%; font-family: 'Roboto Mono', monospace; } header{} .title {text-align: center; font-size: 45px; margin-top: 50px; color: black; font-weight: 700; margin-left: 20px; margin-right:20px; } .title a {color:black; text-decoration: underline;} a{text-decoration: none; } .title span{ background-color: rgba(255,255,255,.9); } .subtitle{font-size: 50px; text-align: center; font-weight: 100; color: black; } .shoes{font-size: 20px; font-style: normal;} .subtitle span{ background-color: rgba(255,255,255,.8); } .instructions span{background-color: rgba(0,0,20,.85)} .instructions{ max-width: 300px; line-height: 22px font-size: 30px; margin-bottom: 20px; font-weight: 100; color: white; font-style: italic;} audio{ width: 100%; margin-bottom: -5px;} .wrap{width: 100%; } .transcript{ width:40%; margin:auto; height:5500px; overflow: hidden; border: 4px solid; } .title-transcript{ margin-top: 0; margin-bottom: 0; padding: 35px; color: white; background-color: rgba(0,0,20,.9); font-weight: 500; font-size: 18px; } .title-transcript a{ text-decoration: none; color: white; } .transcript embed{ background-color: rgba(255,255,255,.9); height:5500px; width: 100%; } embed::-webkit-scrollbar-track { /*border: 1px solid black; */ background-color: #F5F5F5; } embed::-webkit-scrollbar { width: 3px; background-color: #F5F5F5; } embed::-webkit-scrollbar-thumb { background-color: #000000; } /*////////mobile///////*/ @media screen and (max-width:767px) { .title{font-size: 35px;} .transcript{ width:90%; height: 500px; } }/*end of 767*/