/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Common Styles =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div.content { margin: 0 auto; width: 80%; z-index: 1; } div#article { margin-top: 60px; } div#article div.content { max-width: 700px; color: rgba(0,0,0,.84); } div#article div.content p { font-weight: 400; font-style: normal; font-size: 21px; line-height: 1.58; letter-spacing: -.003em; margin-bottom: 30px; } div#article div.content h2 { font-size: 32px; line-height: 42px; } body { font-family: "San Francisco", "Helvetica Neue", "Helvetica", Arial, Sans-Serif; padding: 0; margin: 0; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Header Text and Graphics =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#header { overflow: hidden; position: relative; width: 100%; display: flex; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%), linear-gradient(265deg, rgba(230,98,177,1) 0%, rgba(230,98,177,1) 20%, rgba(230,98,177,0) 100%), linear-gradient(85deg, rgba(30,190,197,1) 0%, rgba(30,190,197,1) 50%, rgba(30,190,197,0) 100%), linear-gradient(to bottom, rgba(70,215,174,1) 0%, rgba(70,215,174,0) 100%); } div#header div.title { width: 100%; color: #fff; font-size: 90px; font-weight: 400; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); margin-top: 150px; } div#header div.title nowrap { display: inline-block; white-space: nowrap; word-wrap: break-word; } div#header div.title e { display: inline-block; animation: fader calc( var(--child) * 1.5s + 2.0s) ease-in-out calc(var(--child) * -8s) infinite alternate, colorer calc( var(--child) * 0.5s + 1.0s) ease-in-out calc(var(--child) * -0.8s + 1s) infinite alternate; } div#header.no-stars > div.content > div.title e { animation: none; } div.title twitch { display: inline-block; background-size: 100%; background-repeat: no-repeat; width: 84px; height: 90px; } div#header div.subtitle { color: #fff; font-size: 24px; font-weight: 300; margin-top: 40px; margin-bottom: 60px; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } @keyframes fader { 0% { opacity: 1.0 } 88% { opacity: 0.9 } 95% { opacity: 0.7 } 100% { opacity: 0.9 } } @keyframes colorer { 0% { text-shadow: 0px 0px 40px rgba(255,255,255,1.0) } 30% { text-shadow: 0px 0px 6px rgba(255, 55,255,0.2) } 100% { } } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Video Tutorial Area =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#video-tutorial { margin: 60px 0; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Shooting Stars =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#header.no-stars div.shooting-stars { display: none; } div#header div.shooting-stars { position: relative; z-index: 0; } div#header div.shooting-stars div.overlay { position: absolute; top: 0px; left: 0px; width: 100vw; height: 102%; background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 100% ); } div#header div.shooting-stars e { position: absolute; top: calc( var(--child) * 10px + 10px); left: calc( var(--child) * 4.8vw - 0.5vw); display: block; width: 3px; height: 800px; background: linear-gradient( to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 0.6%, rgba( 70,215,174,0.7) 0.7%, rgba( 70,215,174,0.7) 60%, rgba(230, 98,177,0.6) 65%, rgba(230, 98,177,0.2) 70%, rgba(230, 98,177,0.0) 100% ); animation: shooting-star-glimmer calc( var(--child) * 0.1s + 0.7s) ease-in-out calc(var(--child) * -80s) infinite alternate, shooting-star calc( var(--child) * 0.2s + 2.0s) linear calc(var(--child) * -80s) infinite; } @keyframes shooting-star { 0% { transform: translateY( 100%) } 100% { transform: translateY(-1100px) } } @keyframes shooting-star-glimmer { 0% { opacity: 0.0 } 100% { opacity: 1.0 } } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= StreamElements Official Support =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#article div.streamelements-details img { text-align: center; width: 90%; height: 160px; object-fit: cover; object-position: 20% 0 -20% 0; } div#streamelements { position: relative; width: 100%; color: rgba(255,255,255,0.9); font-size: 30px; line-height: 50px; font-weight: 200; padding: 20px 0; background: black; } div#streamelements div.content { display: flex; flex-direction: row; flex-flow: row wrap; text-align: center; align-items: center; justify-content: center; align-content: center; } div#streamelements div.content a:active, div#streamelements div.content a:visited, div#streamelements div.content a { color: rgba(255,255,255,0.9); } div#streamelements div.content div { flex: 1; } div#streamelements div.content div img.logo { height: 40px; width: 180px; } div#streamelements div.content div video.obs-live-logo { width: 320px; height: 160px; } div#streamelements div.content div.details { flex: 3; padding: 0 40px; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Hero Call-out the cool parts about Twitch TV OBS Subtitles =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#hero-call-out { position: relative; width: 100%; height: 370px; color: rgba(255,255,255,0.9); font-size: 30px; line-height: 50px; font-weight: 200; background: linear-gradient(265deg, rgba(98,230,177,1) 0%, rgba(98,230,177,1) 10%, rgba(98,230,177,0) 100%), linear-gradient(85deg, rgba(30,190,197,1) 0%, rgba(30,190,197,1) 50%, rgba(30,190,197,0) 100%), linear-gradient(to bottom, rgba(70,215,174,1) 0%, rgba(70,215,174,0) 100%); } div#hero-call-out div.content a:link, div#hero-call-out div.content a:hover, div#hero-call-out div.content a:visited, div#hero-call-out div.content a:active { color: rgba(255,255,255,0.9); text-decoration: underline; } div#hero-call-out div.content { display: flex; flex-wrap: wrap; height: 100%; text-align: center; align-items: center; justify-content: center; align-content: center; } div#hero-call-out div.content div { flex: 1; padding: 0 40px; max-width: 300px; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Video Tutorial Section =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#video-tutorial { color: rgba(0,0,0,0.9); padding-bottom: 70px; width: 100%; } div#video-tutorial div.content { display: flex; flex-wrap: wrap; text-align: center; align-items: center; justify-content: center; align-content: center; } div#video-tutorial div.content div { flex: 1; } div#video-tutorial div.content h2 { font-size: 46px; font-weight: 200; margin: 60px 0; } div#video-tutorial div.content div.step { margin: 30px 0; font-size: 18px; } div#video-tutorial div.content div img { min-width: 400px; height: 250px; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Instructions =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#header div#instructions.no-installation-guide div.installation-guide { display: none; } div#header div#instructions { display: flex; flex-wrap: wrap; color: #444; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } div#header div.installation-guide { flex: 1; margin: 0 20px; font-size: 16px; min-width: 320px; line-height: 26px; } div#header div#instructions div.install-step { display: flex; align-items: center; justify-content: center; align-content: center; } div#header div#instructions step { display: inline-block; border-radius: 100px; background: rgba(30,190,197,0.6); text-shadow: 0px 0px 5px rgba(0,0,0,0.3); width: 50px; height: 50px; line-height: 50px; font-size: 22px; color: #fff; text-align: center; margin: 25px 20px 25px 0px; } div#header div#instructions detail { flex: 1; display: inline-block; } div#header div#instructions input { font-size: 10px; padding: 10px; width: 140px; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Live Preview Subtitle Styles =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#header div#subtitle-styles { flex: 1; display: flex; color: #fefef2; font-family: "San Francisco", "Helvetica Neue", "Helvetica", Arial, Sans-Serif; cursor: pointer; flex-direction: row; flex-flow: row wrap; align-items: center; justify-content: center; align-content: center; text-align: center; width: auto; height: auto; margin-bottom: 20px; } div#header div#subtitle-styles div { flex: 1; font-size: 20px; font-weight: 200; line-height: 30px; border-radius: 3px; text-shadow: 3px 1px 4px #222; border: solid rgba(255,255,255,0.5) 1px; padding: 10px; margin: 0 6px 10px 0; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Live Preview =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div#header div.live-example { flex: 1; height: 340px; } div#header div.live-example iframe { background: transparent; border: 0; width: 100%; min-width: 320px; height: 100%; } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ /* Enumerate children for css variables */ /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ :nth-child(1) { --child: 1 } :nth-child(2) { --child: 2 } :nth-child(3) { --child: 3 } :nth-child(4) { --child: 4 } :nth-child(5) { --child: 5 } :nth-child(6) { --child: 6 } :nth-child(7) { --child: 7 } :nth-child(8) { --child: 8 } :nth-child(9) { --child: 9 } :nth-child(10) { --child: 10 } :nth-child(11) { --child: 11 } :nth-child(12) { --child: 12 } :nth-child(13) { --child: 13 } :nth-child(14) { --child: 14 } :nth-child(15) { --child: 15 } :nth-child(16) { --child: 16 } :nth-child(17) { --child: 17 } :nth-child(18) { --child: 18 } :nth-child(19) { --child: 19 } :nth-child(20) { --child: 20 } :nth-child(21) { --child: 21 } :nth-child(22) { --child: 22 } :nth-child(23) { --child: 23 } :nth-child(24) { --child: 24 } :nth-child(25) { --child: 25 } :nth-child(26) { --child: 26 } :nth-child(27) { --child: 27 } :nth-child(28) { --child: 28 } :nth-child(29) { --child: 29 } :nth-child(30) { --child: 30 } :nth-child(31) { --child: 31 } :nth-child(32) { --child: 32 } :nth-child(33) { --child: 33 } :nth-child(34) { --child: 34 } :nth-child(35) { --child: 35 } :nth-child(36) { --child: 36 } :nth-child(37) { --child: 37 } :nth-child(38) { --child: 38 } :nth-child(39) { --child: 39 } :nth-child(40) { --child: 40 } :nth-child(41) { --child: 41 } :nth-child(42) { --child: 42 } /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Binary Images =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ div.title twitch { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhUAAAIuCAYAAAAIWfoQAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADVFJREFUeNrs3dFx20YQgGHAowJYAktgOqA7YAeGKkgJcTpwB1EnUgd2B0kHUipYH2I+ZJTJg2eXBHD4vhkO/KQxF7L1++4MjsMKRcSf7XIcAIDN+LDCoDgLCgAQFRU+uS0AsD3jmn4zEXFol1e3BQC2Z20rFZNbAgDbtLaVCgc0AUBUpIPi1C5f3RIA2KY1bX/86nYAwHatYqXiekBz3vo4uCUAsE1rWam4CAoA2La1rFTMZylObgcAiIpMUDigCQAdWMP2hydoAkAH1rBSMT9B03kKANi4RVcqWlBMggIAREUFWx8A0InFtj8i4jj8eDYFANCBJVcqPEETADqy5EqFDw8DgI4sslLRguIiKABAVFRwQBMAOnP37Q8HNAGgT0usVEzGDgD9WWKlwgFNAOjQXVcqWlCcBQUAiIoKDmgCQKfutv0REfNnfLwaOQD06Z4rFZNxA0C/7rlS4YAmAIiKdFCc2uWrcQNAv+61/eHDwwCgczdfqbge0Jy3Pg7GDQD9usdKxUVQAED/7rFSMZ+lOBk1AIiKTFA4oAkAO3Hr7Q9P0ASAnbj1SsX8BE3nKQBgB262UtGCYhIUACAqKtj6AIAducn2R0Qchx/PpgAAduJWKxWeoAkAO3OrlQofHgYAO1O+UtGC4iIoAEBUVHBAEwB2qHT7wwFNANiv6pWKyUgBYJ+qVyoc0ASAnSpbqWhBcRYUACAqKjigCQA7VrL9ERHzZ3y8GicA7NdD0deZjPIfv4/j+NkYAPjJf5w/t8t56++javvDY7kBYOfSUdHq6jQ4oAkAoqLga1ilAAByUXE9oHkxRgAgu1IxB8XBGAGAbFTY+gAAclFxPaB5MkIAIBUVgydoAgBFUTEZHwCQioqImIPCAU0AIBcVg60PACAbFRFxHDp4PjkAsHBUDP4bKQBQFBWeoAkA5KIiIuagOBobAJCKisEBTQAgGxXXA5q2PgCAXFQMHnYFABRFha0PACAXFRFxHhzQBACyUTFYpQAAslEREfNnfExGBQCkokJQAABVUeGx3ABALioi4jQ4oAkAZKNisEoBAGSj4npA0xM0AYBcVFyD4mBEAEA2Kmx9AAC5qLge0DwZDwCQiorBEzQBgKKomIwGAEhFRUTMQeGAJgCQi4rB1gcAkI2KiDi2y9lYAIBUVAz+GykAUBQVnqAJAOSiIiLmoDgaCQCQiorBAU0AIBsV1wOatj4AgFxUDB52BQAURYWtDwAgFxURcR4c0AQAslExWKUAAIqiYjIGAKAiKgAARAUAICoAAFEBACAqAABRAQCICgBAVAAAiAoAQFQAAKICABAVAACiAgAQFQCAqAAARIURAACiAgAQFQCAqAAAEBUAgKgAAEQFACAqAABEBQAgKgAAUQEAiAoAAFEBAIgKAEBUAACICgBAVAAAogIAEBUAAKICABAVAICoAABEBQCAqAAARAUAICoAAFEBACAqAABRAQCICgAAUQEAiAoAQFQAAKICAOB/PBgB3E5EHNvl2MFbeRvH8Zs7WvZ9ce7hfbTviRd3E1EB9zO1128dvI/5h8dHt7PMcyfvY3Qr+TfbHwCAqAAARAUAICoAAEQFACAqAABRAQCICgAAUQEAiAoAQFQAAKICAEBUAACiAgAQFQAAogIAEBUAgKgAAEQFAICoAABEBQAgKgAAUQEAICoAAFEBAIgKAEBUAACICgBAVAAAogIAQFQAAKICABAVAICoAAAQFQCAqAAARAUAICoAAEQFACAqAABRAQCICgAAUQEAiAoAQFQAAIgKAEBUAACiAgAQFQAAogIAEBUAgKgAAEQFAICoAABEBQAgKgAAUQEAICoAAFEBAIgKAABRAQCICgBAVAAAogIAQFQAAKICABAVAICoAAAQFQCAqAAARAUAICoAAEQFACAqAABRAQAgKgAAUQEAiAoAQFQAAIgKAEBUAACiAgAQFQAAogIAEBUAgKgAABAVAICoAABEBQAgKgAARAUAICoAAFEBAIgKAABRAQCICgBAVAAAogIAQFQAAKICABAVAACiAgAQFQCAqAAARAUAgKgAAEQFACAqAABRAQAgKgAAUQEAiAoAQFQAAIgKAEBUAACiAgBAVAAAogIAEBUAgKgAABAVAICoAABEBQAgKgAARAUAICoAAFEBAIgKAABRAQCICgBAVAAAiAoAQFQAAKICABAVAACiAgAQFQCAqAAARAUAgKgAAEQFACAqAABRAQAgKgCANXgwAripv9rrpYP38c2tLPViBIgK4KeM4/jULk8mwbvvi4+mQI9sfwAAogIAEBUAgKgAABAVAICoAABEBQAgKgAARAUAICoAAFEBAIgKAABRAQCICgBAVAAAiAoAQFQAAKICABAVAACiAgAQFQCAqAAARAUAgKgAgM04iAoAICUi/miXk6gAALJBMfXyfkQFAAgKUQEAgkJUAICgEBUAgKAQFQAgKEQFAAgKUQEAgqJ7ogIABIWoAABBISoAQFCICgBAUIgKABAUogIABIWoAABBISoAAEEhKgBAUIgKABAUogIABIWoAAAEhagAAEEhKgBAUIgKABAUiAoAEBSiAgAExZo8PZgBAAiKbFCM4/hopQIABEU6KOZfiAoAEBTpoBAVACAoSoJCVACAoCgJClEBAIKiJChEBQCCQlCUBIWoAEBQCIqSoBAVAAgKSoJCVAAgKCgJClEBgKCgJChEBQCCgpKgEBUACApKgkJUACAoKAkKUQGAoKAkKEQFAIKCkqAQFQAICkqCQlQAICgoCQpRAYCgEBSPVV9MVAAgKASFqAAAQbGOoBAVAAgKQSEqAEBQrCcoRAUAgkJQiAoABIWgWE9QiAoABIWgEBUACArWExSiAgBBIShEBQCCgvUEhagAQFAIClEBgKBgPUEhKgAQFIJCVAAgKFhPUIgKAASFoBAVAAgK1hMUogIAQSEoRAUAgkJQrIuoAEBQCApRAYCgEBSiAgAERUdBISoAEBSCQlQAICgEhagAQFAIis6CQlQAICgEhagAQFAIClEBgKCgs6AQFQAICkEhKgAQFIJCVAAgKOgsKEQFAIJCUIgKAASFoBAVAAgKOgsKUQGAoBAUogIAQSEoRAUAgkJQiAoAEBSCQlQAICgExQ2N7Zsi3Gu4/oFoTOE/PzhO7fLcXgfTAEEhKkBUCAoQFKICRIWgAEEhKkBUCAoQFKICRIWgEBQgKEQFiApBAYJCVICoEBQgKEQFiApBAYJi33+HigrYd1QIChAUogJEhaAAQSEqQFQIChAUogJEhaAABIWoAFEhKEBQiAoQFYICBIWoAFEhKEBQiAoQFYICEBSiAkSFoABBISpAVAgKEBSiAkSFoABBISrAH4hOokJQgKAQFSAqBAUIClEBokJQgKAQFaICOogKQQGCQlSAqBAUIChEBYgKQQGCAlEBHUSFoABBISpAVAgKEBSiAkSFoABBgaiADqJCUICgEBUgKgQFCApRAaJCUICgQFRAB1EhKEBQiAoQFYICBIWoAFEhKEBQICqgg6gQFCAoRAWICkEBgkJUgKhYPioEBQgKUQGiQlCAoBAVxgDLR4WgAEEhKkBUCAoQFIgKWD4qBAUIClEBokJQgKBAVMDyUSEoQFCIChAVggIEBaIClo8KQQGCQlSAqBAUICgQFbB8VAgKEBSiAkSFoABBgaiA5aNCUICgEBUgKgQFCApEBSwfFYICBIWoAFEhKEBQICpg+agQFCAoRAWQjgpBAYJCVADpqBAUIChEhaiAdFQIChAUiApIR4WgAEGBqIB0VAgKEBSICkhHhaAAQYGogHRUCAoQFIgKSEeFoABBgaiAdFQIChAUiApIR4WgAEGBqIB0VAgKEBSICkhHhaAAQYGogHRUCAoQFIgKSEeFoABBgaiAdFQIChAUiApIR4WgAEGBqIAKvwgKEBSICqjwJihAUCAqABAUiAoABAWiAgBBAaICAEGBqABAUCAqABAUiAoABIWgQFQAICgQFQAICkQFAIICUQGAoBAUiAoABAWiAgBBgagAQFAgKgBAUCAqABAULB8Vn42Bdz6119EYSPrSXn8bw2a8taD4YgykosIIeK+F5nO7nE2ChMf2A+rJGGBfPhgBICgAUQEICkBUAIICEBUAggIQFYCgAEQFICgAUQEICkBUAAgKQFQAggIQFYCgAEQFICgAUQEgKABRAQgKQFQAggIQFYCgABAVgKAARAUgKABRAQgKQFQAggJAVACCAhAVgKAARAUgKABRAQgKAFEBCApAVACCAhAVgKAARAUgKABEBSAoAFEBCApAVACCAkBUgKAAEBWAoABEBSAoAFEBCAoAUQGCAkBUAIICEBWAoABEBSAoAEQFCAoAUQEICkBUAIICEBWAoAAQFSAoAEQFICgAUQEICgBRAYICQFSAoAAQFYCgAEQFICgARAUICgBRAYICQFQAggIQFYCgABAVICgARAUICgBRAQgKQFQAggJAVICgABAVICgARAUgKABEBQgKAFEBggJAVICgABAVgKAAEBUgKABEBQgKAFEBggJAVACCAkBUgKAAWMJ3AQYAV6Z9L1+1NIYAAAAASUVORK5CYII='); }