scrape/scrapeboard
scrape
/
scrapeboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new pad colors; website updates

This commit is contained in:
frank 2022-01-27 15:10:02 -05:00
parent f66642c2e1
commit b5adc33110
21 changed files with 535 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -5,3 +5,6 @@ dist/
build/
*.mp4
venv/
lib/fonts
favicon.ico
scrapeboard_new.webm

14
NS.py
View File

@ -70,8 +70,8 @@ class NS(Game, Animation):
self.subscribe(self.respond, KEYDOWN)
self.subscribe(self.respond, KEYUP)
self.subscribe(self.respond)
for bgm in self.audio.bgm.values():
bgm.volume = 0.65
# for bgm in self.audio.bgm.values():
# bgm.volume = 0.65
ds = self.get_display_surface()
self.background = Surface(ds.get_size())
self.background.fill((0, 0, 0))
@ -341,7 +341,7 @@ class Tony(Sprite):
w, h = dsr.w + 40, int(dsr.h * .65)
glow = Surface((w, h), SRCALPHA)
for ii, y in enumerate(range(h, 0, -8)):
hue = range(200, 140, -5)[(ii - offset) % 12]
hue = range(240, 200, -2)[(ii - offset) % 12]
alpha = min(100, int(round(y / float(h - 10) * 100)))
color = get_hsla_color(hue, 100, 50, alpha)
if ii == 0:
@ -1070,10 +1070,10 @@ class Platform(GameChild):
self.border.load_from_path(self.get_resource("DancePadClear.png"), True)
self.border.location.midbottom = dsr.centerx, dsr.bottom
self.lights = [
Light(self, "cyan", NS.LNW),
Light(self, "magenta", NS.LNE),
Light(self, "yellow", NS.LSE),
Light(self, "white", NS.LSW)
Light(self, self.get_configuration("pads", "nw_color"), NS.LNW),
Light(self, self.get_configuration("pads", "ne_color"), NS.LNE),
Light(self, self.get_configuration("pads", "se_color"), NS.LSE),
Light(self, self.get_configuration("pads", "sw_color"), NS.LSW)
]
def reset(self):

29
config
View File

@ -5,14 +5,14 @@ url = http://shampoo.ooo/games/esb
version = 0.2.3
init-script = OPEN-GAME
additional-packages = lib
data-exclude = local/, *.pyc
data-exclude = local/, *.pyc, .git*, README, build/, dist/, *.egg-info, *.py, MANIFEST*, PKG-INFO, *.pyc, *.swp, *~, changelog, scrapeboard, OPEN-GAME, lib
[display]
caption = Scrapeboard
show-framerate = no
show-framerate = False
dimensions = 640, 480
fullscreen = no
attract-gif-alpha = .95
fullscreen = False
attract-gif-alpha = 0.95
[mouse]
visible = False
@ -22,12 +22,14 @@ quit = K_ESCAPE
up = K_u
[audio]
sfx-volume = .8
sfx-volume = 0.8
panel-enabled = True
volume = 1.0
[input]
buffer = 0
arduino-port = /dev/ttyACM0
serial = yes
arduino-port = /dev/ttyACM1
serial = True
[time]
timer-max-time = 10000
@ -36,3 +38,16 @@ timer-addition = 1000
sword-delay = 300
attract-gif-length = 10000
attract-board-length = 3600
[bgm]
title = resource/bgm/title.ogg, 1.00
level_0 = /home/frank/storage/audio/bgm/bat-tree-habitat-key/level-0.wav, 1.00
level_1 = /home/frank/storage/audio/bgm/esp-hadouken/Cube-Levers.ogg, 1.00
level_2 = /home/frank/storage/audio/bgm/esp-hadouken/Bog.ogg, 1.00
end = /home/frank/storage/audio/bgm/phone-call-from-dark-magnet.wav, 1.00
[pads]
nw_color = #00FF88
ne_color = #FF88FF
se_color = #2222FF
sw_color = #FF2222

