00:00 All right so to start with we want to do the screens colors and font family objects. I will actually copy all of this and in my css file, let me get rid of all of that, I will just paste that here. Obviously this is not valid css syntax so I'll comment it out but we will use that as

00:19 reference. So I will open the add theme object and we're going to start configuring our screens. So you might think that the screens key is screens but it's not. It's actually called

00:33 breakpoint and then here I can change the breakpoint sm and set it to 520 pixels and do the same with the breakpoint lg and 976 pixels. So let's take a look at one of the responsive

00:46 class. So let's search for sm. Okay we have one here and you can see that it's set to 520 pixels here now and if I was to comment that out now it should have changed to 640. So you can see that our configuration is working. Now let's try to do the same for the colors. So I can go dash dash

01:05 and you can see the autocomplete for all these possible namespaces. Here I'm going to go with color highlight whoops the same color here. So what I'm hoping is by redefining this now when we look at our design the highlight color should be back and yep it is look at this this is already

01:21 looking much better. So obviously the next things missing are the font sizes and the font family and the next step that we're doing here let me get rid of these two that I've done is the font family quite intuitive dash dash font family and we're going to call that poppins and here we need

01:39 to have a css syntax not an array and so this is correct. I can get rid of all that. Let's hope that we have our poppins font back and we don't which means I've made a mistake

01:51 and there is four dashes we only need two dashes to have the correct namespace and now try again and yes here it is this is the poppins font family. So we've managed to bring back our highlight color

02:07 our poppins font and our custom breakpoints and look how neat this configuration looks like. This is a regular css import and regular css variable definitions in the css syntax. I think this is really really cool and that should get you excited.