body{ background-image: url("img/carpet.jpg"); background-attachment: fixed; background-position: center; background-size: 100%; font-family: 'Roboto Mono', monospace; margin: 0 !important; } @font-face { font-family: 'Roboto Mono', monospace; src: url(RobotoMono-Regular.ttf); } header{ height: 400px; background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(black, transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(black, transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(black, transparent); /* For Firefox 3.6 to 15 */ background: linear-gradient(black, transparent); /* Standard syntax (must be last) */ margin:-10px; padding-top: 60px; } .title { padding-top: 40px; text-align: center; font-size: 70px; color: white; margin:auto; font-weight: 500;; padding: 6px; } .title a { color:black; text-decoration: underline;} a{ text-decoration: none;} .instructions{ text-align: center; max-width: 39%; line-height: 26px; font-size: 20px; padding: 10px; margin: auto; font-weight: 500; color: white; /*background-color: rgba(0,0,20,.85);*/} .wrap{width: 100%; } .transcript{ width:40%; margin:auto; height:3400px; 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:3400px; width: 100%; } footer{ height: 500px; background: black; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(transparent, black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(transparent, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(transparent, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(transparent, black); /* Standard syntax (must be last) */ margin:-10px; padding: 20px; } footer p { color: white; max-width: 70%; padding-top: 40px; margin:auto; line-height: 1.5em; font-size: 26px;} .subtitle{ margin-top: 250px; max-width: 80%; margin:auto; text-align: center; font-size: 46px; color: white; font-weight: 700;; } .subtitle a{ text-decoration: none; color: white; } 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: 30 px; max-width: 90%;} .instructions{max-width: 90%;} .transcript{ margin-top: 50px; width:90%; height: 3900px; } .transcript embed{height: 3900px;} .header{margin-bottom: 20px;} .footer{height: 600px;} .subtitle{ margin-top: 40px; font-size: 26px;} footer p {max-width: 80%; font-size: 15px;} }/*end of 767*/