1 00:00:02,070 --> 00:00:03,920 So let's now continue by styling 2 00:00:03,920 --> 00:00:08,020 this configuration area and the overlay here. 3 00:00:08,020 --> 00:00:11,310 And for that, I'll actually start with that overlay. 4 00:00:11,310 --> 00:00:15,630 So with that aside element here, and for that, 5 00:00:15,630 --> 00:00:18,250 I want to make sure that we can select 6 00:00:18,250 --> 00:00:20,600 and style it with CSS, 7 00:00:20,600 --> 00:00:22,760 and we could go for an ID here. 8 00:00:22,760 --> 00:00:25,040 And that, that would be perfectly fine. 9 00:00:25,040 --> 00:00:29,950 We could also select it by the element type by aside, 10 00:00:29,950 --> 00:00:33,980 but we could have multiple aside elements on our page 11 00:00:33,980 --> 00:00:36,920 and maybe not all of them should be overlays. 12 00:00:36,920 --> 00:00:39,750 So I don't want to use the aside element itself 13 00:00:39,750 --> 00:00:44,120 to select it in CSS and using an ID would be fine. 14 00:00:44,120 --> 00:00:45,510 But on the other hand, 15 00:00:45,510 --> 00:00:47,960 whilst we might have multiple asides, 16 00:00:47,960 --> 00:00:50,730 which should not all be overlays, 17 00:00:50,730 --> 00:00:54,870 we might have multiple overlays in general on our page. 18 00:00:54,870 --> 00:00:57,670 Simply different HTML elements, 19 00:00:57,670 --> 00:01:00,110 which are styled as overlays, 20 00:01:00,110 --> 00:01:05,110 and, therefore, to define a generic reusable CSS style, 21 00:01:06,020 --> 00:01:09,250 which we can attach to different HTML elements 22 00:01:09,250 --> 00:01:12,660 with different element types and different ID's, 23 00:01:12,660 --> 00:01:16,870 I'll go for a class here so that even though here, 24 00:01:16,870 --> 00:01:19,090 we only have one overlay, 25 00:01:19,090 --> 00:01:21,700 we could easily reuse that style 26 00:01:21,700 --> 00:01:24,240 for different overlays as well. 27 00:01:24,240 --> 00:01:26,600 And I'll name this class modal 28 00:01:26,600 --> 00:01:30,820 because such an overlay is typically called a modal. 29 00:01:30,820 --> 00:01:33,660 And I didn't want to target this modal in my CSS file to 30 00:01:33,660 --> 00:01:35,623 apply the appropriate styling. 31 00:01:36,630 --> 00:01:40,100 Now for that, I'll, first of all, add another CSS file. 32 00:01:40,100 --> 00:01:44,240 And I'll name this overlays dot CSS, 33 00:01:44,240 --> 00:01:47,823 where I want to define my general overlay styles. 34 00:01:49,100 --> 00:01:51,390 Now that CSS file needs to be imported 35 00:01:51,390 --> 00:01:53,050 if we need to link to it. 36 00:01:53,050 --> 00:01:57,960 So an index HTML, after linking to styles CSS, 37 00:01:57,960 --> 00:02:02,920 I will add another link where I link to overlays CSS 38 00:02:02,920 --> 00:02:05,233 so that these styles are loaded. 39 00:02:06,540 --> 00:02:10,000 And with that, we can style this class here 40 00:02:10,000 --> 00:02:11,920 by going to overlay CSS 41 00:02:11,920 --> 00:02:16,920 and selecting this modal class with the class selector. 42 00:02:16,940 --> 00:02:21,940 And here I'll start by setting the position to fixed. 43 00:02:22,690 --> 00:02:25,270 And I'm doing this so that the overlay 44 00:02:25,270 --> 00:02:29,340 is always on top of the content and above everything else. 45 00:02:29,340 --> 00:02:30,620 And if we would scroll, 46 00:02:30,620 --> 00:02:33,140 it stays in the middle of the screen 47 00:02:33,140 --> 00:02:35,400 or wherever we position it. 48 00:02:35,400 --> 00:02:38,930 And we can't scroll away from that overlay. 49 00:02:38,930 --> 00:02:41,030 It should be placed in the middle of the screen, 50 00:02:41,030 --> 00:02:43,350 and it should be visible until we close it. 51 00:02:43,350 --> 00:02:46,783 That's why it's fixed. So to be can't scroll away. 52 00:02:48,150 --> 00:02:51,340 Now, when we use position fixed or absolute, 53 00:02:51,340 --> 00:02:54,710 we typically should use top and left and so on 54 00:02:54,710 --> 00:02:59,060 to tell CSS where the items should not be positioned. 55 00:02:59,060 --> 00:03:03,890 And here I'll set this to 20% so that we moved 56 00:03:03,890 --> 00:03:08,350 that modal 20% down from the top of the screen. 57 00:03:08,350 --> 00:03:10,340 And then I also said left and here, 58 00:03:10,340 --> 00:03:14,520 I want to move it 5% into the screen. 59 00:03:14,520 --> 00:03:18,110 Though, I will say that these are my mobile styles. 60 00:03:18,110 --> 00:03:20,400 I want to have different styles on bigger screens. 61 00:03:20,400 --> 00:03:23,030 And for this I'll add a media query. 62 00:03:23,030 --> 00:03:26,080 We can simply do this by adding at media here. 63 00:03:26,080 --> 00:03:29,720 And then I want to check if we have a min width 64 00:03:29,720 --> 00:03:33,340 on our screen of at least 48 rem. 65 00:03:33,340 --> 00:03:35,810 You can of course play around with that value. 66 00:03:35,810 --> 00:03:38,860 That is a value that used to work fine 67 00:03:38,860 --> 00:03:40,970 for me here for this page. 68 00:03:40,970 --> 00:03:43,310 And then I want to select modals 69 00:03:43,310 --> 00:03:46,080 and apply different styles if we are on a screen 70 00:03:46,080 --> 00:03:48,320 that has at least that with. 71 00:03:48,320 --> 00:03:50,983 And here, I want to set left to a different value. 72 00:03:51,820 --> 00:03:55,530 And to be very precise here on such screens, 73 00:03:55,530 --> 00:03:58,883 I want to set left to a calculated value. 74 00:03:59,720 --> 00:04:02,800 For this, I'll use this calc function, 75 00:04:02,800 --> 00:04:05,013 which is built into CSS, 76 00:04:05,013 --> 00:04:09,360 which allows me to calculate a dimension. 77 00:04:09,360 --> 00:04:11,730 And we can calculate by, for example, 78 00:04:11,730 --> 00:04:13,420 using the middle of the screen. 79 00:04:13,420 --> 00:04:18,420 So 50% from the left, and then we can deduct 20 rem, 80 00:04:19,220 --> 00:04:22,210 to have a left border of our modal, 81 00:04:22,210 --> 00:04:25,990 which is in the middle of the screen minus 20 rem. 82 00:04:25,990 --> 00:04:29,980 And I'm using 20 rem here as a value which I deduct 83 00:04:29,980 --> 00:04:32,280 from 50% because I want to 84 00:04:32,280 --> 00:04:36,583 give my model a fixed width of 40 rem here, 85 00:04:37,820 --> 00:04:40,690 which ensures that this is the width of my modal 86 00:04:40,690 --> 00:04:42,930 and half that width is what I want to deduct 87 00:04:42,930 --> 00:04:47,180 from the middle so that the modal overall is centered, 88 00:04:47,180 --> 00:04:49,730 because we start 20 rem from the middle on the left, 89 00:04:49,730 --> 00:04:54,270 and then plus 40 rem ends at 50% plus 20 rem. 90 00:04:54,270 --> 00:04:57,580 So the center of the modal will be exactly in the middle 91 00:04:57,580 --> 00:04:59,883 of the screen if we use these values. 92 00:05:01,670 --> 00:05:03,854 Now on a mobile screen on the other hand, 93 00:05:03,854 --> 00:05:05,974 I'll set the width to 90%, 94 00:05:05,974 --> 00:05:08,560 which will also center it since we have left 5%. 95 00:05:08,560 --> 00:05:11,570 So we have 90% width of the modal, 96 00:05:11,570 --> 00:05:15,593 5% on the left, and then automatically 5% on the right. 97 00:05:17,430 --> 00:05:19,450 And these values should lead to 98 00:05:19,450 --> 00:05:21,983 a nicely centered and positioned modal. 99 00:05:23,520 --> 00:05:27,580 Now, I also will set a background color here of white 100 00:05:27,580 --> 00:05:30,820 for my modal container, and I'll add a padding 101 00:05:30,820 --> 00:05:33,020 of 1 rem so that the content inside 102 00:05:33,020 --> 00:05:36,053 of that overlaid doesn't sit directly on the edges. 103 00:05:38,090 --> 00:05:39,940 I also want to have rounded corners. 104 00:05:39,940 --> 00:05:44,940 So I'll add a border radius of, let's say, 6 pixels. 105 00:05:46,350 --> 00:05:48,400 And I want to have a slight drop shadow 106 00:05:48,400 --> 00:05:50,040 by adding a box shadow here 107 00:05:50,040 --> 00:05:53,730 and setting this to 0, 2 pixels 108 00:05:53,730 --> 00:05:56,300 so these are the X and Y values 109 00:05:56,300 --> 00:05:59,160 for the shadow and then a blur radius 110 00:05:59,160 --> 00:06:01,473 for the shadow of 8 pixels. 111 00:06:02,650 --> 00:06:07,330 And then I'll use RGBA as a color value. 112 00:06:07,330 --> 00:06:12,330 RGBA so that we can add some transparency of 0, 0, 0, 0.2. 113 00:06:15,550 --> 00:06:17,770 Last but not least, and very important, 114 00:06:17,770 --> 00:06:21,400 I'll set display to none, though, 115 00:06:21,400 --> 00:06:24,920 so that it's not visible out of the box. 116 00:06:24,920 --> 00:06:26,440 Why am I doing that? 117 00:06:26,440 --> 00:06:30,830 Because it should be made visible via JavaScript later. 118 00:06:30,830 --> 00:06:33,690 So initially it should not be visible. 119 00:06:33,690 --> 00:06:35,440 Though, for the moment, I'll remove that 120 00:06:35,440 --> 00:06:38,090 so that we can see it and so that we can check 121 00:06:38,090 --> 00:06:40,250 whether it looks all right. 122 00:06:40,250 --> 00:06:41,750 And that does look good. 123 00:06:41,750 --> 00:06:42,890 Here's the modal. 124 00:06:42,890 --> 00:06:45,590 And as you see, because I have position fixed, 125 00:06:45,590 --> 00:06:49,233 it scrolls with my page and is always visible. 126 00:06:50,170 --> 00:06:51,780 Now, the content in the modal 127 00:06:51,780 --> 00:06:54,030 is not looking the way it should, 128 00:06:54,030 --> 00:06:55,320 but we'll work on that soon, 129 00:06:55,320 --> 00:06:57,363 but the modal itself looks fine. 130 00:06:58,510 --> 00:07:00,070 However, I want to have a little bit 131 00:07:00,070 --> 00:07:02,860 of a background behind that modal. 132 00:07:02,860 --> 00:07:04,070 The content of the page, 133 00:07:04,070 --> 00:07:05,350 which is not in the Modal, 134 00:07:05,350 --> 00:07:10,350 should be overlaid by some black, transparent background, 135 00:07:10,700 --> 00:07:14,870 also so that we can't interact with the other content. 136 00:07:14,870 --> 00:07:17,690 And for this we'll add a so-called backdrop. 137 00:07:17,690 --> 00:07:20,010 That's another HTML element which we'll add, 138 00:07:20,010 --> 00:07:22,570 which only serves the purpose of hiding 139 00:07:22,570 --> 00:07:25,313 the rest of the page whilst the modal is open. 140 00:07:26,230 --> 00:07:29,410 And I'll add that backdrop right here 141 00:07:29,410 --> 00:07:31,830 in the body at the beginning of the body. 142 00:07:31,830 --> 00:07:34,920 And it's just a div without any content, 143 00:07:34,920 --> 00:07:37,325 but with an ID of backdrop 144 00:07:37,325 --> 00:07:40,610 by which I will select it in my CSS code. 145 00:07:40,610 --> 00:07:43,760 And that div is only there for styling purposes. 146 00:07:43,760 --> 00:07:46,000 That's also why I'm using a div. 147 00:07:46,000 --> 00:07:48,540 It is not holding any content 148 00:07:48,540 --> 00:07:50,650 that needs to be described or shown. 149 00:07:50,650 --> 00:07:53,580 Instead, it's only there for styling purposes 150 00:07:53,580 --> 00:07:55,503 in conjunction with that modal. 151 00:07:56,430 --> 00:08:00,020 And I want to target backdrop in overlays CSS, 152 00:08:00,020 --> 00:08:02,563 since it belongs to my modal in the end. 153 00:08:03,870 --> 00:08:06,730 In here, also like backdrop by the ID 154 00:08:06,730 --> 00:08:09,150 with help of the ID selector. 155 00:08:09,150 --> 00:08:11,100 And then here on the backdrop, 156 00:08:11,100 --> 00:08:13,890 I also want to have a position of fixed 157 00:08:13,890 --> 00:08:17,340 so that this also scrolls along with the page. 158 00:08:17,340 --> 00:08:20,726 And I'll set top to 0 and left to 0, 159 00:08:20,726 --> 00:08:24,970 because that should start in the top left corner. 160 00:08:24,970 --> 00:08:29,970 And then I'll set width to 100% and height to 100% 161 00:08:30,690 --> 00:08:34,393 so that this takes the full width and height of the screen. 162 00:08:35,679 --> 00:08:39,240 And now I'll add a background color here of RGBA. 163 00:08:39,240 --> 00:08:44,240 And then I'll add a black color with 0, 0, 0, .7, 164 00:08:44,570 --> 00:08:46,720 so that it's a transparent black, 165 00:08:46,720 --> 00:08:49,290 but less transparent than the shadow 166 00:08:49,290 --> 00:08:51,163 I had on the modal, for example. 167 00:08:52,510 --> 00:08:55,170 And with that, if I save this, 168 00:08:55,170 --> 00:08:59,620 I got this nice backdrop, this grayish background. 169 00:08:59,620 --> 00:09:01,000 And now I, for example, 170 00:09:01,000 --> 00:09:03,140 can't click Start New Game anymore 171 00:09:03,140 --> 00:09:06,890 because that background is in between. 172 00:09:06,890 --> 00:09:08,930 And now that is looking the way it should. 173 00:09:08,930 --> 00:09:12,210 Soon, I will hide both the backdrop and the modal 174 00:09:12,210 --> 00:09:14,930 with display none as I showed to you. 175 00:09:14,930 --> 00:09:16,260 But before we do that, 176 00:09:16,260 --> 00:09:17,560 I actually want to continue 177 00:09:17,560 --> 00:09:20,490 with styling the configuration items, 178 00:09:20,490 --> 00:09:22,970 the content of the modal and all of this list 179 00:09:22,970 --> 00:09:25,900 that summarizes to configuration and only thereafter, 180 00:09:25,900 --> 00:09:27,940 once all of that is finished, 181 00:09:27,940 --> 00:09:30,113 I'll hide the modal and the backdrop. 182 00:09:31,000 --> 00:09:34,500 So let's continue with that overall configuration, then. 183 00:09:34,500 --> 00:09:37,750 For that, I'll start with the content here in the modal. 184 00:09:37,750 --> 00:09:40,750 And there I'll start with that title. 185 00:09:40,750 --> 00:09:45,313 So with that h2 element that I have in here. 186 00:09:46,160 --> 00:09:48,540 And I want to get rid of some margin here, 187 00:09:48,540 --> 00:09:51,550 so that we have less space above the title. 188 00:09:51,550 --> 00:09:54,820 And a for this I'll add an ID here to this aside 189 00:09:54,820 --> 00:09:59,023 to my modal here and name this config overlay. 190 00:10:00,310 --> 00:10:02,290 Name is up to you though. 191 00:10:02,290 --> 00:10:04,320 And I'll add a new CSS file, 192 00:10:04,320 --> 00:10:07,220 which I'll name configuration dot CSS, 193 00:10:07,220 --> 00:10:09,894 which holds the CSS code that is related 194 00:10:09,894 --> 00:10:14,080 to the configuration, but not to just the overlay. 195 00:10:14,080 --> 00:10:16,550 Overlays CSS really holds the code 196 00:10:16,550 --> 00:10:19,420 that only deals with styling the overlay 197 00:10:19,420 --> 00:10:23,494 so that we could reuse the modal class on other overlays. 198 00:10:23,494 --> 00:10:25,650 Configuration CSS is now specifically 199 00:10:25,650 --> 00:10:28,073 for the configuration part of this page. 200 00:10:29,265 --> 00:10:31,479 And therefore here in configuration CSS, 201 00:10:31,479 --> 00:10:34,974 I'll target config overlay, this ID, which I added. 202 00:10:34,974 --> 00:10:37,313 And then the h2 element, which is in there 203 00:10:37,313 --> 00:10:39,230 with this CSS selector. 204 00:10:40,593 --> 00:10:43,750 And then there, I want to use a margin, 205 00:10:43,750 --> 00:10:47,433 where I want to set margin and set this to .5 rem, 206 00:10:48,400 --> 00:10:50,530 so that we have less spacing here. 207 00:10:50,530 --> 00:10:52,000 And to see this effect, of course, 208 00:10:52,000 --> 00:10:55,840 we have to go to index HTML and not just import 209 00:10:55,840 --> 00:11:00,840 and link to overlaying CSS, but also to configuration CSS. 210 00:11:02,360 --> 00:11:05,693 With that, if you reload, that should look a bit better. 211 00:11:06,920 --> 00:11:07,753 Now, of course, 212 00:11:07,753 --> 00:11:10,600 I did not want to add a margin to the left though. 213 00:11:10,600 --> 00:11:13,630 So I'll set left and right values to 0 here 214 00:11:13,630 --> 00:11:15,620 by adding a 0 to the margin. 215 00:11:15,620 --> 00:11:16,853 And now it looks better. 216 00:11:18,580 --> 00:11:21,470 Now I want to have some spacing around this input. 217 00:11:21,470 --> 00:11:26,470 And for that, I added this div around my labeling input, 218 00:11:27,280 --> 00:11:30,820 and I'll give this a class of form-control, 219 00:11:30,820 --> 00:11:32,550 which we also could reuse 220 00:11:32,550 --> 00:11:35,240 if we had other a form controls, 221 00:11:35,240 --> 00:11:37,880 other label input combinations. 222 00:11:37,880 --> 00:11:41,090 And we can now target this form control class 223 00:11:41,090 --> 00:11:43,860 here in our CSS code. 224 00:11:43,860 --> 00:11:46,460 And then here's simply add a little bit of margin 225 00:11:46,460 --> 00:11:49,570 of the .5 rem top and bottom 226 00:11:49,570 --> 00:11:53,313 and 0 left and right, so that, that looks like this. 227 00:11:54,670 --> 00:11:57,090 Now, I also want to change the look of the label 228 00:11:57,090 --> 00:11:59,240 and the input element, and for that, 229 00:11:59,240 --> 00:12:01,200 I'll target form control. 230 00:12:01,200 --> 00:12:06,200 And then, let's say the label in there. 231 00:12:06,630 --> 00:12:08,830 And I'll set this display to block, 232 00:12:08,830 --> 00:12:11,123 which will force a line break. 233 00:12:12,820 --> 00:12:15,840 And I want to add a margin to the bottom. 234 00:12:15,840 --> 00:12:19,660 Margin bottom here on the label of .5 rem. 235 00:12:19,660 --> 00:12:21,520 So that there's a little bit of spacing 236 00:12:21,520 --> 00:12:23,910 between the label and the input field. 237 00:12:23,910 --> 00:12:27,880 And I'll set the font weight to bold for the label. 238 00:12:27,880 --> 00:12:29,343 So did we have this look. 239 00:12:30,540 --> 00:12:31,990 Now for the input field, 240 00:12:31,990 --> 00:12:34,240 I also want to change the styling. 241 00:12:34,240 --> 00:12:36,900 So here we can target form control input, 242 00:12:36,900 --> 00:12:38,990 the input element in there. 243 00:12:38,990 --> 00:12:41,460 And first of all, inherit the font, 244 00:12:41,460 --> 00:12:44,490 because, just like the bottom, by default, 245 00:12:44,490 --> 00:12:46,800 we don't inherit our font by default. 246 00:12:46,800 --> 00:12:51,040 It has some custom font family applied by the browser. 247 00:12:51,040 --> 00:12:54,020 Now I tell it to use the font family 248 00:12:54,020 --> 00:12:55,810 and the font styles to find on 249 00:12:55,810 --> 00:12:57,823 the parent elements on the containers. 250 00:12:59,040 --> 00:13:02,500 And I'll also change the border to 1 pixel solid. 251 00:13:02,500 --> 00:13:05,210 And then I prepared a grayish color, 252 00:13:05,210 --> 00:13:09,923 which is 2-0-4, 2-0-4, 2-0-4 RGB. 253 00:13:11,540 --> 00:13:14,360 And I'll give this a width of, let's say, 254 00:13:14,360 --> 00:13:17,023 15 rem, which should look decent, 255 00:13:18,100 --> 00:13:20,580 and some padding of .35 rem 256 00:13:20,580 --> 00:13:22,940 for some spacing inside of the input. 257 00:13:22,940 --> 00:13:24,453 So did it look like this. 258 00:13:25,660 --> 00:13:28,170 Of course you could also reduce the width of the modal 259 00:13:28,170 --> 00:13:30,470 since this is not really a bit too big 260 00:13:30,470 --> 00:13:32,460 for this kind of input 261 00:13:32,460 --> 00:13:35,380 but I will rather solve this in a different way. 262 00:13:35,380 --> 00:13:39,330 And instead go to my config overlay overall, 263 00:13:39,330 --> 00:13:42,430 which is my modal in this case here, 264 00:13:42,430 --> 00:13:46,363 and set text-align to center here. 265 00:13:48,360 --> 00:13:49,410 And by setting this, 266 00:13:49,410 --> 00:13:51,130 this is not all nicely centered 267 00:13:51,130 --> 00:13:54,033 and that's now looking quite decent here. 268 00:13:55,440 --> 00:13:59,620 And that's now my finished input box here. 269 00:13:59,620 --> 00:14:02,330 And therefore, to now focus on the upper parts 270 00:14:02,330 --> 00:14:04,010 that make up the configuration, 271 00:14:04,010 --> 00:14:07,440 the summary of our configuration options to be precise, 272 00:14:07,440 --> 00:14:09,500 I want to get rid of the modal and the overlay, 273 00:14:09,500 --> 00:14:13,130 and therefore in overlays CSS on the modal, 274 00:14:13,130 --> 00:14:18,090 we'll add display none and do the same on the backdrop. 275 00:14:18,090 --> 00:14:19,540 And then again, we'll change this 276 00:14:19,540 --> 00:14:21,560 with help of JavaScript later, 277 00:14:21,560 --> 00:14:24,550 but for the moment we'll set display to none on both. 278 00:14:24,550 --> 00:14:26,790 And with that, that is gone. 279 00:14:26,790 --> 00:14:29,553 Now let's focus on this part now. 280 00:14:29,553 --> 00:14:32,760 Now, for this part, of course, an index HTML, 281 00:14:32,760 --> 00:14:35,950 we have this section with the game configuration ID, 282 00:14:35,950 --> 00:14:37,370 and hence, it's this ID, 283 00:14:37,370 --> 00:14:41,090 which I want to target to style these elements. 284 00:14:41,090 --> 00:14:43,210 And I'll just add these styles below 285 00:14:43,210 --> 00:14:45,690 the other styles and configuration CSS. 286 00:14:45,690 --> 00:14:48,590 You could group and sort your styles differently, 287 00:14:48,590 --> 00:14:51,240 but I'm basically going through these styles 288 00:14:51,240 --> 00:14:54,220 as they are applied on the page. 289 00:14:54,220 --> 00:14:56,940 Alternatively, we could sort by ID selectors 290 00:14:56,940 --> 00:14:59,226 and class selectors, but I think this approach 291 00:14:59,226 --> 00:15:01,993 also makes it quite easy to follow along. 292 00:15:03,370 --> 00:15:07,770 So here, I'll target this game configuration ID, 293 00:15:07,770 --> 00:15:10,310 which we have here on this section 294 00:15:10,310 --> 00:15:12,073 with the ID selector, of course. 295 00:15:12,940 --> 00:15:15,530 And then, there, I, first of all, 296 00:15:15,530 --> 00:15:20,280 will apply a width of 90%, but a max width 40 rem 297 00:15:20,280 --> 00:15:24,000 to get some responsive behavior without any media query, 298 00:15:24,000 --> 00:15:26,920 simply by restricting the max width. 299 00:15:26,920 --> 00:15:30,070 And then I'll add a margin of 3 rem top and bottom 300 00:15:30,070 --> 00:15:33,683 and auto left and right to center this container. 301 00:15:34,600 --> 00:15:37,300 And then we can add text-align center here 302 00:15:37,300 --> 00:15:40,000 to also align content, the text content, 303 00:15:40,000 --> 00:15:43,103 or any inline element content in there. 304 00:15:44,320 --> 00:15:46,193 With that, we've got this look. 305 00:15:47,160 --> 00:15:49,830 It's not the final look, but a first step. 306 00:15:49,830 --> 00:15:53,010 As a next step, I want to style the items 307 00:15:53,010 --> 00:15:56,520 in the ordered list and the ordered list overall. 308 00:15:56,520 --> 00:15:59,110 So for this I'll target game-configuration, 309 00:15:59,110 --> 00:16:00,460 and then the ordered list, 310 00:16:00,460 --> 00:16:04,360 which we find in there with this CSS selector. 311 00:16:04,360 --> 00:16:06,470 And first of all, get rid of the list-style 312 00:16:06,470 --> 00:16:07,530 with list-style none 313 00:16:09,210 --> 00:16:14,160 so that these numbers here, 1 and 2 are removed. 314 00:16:14,160 --> 00:16:16,760 And also get rid of any default margin 315 00:16:16,760 --> 00:16:18,920 and padding that we'll have on there 316 00:16:18,920 --> 00:16:21,433 and set display to flex. 317 00:16:22,930 --> 00:16:24,750 And with that, automatically , 318 00:16:24,750 --> 00:16:26,800 the two items are next to each other, 319 00:16:26,800 --> 00:16:29,840 because the default configuration for flex box is 320 00:16:29,840 --> 00:16:32,930 that the items sit in the same line. 321 00:16:32,930 --> 00:16:34,560 And now we can style the items 322 00:16:34,560 --> 00:16:36,660 by targeting game-configuration. 323 00:16:36,660 --> 00:16:38,910 And then the list items we find in there, 324 00:16:38,910 --> 00:16:42,470 which are the list items in our ordered list here. 325 00:16:42,470 --> 00:16:45,050 We could also specifically target list items 326 00:16:45,050 --> 00:16:47,950 in the ordered list, but since we only have one list 327 00:16:47,950 --> 00:16:50,600 in the game configuration targeting list items, 328 00:16:50,600 --> 00:16:52,700 anywhere inside of game configuration, 329 00:16:52,700 --> 00:16:55,120 like this, also works. 330 00:16:55,120 --> 00:16:56,550 And then here, I'll add a margin 331 00:16:56,550 --> 00:16:59,990 of 1 rem in all directions, and a padding 332 00:16:59,990 --> 00:17:03,700 of 1 rem in all directions on all these lists items. 333 00:17:03,700 --> 00:17:07,740 And give both list items, a width of 50%, 334 00:17:07,740 --> 00:17:10,859 so that we split the space evenly. 335 00:17:10,859 --> 00:17:13,349 And then I'll apply a background color here, 336 00:17:13,349 --> 00:17:16,230 which I also selected in advance, 337 00:17:16,230 --> 00:17:21,230 which is RGB color of 2-4-3, 2-2-7, 2-5-5, like that. 338 00:17:24,530 --> 00:17:28,650 And add a border radius of 4 pixels. 339 00:17:28,650 --> 00:17:30,750 Last but not least, I'll also add a box shadow, 340 00:17:30,750 --> 00:17:35,750 And here I'll just copy the box shadow from my overlay, 341 00:17:35,760 --> 00:17:39,310 which I have here and apply this down there. 342 00:17:39,310 --> 00:17:42,270 I'll just reduce the radius to 4 pixels 343 00:17:42,270 --> 00:17:44,893 and change the Y value to 1 pixel. 344 00:17:47,050 --> 00:17:49,150 And with that, we've got these boxes 345 00:17:49,150 --> 00:17:50,943 with the configuration summary. 346 00:17:52,070 --> 00:17:56,170 Now I also want to slightly change my titles in there, 347 00:17:56,170 --> 00:17:59,970 specifically the player name, which will later be shown. 348 00:17:59,970 --> 00:18:01,300 And for this, of course, 349 00:18:01,300 --> 00:18:06,300 in my game configuration, whoops game configuration, 350 00:18:06,500 --> 00:18:10,650 I will target the h3 elements because the only 351 00:18:10,650 --> 00:18:13,180 h3 elements which I have in a section 352 00:18:13,180 --> 00:18:16,430 with this ID are in my list items. 353 00:18:16,430 --> 00:18:20,290 And therefore, here I'll target h3 elements in there, 354 00:18:20,290 --> 00:18:25,290 and then change the font size a little bit, to 1.5 rem, 355 00:18:27,920 --> 00:18:31,800 and the margin to .5 rem and 0 left and right, 356 00:18:31,800 --> 00:18:36,410 and the color to RGB color, which I prepared in advance, 357 00:18:36,410 --> 00:18:37,523 which is 9-4, 4, 1-6-8. 358 00:18:43,010 --> 00:18:45,250 And for that to really look good, 359 00:18:45,250 --> 00:18:49,470 I'll also target the h2 element, 360 00:18:49,470 --> 00:18:53,180 which sits right above the h3 element here, 361 00:18:53,180 --> 00:18:55,530 which sets player one or player two, 362 00:18:55,530 --> 00:18:57,770 and I'll shrink that a little bit, 363 00:18:57,770 --> 00:18:59,260 even though it's an h2 element, 364 00:18:59,260 --> 00:19:01,320 and the other one is an h3 element, 365 00:19:01,320 --> 00:19:03,180 I will now use CSS to make 366 00:19:03,180 --> 00:19:05,880 this one smaller than the h3 element. 367 00:19:05,880 --> 00:19:08,240 And I'll set this h2 element to 1 rem 368 00:19:08,240 --> 00:19:10,280 as a font size and the margin 369 00:19:10,280 --> 00:19:12,673 to .5 rem 0 as well. 370 00:19:14,640 --> 00:19:18,113 With that, this looks quite decent, I would say. 371 00:19:19,630 --> 00:19:21,770 Last but not least, I want to change the style 372 00:19:21,770 --> 00:19:25,130 of these symbols that are being used. 373 00:19:25,130 --> 00:19:28,627 And that's just a regular paragraph, which I have here. 374 00:19:28,627 --> 00:19:30,810 And we could give this paragraph a class, 375 00:19:30,810 --> 00:19:32,980 and, actually, that's what I'll do 376 00:19:32,980 --> 00:19:35,450 so that if we had other paragraphs in there, 377 00:19:35,450 --> 00:19:37,980 we would not clash with our styles. 378 00:19:37,980 --> 00:19:42,113 And I'll just give this a class of player-symbol, 379 00:19:43,130 --> 00:19:46,583 and apply that here on the upper paragraph, as well. 380 00:19:47,850 --> 00:19:49,670 And then in configuration CSS, 381 00:19:49,670 --> 00:19:54,593 we can target player-symbol like that, 382 00:19:55,860 --> 00:19:57,670 and now it changed the font-size to 2 rem, 383 00:19:57,670 --> 00:20:00,850 so make it really big, change the font weight 384 00:20:00,850 --> 00:20:03,340 to bold so that it really stands out 385 00:20:04,310 --> 00:20:06,800 and give it a color of RGB. 386 00:20:06,800 --> 00:20:11,483 And then here I prepared 4-7, 4, 8-2. 387 00:20:13,540 --> 00:20:15,950 And with that, that doesn't look too bad. 388 00:20:15,950 --> 00:20:18,400 I want to reduce the margin a little bit, though. 389 00:20:18,400 --> 00:20:22,573 So set the margin here, to .5 rem 0, as well. 390 00:20:23,730 --> 00:20:25,030 Save that. 391 00:20:25,030 --> 00:20:27,640 And now that looks quite good. 392 00:20:27,640 --> 00:20:30,700 So now I have that summary and now the last part, 393 00:20:30,700 --> 00:20:32,760 yet, of course, a very important part, 394 00:20:32,760 --> 00:20:37,553 will be to style that game area, the actual game field.