47
config.backup Normal file
View File

@ -0,0 +1,47 @@
[setup]
license = Public Domain
title = Scrapeboard
url = http://shampoo.ooo/games/esb
version = 0.2.3
init-script = OPEN-GAME
additional-packages = lib
data-exclude = local/, *.pyc, .git*, README, build/, dist/, *.egg-info, *.py, MANIFEST*, PKG-INFO, *.pyc, *.swp, *~, changelog, scrapeboard, OPEN-GAME, lib
[display]
caption = Scrapeboard
show-framerate = False
dimensions = 640, 480
fullscreen = False
attract-gif-alpha = 0.95
[mouse]
visible = False
[keys]
quit = K_ESCAPE
up = K_u
[audio]
sfx-volume = 0.8
panel-enabled = True
volume = 1.0
[input]
buffer = 0
arduino-port = /dev/ttyACM1
serial = True
[time]
timer-max-time = 10000
timer-start-time = 7000
timer-addition = 1000
sword-delay = 300
attract-gif-length = 10000
attract-board-length = 3600
[bgm]
title = resource/bgm/title.ogg, 1.00
level_0 = /home/frank/storage/audio/bgm/bat-tree-habitat-key/level-0.wav, 1.00
level_1 = /home/frank/storage/audio/bgm/esp-hadouken/Cube-Levers.ogg, 1.00
level_2 = /home/frank/storage/audio/bgm/esp-hadouken/Bog.ogg, 1.00
end = /home/frank/storage/audio/bgm/odoboe/odoboe-2.wav, 1.00

1
www/Ink.png Symbolic link
View File

@ -0,0 +1 @@
../resource/Ink.png

BIN
www/ad_description_transparent_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
www/ad_description_transparent_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
www/ad_description_transparent_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
www/ad_description_transparent_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
www/ad_head_transparent_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
www/ad_head_transparent_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
www/ad_head_transparent_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
www/ad_head_transparent_wide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
www/ad_instructions_transparent_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
www/ad_instructions_transparent_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
www/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

243
www/index.php
View File

