1 00:00:02,070 --> 00:00:03,920 So let's add some styling 2 00:00:03,920 --> 00:00:07,010 and I'll start with the overall main styles 3 00:00:07,010 --> 00:00:08,730 for the entire page 4 00:00:08,730 --> 00:00:11,960 with things like the overall font. 5 00:00:11,960 --> 00:00:13,810 For this, I'll visit Google Fonts, 6 00:00:13,810 --> 00:00:16,470 and you can, of course, pick any fonts you want 7 00:00:16,470 --> 00:00:17,890 for your project. 8 00:00:17,890 --> 00:00:20,140 I will use Open Sans here. 9 00:00:20,140 --> 00:00:22,054 That's the font I wanna use. 10 00:00:22,054 --> 00:00:24,230 So I'll click on that. 11 00:00:24,230 --> 00:00:26,623 And then choose the regular version, 12 00:00:27,460 --> 00:00:30,140 and also add the bold version. 13 00:00:30,140 --> 00:00:32,479 So 400 and 700. 14 00:00:32,479 --> 00:00:33,793 These two weights. 15 00:00:35,110 --> 00:00:37,650 And then I'll just grab these links here, 16 00:00:37,650 --> 00:00:42,370 and of course, add them here in my HTML file, 17 00:00:42,370 --> 00:00:45,583 maybe below the title and then reformat this. 18 00:00:47,260 --> 00:00:48,593 Now, that's the fonts. 19 00:00:49,490 --> 00:00:50,993 With the fonts added, 20 00:00:50,993 --> 00:00:52,850 I'll go to the styles folder 21 00:00:52,850 --> 00:00:55,630 and add a styles.css file, 22 00:00:55,630 --> 00:00:58,730 which will be my main styles file. 23 00:00:58,730 --> 00:01:00,360 I'll then add a couple of other files 24 00:01:00,360 --> 00:01:03,000 for specific areas of the page as well 25 00:01:03,000 --> 00:01:08,000 but here I wanna have my general page-wide styles so to say. 26 00:01:10,150 --> 00:01:15,010 And I will start by adding that body selector here. 27 00:01:15,010 --> 00:01:19,100 And here I'll first of all remove that default margin 28 00:01:19,100 --> 00:01:22,878 which we actually have by many browsers for the body 29 00:01:22,878 --> 00:01:25,280 by setting margin to zero 30 00:01:25,280 --> 00:01:28,810 so that the body itself has no margin. 31 00:01:28,810 --> 00:01:31,590 And of course, I'll add the font-family and set this 32 00:01:31,590 --> 00:01:34,760 to my brand new Open-Sans style that I added 33 00:01:34,760 --> 00:01:37,213 and add sans-serif as a fallback. 34 00:01:38,480 --> 00:01:41,940 I also wanna set the overall main text color, 35 00:01:41,940 --> 00:01:43,460 by default, it's black, 36 00:01:43,460 --> 00:01:46,740 and I'll now add that color CSS property 37 00:01:46,740 --> 00:01:50,550 to change it to a dark gray color. 38 00:01:50,550 --> 00:01:52,460 The difference, of course, will be subtle 39 00:01:52,460 --> 00:01:55,330 and yet it's always about differences like that 40 00:01:55,330 --> 00:01:57,643 to get a pleasant style in the end. 41 00:01:58,620 --> 00:02:02,290 And here I prepared a little color offscreen, 42 00:02:02,290 --> 00:02:06,740 which is rgb, and then 44, 41, 44 43 00:02:06,740 --> 00:02:08,600 but, of course, just as always, 44 00:02:08,600 --> 00:02:10,639 I probably don't need to emphasize 45 00:02:10,639 --> 00:02:13,190 that you can always pick your own colors 46 00:02:13,190 --> 00:02:14,900 and play around with all the colors 47 00:02:14,900 --> 00:02:17,593 and values I chose here for this project. 48 00:02:20,240 --> 00:02:21,240 Now, last but not least, 49 00:02:21,240 --> 00:02:23,420 I also wanna set a background-color 50 00:02:23,420 --> 00:02:24,910 for the overall page. 51 00:02:24,910 --> 00:02:27,604 And here I have a light gray color 52 00:02:27,604 --> 00:02:31,393 with rgb, and then 247, 53 00:02:33,320 --> 00:02:34,543 239, 54 00:02:35,520 --> 00:02:37,653 and 247. 55 00:02:39,030 --> 00:02:41,720 And if I save this and go to index.html, 56 00:02:41,720 --> 00:02:44,880 and add that styles file with a link, 57 00:02:44,880 --> 00:02:46,200 which you, of course, have to do, 58 00:02:46,200 --> 00:02:48,740 then we should see these styles. 59 00:02:48,740 --> 00:02:51,120 So therefore here in index.html, 60 00:02:51,120 --> 00:02:53,770 I'll add my link here 61 00:02:53,770 --> 00:02:55,870 by typing link and hitting Tab. 62 00:02:55,870 --> 00:02:59,953 And I then wanna import from styles/styles.css. 63 00:03:02,070 --> 00:03:06,250 If we save that, and go back to our page, 64 00:03:06,250 --> 00:03:09,120 now we have the light gray background 65 00:03:09,120 --> 00:03:11,320 with a slight purple note 66 00:03:11,320 --> 00:03:12,660 and we have a different font 67 00:03:12,660 --> 00:03:15,010 and also a slightly different font color, 68 00:03:15,010 --> 00:03:16,883 though of course, that's hard to see. 69 00:03:18,440 --> 00:03:20,153 So that's now my body style. 70 00:03:21,070 --> 00:03:24,970 I also wanna style my main-header already 71 00:03:24,970 --> 00:03:27,560 and for that, I'll actually give it an id, 72 00:03:27,560 --> 00:03:31,760 main-header, so that I can easily target it. 73 00:03:31,760 --> 00:03:34,850 It actually is the only header I have 74 00:03:34,850 --> 00:03:36,200 on this entire page 75 00:03:36,200 --> 00:03:38,990 but we could easily have a couple of other headers. 76 00:03:38,990 --> 00:03:42,650 For example, we could wrap this h2 element in the aside 77 00:03:42,650 --> 00:03:45,133 with a header for semantic reasons. 78 00:03:46,010 --> 00:03:48,380 We don't necessarily need to do that here 79 00:03:48,380 --> 00:03:50,230 since we only have that main title here 80 00:03:50,230 --> 00:03:53,900 and just having that like this in aside is absolutely fine 81 00:03:53,900 --> 00:03:55,860 but it could easily be the case 82 00:03:55,860 --> 00:03:58,530 that we have multiple headers on the page. 83 00:03:58,530 --> 00:04:00,980 And therefore, it is not a bad idea 84 00:04:00,980 --> 00:04:03,890 to assign a unique ID to that main-header 85 00:04:03,890 --> 00:04:06,200 so that we then use that ID 86 00:04:06,200 --> 00:04:08,970 to add the main-header styling. 87 00:04:08,970 --> 00:04:10,760 And therefore, in styles.css, 88 00:04:10,760 --> 00:04:14,760 I'll add the ID selector for the main header ID, 89 00:04:14,760 --> 00:04:18,160 and then actually give that a purple background-color, 90 00:04:18,160 --> 00:04:19,882 which I prepared in advance, 91 00:04:20,769 --> 00:04:25,403 and that is 140, 0, 255. 92 00:04:26,560 --> 00:04:28,340 And the text color, therefore, 93 00:04:28,340 --> 00:04:30,733 should be white so that we have some contrast. 94 00:04:32,290 --> 00:04:34,930 I'll also add some padding to that main-header 95 00:04:34,930 --> 00:04:36,640 and now for that padding, 96 00:04:36,640 --> 00:04:39,620 I wanna have 2rem top and bottom, 97 00:04:39,620 --> 00:04:41,990 using this rem unit here 98 00:04:41,990 --> 00:04:46,140 so that we base the actual spacing on the font size 99 00:04:46,140 --> 00:04:50,860 that was chosen so that we have the extra adaption here 100 00:04:50,860 --> 00:04:54,800 in case users do change their default font size 101 00:04:54,800 --> 00:04:58,030 so that our spacing between text and the borders 102 00:04:58,030 --> 00:05:01,410 of the box still look good in such scenarios. 103 00:05:01,410 --> 00:05:02,780 And for left and right, 104 00:05:02,780 --> 00:05:06,785 I will actually use a percentage value of 5% 105 00:05:06,785 --> 00:05:11,785 so that the gap between the left border 106 00:05:11,790 --> 00:05:14,880 of our screen and the start of our content 107 00:05:14,880 --> 00:05:17,341 in the main-header and the same on the right side 108 00:05:17,341 --> 00:05:19,810 gets bigger on bigger screens 109 00:05:19,810 --> 00:05:22,740 so that our header content doesn't sit directly 110 00:05:22,740 --> 00:05:24,710 on the edges of large screens 111 00:05:24,710 --> 00:05:27,060 but that instead, we always have a nice gap 112 00:05:27,060 --> 00:05:28,250 to the left and right, 113 00:05:28,250 --> 00:05:30,683 no matter how large the screen is. 114 00:05:32,250 --> 00:05:35,140 And then as a last step, I'll add text-align 115 00:05:35,140 --> 00:05:37,600 and set this to center here in main-header 116 00:05:37,600 --> 00:05:40,493 so that all our content here is centered. 117 00:05:41,840 --> 00:05:44,028 And if we save that, 118 00:05:44,028 --> 00:05:46,860 and reload, we've got this main header 119 00:05:46,860 --> 00:05:48,893 where our content is centered. 120 00:05:49,770 --> 00:05:51,760 And of course, again as always, 121 00:05:51,760 --> 00:05:52,990 you can fine tune this. 122 00:05:52,990 --> 00:05:55,090 You could also add a linear gradient 123 00:05:55,090 --> 00:05:57,570 instead of a single background color 124 00:05:57,570 --> 00:06:00,450 but since this isn't primarily about CSS, 125 00:06:00,450 --> 00:06:02,080 I wanna keep it simpler 126 00:06:02,080 --> 00:06:05,200 and instead just add some basic styling that looks good, 127 00:06:05,200 --> 00:06:07,793 and then move on to JavaScript in the next step. 128 00:06:08,780 --> 00:06:10,570 Now, the next thing I wanna add here 129 00:06:10,570 --> 00:06:12,740 in the styles.css file therefore 130 00:06:12,740 --> 00:06:15,630 is some styling for my buttons. 131 00:06:15,630 --> 00:06:17,020 And that's now important. 132 00:06:17,020 --> 00:06:19,510 We've got a couple of buttons on this page. 133 00:06:19,510 --> 00:06:22,230 Here the buttons that will later be in our modal, 134 00:06:22,230 --> 00:06:25,090 in our overlay, the edit buttons 135 00:06:25,090 --> 00:06:27,360 and the Start New Game button. 136 00:06:27,360 --> 00:06:32,263 And the buttons actually should have a similar style. 137 00:06:33,210 --> 00:06:35,280 Now, since they should have a similar style, 138 00:06:35,280 --> 00:06:39,160 we could just select the button element itself 139 00:06:39,160 --> 00:06:41,710 with that tag type selector here 140 00:06:41,710 --> 00:06:44,200 and style all buttons in the same way. 141 00:06:44,200 --> 00:06:46,460 We could do that and it wouldn't be bad 142 00:06:46,460 --> 00:06:50,320 but I actually wanna have some buttons that look different. 143 00:06:50,320 --> 00:06:53,800 Specifically here in that overlay where have the Cancel 144 00:06:53,800 --> 00:06:56,380 and the Confirm buttons sitting next to each other. 145 00:06:56,380 --> 00:06:58,160 It doesn't look that great 146 00:06:58,160 --> 00:07:01,800 if those buttons have exactly the same style. 147 00:07:01,800 --> 00:07:05,360 Instead, the Cancel button should look slightly different 148 00:07:05,360 --> 00:07:07,220 than the Confirm button. 149 00:07:07,220 --> 00:07:09,950 And therefore, not all buttons will look the same. 150 00:07:09,950 --> 00:07:13,010 Instead, I wanna add a base button look 151 00:07:13,010 --> 00:07:15,470 that can be applied to all buttons 152 00:07:15,470 --> 00:07:17,700 and then define a slight variation 153 00:07:17,700 --> 00:07:19,760 that builds up on that base look 154 00:07:19,760 --> 00:07:21,623 that we can add to some buttons. 155 00:07:22,760 --> 00:07:24,000 And to achieve this, 156 00:07:24,000 --> 00:07:27,110 I will go for CSS classes here. 157 00:07:27,110 --> 00:07:29,350 Hence, in the CSS file, we add a dot 158 00:07:29,350 --> 00:07:31,090 and then the class name. 159 00:07:31,090 --> 00:07:32,910 And the class name is up to you. 160 00:07:32,910 --> 00:07:36,610 We then just have to add it to our HTML elements later. 161 00:07:36,610 --> 00:07:40,180 And I'll go for btn, short for button 162 00:07:40,180 --> 00:07:42,270 as a CSS class name. 163 00:07:42,270 --> 00:07:45,830 And I'll then also add another class, btn-alt, 164 00:07:45,830 --> 00:07:49,493 to define an alternative look for my buttons later. 165 00:07:50,950 --> 00:07:53,060 Now, in the main btn class, 166 00:07:53,060 --> 00:07:54,740 I wanna add some base styles, 167 00:07:54,740 --> 00:07:57,200 which then will only be overwritten 168 00:07:57,200 --> 00:08:00,253 by that alternative class selector here. 169 00:08:01,580 --> 00:08:03,360 Now, the main style for my button 170 00:08:03,360 --> 00:08:06,950 should be that the font is inherited. 171 00:08:06,950 --> 00:08:08,590 That means that the font family 172 00:08:08,590 --> 00:08:10,460 and so on should be inherited 173 00:08:10,460 --> 00:08:12,420 from the surrounding container 174 00:08:12,420 --> 00:08:14,732 and therefore, ultimately, from the body 175 00:08:14,732 --> 00:08:17,150 instead of using the browser defaults, 176 00:08:17,150 --> 00:08:19,020 which would be a different font family. 177 00:08:19,020 --> 00:08:20,923 Buttons have a different font family. 178 00:08:22,690 --> 00:08:25,263 So that's the first thing which I wanna do here. 179 00:08:26,360 --> 00:08:28,318 I also wanna change the padding 180 00:08:28,318 --> 00:08:33,260 and add a padding to top and bottom of 0.5rem 181 00:08:33,260 --> 00:08:37,220 and left and right of 1.5rem. 182 00:08:37,220 --> 00:08:38,679 And these are just some values, 183 00:08:38,679 --> 00:08:40,480 which I found to look good. 184 00:08:40,480 --> 00:08:41,852 That's why I'm using them. 185 00:08:42,730 --> 00:08:45,710 Of course, we could also use the longer form of padding 186 00:08:45,710 --> 00:08:48,490 and explicitly set padding-top and so on 187 00:08:48,490 --> 00:08:49,820 but I'll use the short form, 188 00:08:49,820 --> 00:08:52,440 which allows me to set top, bottom, left, right 189 00:08:52,440 --> 00:08:55,603 in one go, as we did it multiple times in this course. 190 00:08:57,520 --> 00:09:02,520 Now, I also will set a background-color here to my buttons, 191 00:09:02,730 --> 00:09:05,450 and here I wanna have the same background-color 192 00:09:05,450 --> 00:09:08,200 as for the main-header, this purple color. 193 00:09:08,200 --> 00:09:09,653 So I'll just copy that. 194 00:09:10,550 --> 00:09:13,910 And I'll also add a border of one pixel solid 195 00:09:13,910 --> 00:09:15,980 and that same color 196 00:09:15,980 --> 00:09:18,393 so that we technically don't see that border. 197 00:09:20,120 --> 00:09:24,060 The text color, which we set with just the color property, 198 00:09:24,060 --> 00:09:25,860 therefore should be white 199 00:09:25,860 --> 00:09:28,693 so that we have a nice contrast to the background. 200 00:09:29,980 --> 00:09:33,070 And I wanna have slightly rounded corners, 201 00:09:33,070 --> 00:09:36,383 so I'll set the border-radius here to four pixels. 202 00:09:37,460 --> 00:09:39,110 Last but not least, the cursor 203 00:09:39,110 --> 00:09:40,730 should be set to pointer 204 00:09:40,730 --> 00:09:42,890 so that when we hover over the buttons, 205 00:09:42,890 --> 00:09:46,680 we get that pointer look for our cursor 206 00:09:46,680 --> 00:09:49,053 to make it clearer that this can be clicked. 207 00:09:50,860 --> 00:09:53,430 Now for the alternative buttons. 208 00:09:53,430 --> 00:09:56,560 I plan on adding that class in addition 209 00:09:56,560 --> 00:09:58,950 to this btn class onto the buttons 210 00:09:58,950 --> 00:10:01,050 that should have this alternative look. 211 00:10:01,050 --> 00:10:03,530 Therefore, we just need to override some 212 00:10:03,530 --> 00:10:07,260 of these CSS properties defined in the btn class 213 00:10:07,260 --> 00:10:09,043 with new values here. 214 00:10:09,890 --> 00:10:11,460 And specifically, I wanna get rid 215 00:10:11,460 --> 00:10:13,550 of the background-color and the border, 216 00:10:13,550 --> 00:10:16,030 and just have a color text instead 217 00:10:16,030 --> 00:10:19,190 to have a look that is sometimes called flat 218 00:10:19,190 --> 00:10:23,153 where the button just is some text with space around it. 219 00:10:24,210 --> 00:10:25,990 And for that, I'll set background-color 220 00:10:25,990 --> 00:10:27,810 to the special transparent class, 221 00:10:27,810 --> 00:10:30,040 which does what the name implies. 222 00:10:30,040 --> 00:10:33,397 And set border-color to transparent 223 00:10:33,397 --> 00:10:37,290 so that we technically still have a border of one pixel 224 00:10:37,290 --> 00:10:38,523 but we won't see it. 225 00:10:40,300 --> 00:10:44,233 And then I'll set the text color to this purple color here. 226 00:10:46,030 --> 00:10:48,910 And these are now my button styles. 227 00:10:48,910 --> 00:10:51,930 Now, before we start adding these CSS classes, 228 00:10:51,930 --> 00:10:55,080 I wanna also apply my hover styles. 229 00:10:55,080 --> 00:10:57,620 So for this, I wanna target btn 230 00:10:57,620 --> 00:11:01,620 if we're hovering over it with the hover pseudo selector, 231 00:11:01,620 --> 00:11:03,870 and do the same for btn-alt 232 00:11:04,800 --> 00:11:07,230 when we hover over such a button. 233 00:11:07,230 --> 00:11:11,340 In case of the regular button of the base button so to say, 234 00:11:11,340 --> 00:11:14,940 I wanna change the background-color slightly, 235 00:11:14,940 --> 00:11:17,740 and for that, I'll start at that purple 236 00:11:17,740 --> 00:11:21,260 and then just select a slightly different color. 237 00:11:21,260 --> 00:11:23,000 Maybe a darker purple 238 00:11:23,000 --> 00:11:26,238 or maybe we also go a little bit more 239 00:11:26,238 --> 00:11:28,550 into that bluish area 240 00:11:28,550 --> 00:11:30,363 and then pick such a purple here. 241 00:11:31,570 --> 00:11:33,160 So that's my background-color. 242 00:11:33,160 --> 00:11:36,760 And the same should happen for the border-color. 243 00:11:36,760 --> 00:11:38,250 The border-color should be set 244 00:11:38,250 --> 00:11:41,860 to that same darker purple here. 245 00:11:41,860 --> 00:11:43,540 That's what I wanna do for this button 246 00:11:43,540 --> 00:11:45,470 and for the alt button, 247 00:11:45,470 --> 00:11:48,420 there I also wanna change the background-color 248 00:11:49,500 --> 00:11:52,260 but here, it should be a very light purple 249 00:11:52,260 --> 00:11:55,240 since we otherwise have no background here. 250 00:11:55,240 --> 00:11:59,120 Then I really just wanna have a very, very light purple. 251 00:11:59,120 --> 00:12:00,980 So something like that maybe. 252 00:12:00,980 --> 00:12:02,830 We'll have to see if that looks good. 253 00:12:04,470 --> 00:12:07,660 Now with that, we added all these definitions 254 00:12:07,660 --> 00:12:10,870 for these CSS classes. 255 00:12:10,870 --> 00:12:12,760 Now we can go to index.html 256 00:12:12,760 --> 00:12:16,010 and start adding those classes to the buttons 257 00:12:16,010 --> 00:12:18,020 that should have these looks 258 00:12:18,020 --> 00:12:20,910 or the elements in general that should have these looks 259 00:12:20,910 --> 00:12:24,120 but here I only wanna have that look on buttons. 260 00:12:24,120 --> 00:12:27,610 And hence, I'll start with Cancel and Confirm here. 261 00:12:27,610 --> 00:12:32,460 The Cancel button will have that btn base class. 262 00:12:32,460 --> 00:12:34,210 All buttons will get that. 263 00:12:34,210 --> 00:12:37,550 But in addition, it will get the btn-alt class, 264 00:12:37,550 --> 00:12:40,630 which we defined to have this alternative look 265 00:12:40,630 --> 00:12:44,300 where we override some of the CSS properties. 266 00:12:44,300 --> 00:12:47,023 The Confirm button will just get btn. 267 00:12:50,410 --> 00:12:53,787 Now, here the Edit buttons that we have here, 268 00:12:53,787 --> 00:12:57,410 these buttons should also have this alternative look again 269 00:12:57,410 --> 00:13:01,393 so they get the base btn class and then btn-alt. 270 00:13:02,630 --> 00:13:05,228 That's the case for the first Edit button 271 00:13:05,228 --> 00:13:06,340 and also for the second button. 272 00:13:06,340 --> 00:13:08,080 And then for Start New Game, 273 00:13:08,080 --> 00:13:10,943 I'll again just use the btn class itself. 274 00:13:12,920 --> 00:13:16,120 With that, if we save and possibly reload, 275 00:13:16,120 --> 00:13:17,860 we should have that look. 276 00:13:17,860 --> 00:13:19,730 We can hover over these buttons. 277 00:13:19,730 --> 00:13:20,860 And for the alt button, 278 00:13:20,860 --> 00:13:22,700 you'll notice that if you hover over them, 279 00:13:22,700 --> 00:13:25,910 you also get a little border. 280 00:13:25,910 --> 00:13:27,180 You see that border here, 281 00:13:27,180 --> 00:13:29,100 and I don't wanna have that border. 282 00:13:29,100 --> 00:13:31,710 Instead, maybe a slightly darker background color 283 00:13:31,710 --> 00:13:32,880 would be nice. 284 00:13:32,880 --> 00:13:34,750 But why am I getting the border 285 00:13:34,750 --> 00:13:36,410 when I hover over this? 286 00:13:36,410 --> 00:13:38,520 Because after all, in styles.css, 287 00:13:38,520 --> 00:13:40,640 for hovering over btn-alt, 288 00:13:40,640 --> 00:13:42,853 I haven't defined a border-color. 289 00:13:43,790 --> 00:13:46,960 Well, but I have defined it for the base button 290 00:13:46,960 --> 00:13:48,610 if we hover over it. 291 00:13:48,610 --> 00:13:50,940 And keep in mind that this base button class 292 00:13:50,940 --> 00:13:53,960 is added to all these alt buttons as well. 293 00:13:53,960 --> 00:13:56,170 Therefore, of course, the hover effect defined 294 00:13:56,170 --> 00:13:58,763 on the base button also applies here. 295 00:14:00,840 --> 00:14:03,270 So to not get that border-color, 296 00:14:03,270 --> 00:14:06,100 which we have on the hover effect on the base button, 297 00:14:06,100 --> 00:14:08,650 we should explicitly set border-color 298 00:14:08,650 --> 00:14:10,540 to transparent here again 299 00:14:10,540 --> 00:14:12,720 when we hover over a alt button 300 00:14:12,720 --> 00:14:14,750 to again override the value 301 00:14:14,750 --> 00:14:16,960 that would be set otherwise. 302 00:14:16,960 --> 00:14:20,360 That's how this concept of specificity works in CSS. 303 00:14:20,360 --> 00:14:21,860 That's why we need to do that. 304 00:14:22,720 --> 00:14:23,750 With that, if we save, 305 00:14:23,750 --> 00:14:25,330 that hovering over such a button 306 00:14:25,330 --> 00:14:27,080 doesn't give us that border 307 00:14:27,080 --> 00:14:28,290 but instead as I said, 308 00:14:28,290 --> 00:14:31,910 I'll pick a slightly darker background color 309 00:14:33,160 --> 00:14:37,140 so that we can see this hover effect a bit clearer here. 310 00:14:37,140 --> 00:14:40,350 And with that, I get my base styles. 311 00:14:40,350 --> 00:14:41,640 Now, of course, that's not all. 312 00:14:41,640 --> 00:14:43,170 Instead, now as a next step, 313 00:14:43,170 --> 00:14:46,660 I wanna work on the general configuration styles 314 00:14:46,660 --> 00:14:47,843 that we'll need here.