@ -1,63 +1,182 @@
<html>
<head>
<title>Electric Scrapeboard</title>
<link rel="stylesheet" href="www/style.css" type="text/css" />
</head>
<body>
<div id="title">
<img id="plank" src="resource/Title_plank.png" />
<img id="board" src="resource/Introduction_skateboard.png" />
<img id="lizard" src="resource/littleSlimeGoop/1_downRight.png" />
</div>
<div id="question">
So you think you can skateboard, but can you <i>scrape</i>board, you slime bag?
</div>
<div id="boarding">
<a href="www/Boarding_1.gif"><img src="www/Boarding_1_thumb.gif" width="250" /></a>
<a href="www/Boarding_0.gif"><img src="www/Boarding_0_thumb.gif" width="250" /></a>
<a href="www/Multiplay_Closing-Flan.gif"><img src="www/Multiplay_Closing-Flan_thumb.gif" width="250" /></a>
<a href="www/Boarding_2.gif"><img src="www/Boarding_2_thumb.gif" width="250" /></a>
<a href="www/Boarding_3.gif"><img src="www/Boarding_3_thumb.gif" width="250" /></a>
</div>
<div id="blob">
<div id="detail">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
<a id="frank" href="http://twitter.com/diskmem">@diskmem</a>
<a id="blake" href="http://twitter.com/snakesandrews">@snakesandrews</a>
<a id="clement" href="http://twitter.com/clementshimizu">@ClementShimizu</a>
</div>
<div id="detail2">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail3">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail4">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail5">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
</div>
<div id="video">
<iframe width="889" height="500" src="https://www.youtube.com/embed/ai9WlJdfbvI" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</body>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience." />
<meta name="keywords" content="arcade, arcade games, diy arcade cabinets, alt ctrl, alternative controllers, video games, indie game, indie games, indie dev, gamedev, game dev, game programming">
<meta property="og:url" content="http://scrape.nugget.fun">
<meta property="og:title" content="Scrapeboard">
<meta property="og:description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience.">
<meta property="og:image" content="http://scrape.nugget.fun/www/open_graph_card.jpg">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@diskmem">
<meta name="twitter:creator" content="@diskmem">
<title>Scrapeboard</title>
<link rel="stylesheet" href="www/style.css" type="text/css" />
</head>
<body>
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true"
poster="www/scrapeboard_new_cover.jpg">
<source src="www/scrapeboard_new.webm">
</video>
<style>
@media (min-width: 800px)
{
div#hero
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
width: 75%;
}
div#hero img#head_0
{
grid-area: 1 / 1 / 2 / 3;
}
div#hero img#head_1
{
grid-area: 2 / 1 / 3 / 2;
}
div#hero img#head_2
{
grid-area: 2 / 2 / 3 / 3;
}
}
@media (max-width: 800px)
{
div#hero
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 99%;
}
div#hero img#head_0
{
grid-area: 1 / 1 / 2 / 2;
}
div#hero img#head_1
{
/* width: 90%; */
grid-area: 2 / 1 / 3 / 2;
}
div#hero img#head_2
{
/* width: 90%; */
grid-area: 3 / 1 / 4 / 2;
}
}
</style>
<div id="hero">
<img id="head_0" src="www/ad_head_transparent_0.png" />
<img id="head_1" src="www/ad_head_transparent_1.png" />
<img id="head_2" src="www/ad_head_transparent_2.png" />
</div>
<style>
@media (min-width: 800px)
{
div#boarding
{
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-gap: 3%;
width: 91%;
}
}
@media (max-width: 800px)
{
div#boarding
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5%;
width: 99%;
}
div#boarding img#boarding_4
{
}
}
</style>
<div id="boarding">
<a href="www/Boarding_1.gif"><img id="boarding_0" src="www/Boarding_1_thumb.gif" /></a>
<a href="www/Boarding_0.gif"><img id="boarding_1" src="www/Boarding_0_thumb.gif" /></a>
<a href="www/Multiplay_Closing-Flan.gif"><img id="boarding_2" src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
<a href="www/Boarding_2.gif"><img id="boarding_3" src="www/Boarding_2_thumb.gif" /></a>
<a href="www/Boarding_3.gif"><img id="boarding_4" src="www/Boarding_3_thumb.gif" /></a>
</div>
<!-- <div id="heading">
<div id="title">
<img id="plank" src="resource/Title_plank.png" />
<img id="board" src="resource/Introduction_skateboard.png" />
<img id="lizard" src="resource/littleSlimeGoop/1_downRight.png" />
</div>
<div id="question">
So you think you can skateboard, but can you <i>scrape</i>board, you slime bag?
</div>
</div> -->
<!-- <div id="blob">
<div id="detail">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail2">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail3">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail4">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
<div id="detail5">
We have the <span class="highlight">technology</span> to put you on a board which is a
wireless electric <span class="highlight">video game</span> controller. Do you have the
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
to <i>Tony Hawk</i>?
</div>
</div> -->
<div id="instructions">
<img id="line" src="www/hero_instructions_foreground.png" />
<img id="diagram" src="www/instructions.png" />
</div>
<img id="description" src="www/hero_description_foreground.png" />
<div id="comedy">
<iframe src="https://www.youtube.com/embed/ai9WlJdfbvI" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div id="comedy_credits">
video by <a href="http://twitter.com/beachethan">@beachethan</a>
</div>
<div class="credits">
Scrapeboard is created by <a href="http://twitter.com/diskmem">@diskmem</a> and
<a href="http://twitter.com/snakesandrews">@snakesandrews</a><br/>
with engineering by <a href="http://twitter.com/clementshimizu">@ClementShimizu</a><br/>
</div>
<div id="ink">
<img src="www/Ink.png">
</div>
</body>
</html>

BIN
www/instructions.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

BIN
www/open_graph_card.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

1
www/scrape_logo.png Symbolic link
View File

@ -0,0 +1 @@
../local/scrape_logo.png

383
www/style.css
View File

@ -4,143 +4,257 @@
body
{
/* background: url("../resource/Ink.png"); */
background-size: 100% auto;
margin: 15px;
background: url("background.png");
background-repeat: repeat;
margin: 0px;
font-family: NotCourierSans;
color: #000;
}
div#title
body a
{
text-align: center;
position: relative;
margin-bottom: 40px;
overflow: hidden;
color: #000;
text-decoration: underline;
}
div#title img#plank
body a:hover
{
border-top: 13px dotted lime;
border-radius: 100px;
border-bottom: 18px dashed lime;
z-index: 0;
text-decoration: none;
}
div#title img#board
video#landing_video
{
width: 100px;
transform: rotate(70deg);
background-color: yellow;
border: 3px groove pink;
position: absolute;
z-index: 1;
top: 50px;
left: 52%;
border-radius: 40px;
width: 100%;
}
div#title img#lizard
div#hero
{
width: 1000px;
background-color: rgba(255, 100, 100, .2);
opacity: .9;
position: absolute;
top: 0px;
z-index: 2;
left: 40%;
border-radius: 40px;
}
div#question
{
width: 65%;
display: grid;
margin: auto;
border: 5px double cyan;
background: #B0D0D0E0;
line-height: 28px;
color: #282828;
padding: 50px;
border-radius: 18px;
font-family: NotCourierSansBold;
font-size: 34px;
margin-bottom: 18px;
position: absolute;
top: -10px;
z-index: 0;
margin-top: 20px;
}
div#blob
div#hero img
{
position: relative;
width: 100%;
margin: auto;
}
div#detail
div#instructions
{
font-family: NotCourierSans;
font-size: 80px;
text-align: justify;
margin: auto;
width: 75%;
}
div#detail a
div#instructions img#line
{
position: absolute;
top: 80px;
left: 30px;
font-size: 12px;
z-index: 3;
display: block;
width: 100%;
}
div#detail a#blake
div#instructions img#diagram
{
top: 95px;
display: block;
margin: auto;
width: 60%;
margin-top: 40px;
border-radius: 30px;
}
div#detail a#clement
img#description
{
top: 110px;
display: block;
margin: 40px auto;
width: 75%;
}
div#detail2
{
font-family: NotCourierSans;
font-size: 80px;
text-align: justify;
position: absolute;
top: 1px;
left: 1px;
}
/* div#description */
/* { */
/* width: 75%; */
/* margin: auto; */
/* margin-top: 20px; */
/* } */
div#detail3
{
font-family: NotCourierSans;
font-size: 80px;
text-align: justify;
position: absolute;
top: 2px;
left: 2px;
}
/* div#description */
/* { */
/* position: relative; */
div#detail4
{
font-family: NotCourierSans;
font-size: 80px;
text-align: justify;
position: absolute;
top: 3px;
left: 3px;
/* color: gray; */
/* opacity: .5; */
}
/* } */
div#detail5
{
font-family: NotCourierSans;
font-size: 80px;
text-align: justify;
position: absolute;
top: 4px;
left: 4px;
/* opacity: .3; */
}
/* div#description img */
/* { */
/* width: 100%; */
/* } */
/* div#description div.text */
/* { */
/* text-align: justify; */
/* text-align-last: center; */
/* } */
/* div#description div.text:after */
/* { */
/* content: ""; */
/* display: inline-block; */
/* width: 100%; */
/* } */
/* div#description div#first */
/* { */
/* font-size: 55px; */
/* font-weight: bold; */
/* } */
/* div#description div#second */
/* { */
/* font-size: 36px; */
/* } */
/* div#description div#third */
/* { */
/* font-size: 28px; */
/* } */
/* div#description div#fourth */
/* { */
/* font-size: 24px; */
/* } */
/* div#heading div#title */
/* { */
/* text-align: center; */
/* position: relative; */
/* margin-bottom: 40px; */
/* overflow: hidden; */
/* } */
/* div#heading div#title img#plank */
/* { */
/* border-top: 13px dotted lime; */
/* border-radius: 100px; */
/* border-bottom: 18px dashed lime; */
/* z-index: 0; */
/* } */
/* div#heading div#title img#board */
/* { */
/* width: 100px; */
/* transform: rotate(70deg); */
/* background-color: yellow; */
/* border: 3px groove pink; */
/* position: absolute; */
/* z-index: 1; */
/* top: 50px; */
/* left: 52%; */
/* border-radius: 40px; */
/* } */
/* div#heading div#title img#lizard */
/* { */
/* width: 1000px; */
/* background-color: rgba(255, 100, 100, .2); */
/* opacity: .9; */
/* position: absolute; */
/* top: 0px; */
/* z-index: 2; */
/* left: 40%; */
/* border-radius: 40px; */
/* } */
/* div#heading div#question */
/* { */
/* width: 65%; */
/* margin: auto; */
/* border: 5px double cyan; */
/* background: #B0D0D0E0; */
/* line-height: 28px; */
/* color: #282828; */
/* padding: 50px; */
/* border-radius: 18px; */
/* font-family: NotCourierSansBold; */
/* font-size: 34px; */
/* margin-bottom: 18px; */
/* position: absolute; */
/* top: -10px; */
/* z-index: 0; */
/* } */
/* div#blob */
/* { */
/* position: relative; */
/* width: 100%; */
/* overflow: hidden; */
/* word-break: break-all; */
/* } */
/* div#detail */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* } */
/* div#detail a */
/* { */
/* position: absolute; */
/* top: 80px; */
/* left: 30px; */
/* font-size: 12px; */
/* z-index: 3; */
/* } */
/* div#detail a#blake */
/* { */
/* top: 95px; */
/* } */
/* div#detail a#clement */
/* { */
/* top: 110px; */
/* } */
/* div#detail2 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 1px; */
/* left: 1px; */
/* } */
/* div#detail3 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 2px; */
/* left: 2px; */
/* } */
/* div#detail4 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 3px; */
/* left: 3px; */
/* /\* color: gray; *\/ */
/* /\* opacity: .5; *\/ */
/* } */
/* div#detail5 */
/* { */
/* font-family: NotCourierSans; */
/* font-size: 80px; */
/* text-align: justify; */
/* position: absolute; */
/* top: 4px; */
/* left: 4px; */
/* /\* opacity: .3; *\/ */
/* } */
div#photo
{
@ -154,27 +268,76 @@ div#photo img
border: 18px ridge pink;
}
div.credits
{
margin-top: 40px;
font-family: NotCourierSans;
font-size: 24px;
text-align: center;
}
div.credits a
{
font-weight: bold;
font-family: Cantarell;
font-size: 28px;
}
div#boarding
{
text-align: center;
display: grid;
margin: 40px auto;
}
div#boarding img
{
box-sizing: border-box;
border-radius: 30px;
margin: 40px 5px;
border: 8px solid black;
width: 200px;
width: 100%;
}
div#video
div#comedy
{
max-width: 889px;
max-height: 500px;
width: 90vw;
height: 50.85vw;
text-align: center;
margin: auto;
margin-top: 50px;
}
div#video iframe
div#comedy iframe
{
border: 8px solid black;
/* border: 8px solid black; */
border-radius: 30px;
width: 100%;
height: 100%;
}
div#comedy_credits
{
font-size: 16px;
text-align: center;
}
div#ink
{
width: 100%;
margin: 0;
margin-top: 50px;
padding: 0;
text-align: center;
background: rgb(253, 255, 125);
overflow: hidden;
}
div#ink img
{
width: 100%;
max-width: 700px;
margin: -40px auto -55px;
padding: 0;
border: 0;
}