 Hi there, my friend and friends. Media queries are an essential part of modern web development, as they're a big part of how we create responsive websites today. Though that is actually going to start to shift, or it actually has started to shift already, as we now have container queries in all of the major browsers as well. The two of them work very much in the same way, but in kind of different contexts, and it can be confusing at first to know when you would use one or the other one. And it's actually kind of hard to explain what container queries are without first explaining how media queries work, and that's what this video is going to be all about. We're going to dive in and compare media queries and container queries. We're going to look at examples that show how they're different, and we're also going to talk about when you might use one over the other, and also take a quick peek at some of the newer features that are sort of in the pipeline and coming in the future with these as well. Now, just before we dive in though, I do want to let you know that I have new merch. Check this out. I worked with Christopher Kirk Nielsen, who is also the designer behind the state of survey logos and shirts to come up with a few unique CSS-focused designs. If you'd like to show off your love for CSS and also let people know that you're a front-end friend as well, the store is linked down below, and I'm also going to be retiring the old lineup as well, keeping just these three designs. So let's dive right into it with potentially the most basic example and sort of the common one we see for media queries. We're going to sort of explain how this is working. We're going to get a little bit more into practical use cases than this one, but just really fast media queries. They've been a core ingredient for responsive design ever since Ethan Marcotte demonstrated them in a 2010 article defining responsive web design. He's ushered in this idea of what it is, and media queries were a big part of it, and it's basically to tell the browser to apply a different style when we hit a certain screen size. So here you can see that we have my purple and then we turn it to this orange-red right here, and not the most practical example, but it's a very visual one. A few things about the syntax of a media query that are really, really important, and this will follow through also when we get to container queries for the most part, though there are a few unique things with container queries, but starting with the media query, we always have the app media at the start. So it's an app media, and then we write whatever it is. And if you're very new to CSS, what I'd encourage you to do is do your app media, open and close the regular parentheses, and then open and close some curly braces. Just so you don't forget anything along the way, because this is sort of the core syntax behind writing whether it's a media query or a container query. We just want to get that core syntax down so we don't forget anything. Then in here, you write what you want. So we can do my min width of say 600 pixels, and then apply the styles that we want. So that's just the core thing we're saying at a minimum width. So it becomes 600 pixels and bigger. We're going to apply some styles. And you'll notice in the original one I had here, we also had this screen. So we're saying screen and this. And this just means that it's going to apply for screens, but not if somebody prints the website. So it can be useful. You don't need to include that. We could just do a media query this way, or if it's something that you think people might be printing out and you want to make sure the styles are only applying for screens, then you can include the screen at the beginning here. Now I've just updated the code here. You can see a bit of a difference. And this is one of the core reasons in my opinion that media queries are still extremely valuable, is that we can update custom properties through media queries. And what's nice about this is, I can do my declaration here for my body's background color one time, and I can update that custom property here. And if you're not familiar with custom properties, I'll include a link in the description that talks more about them, but I can just update that custom property and then it's still going to work just like it was working before. Obviously we don't want to be changing background colors like this. That's not the most useful thing in the world, but this exact same principle can apply for font sizes. And this is a way that I often will use media queries on my projects, and I'm gonna make this one just a smidge bigger, and we'll go with like an 850. And so I have my styles that I'm setting here where I'm just setting all of these different font sizes here. And what's nice about using custom properties like this is I might use this one in six different places. But then I don't have to go through and reselect all of those different things if I want to change that font size at a different media query. I can just change that FS 500 here within a media query and now my font sizes are going to adjust between those different screen sizes like that. Now there's other ways of doing responsive type with clamps and other things that are wonderful, but as a very simple system, this works really well. And when we're doing something like this, what we're essentially doing is we're telling the browser how to change styles at a specific width, and we call this a break point. And we generally call this, often it's where the layout breaks at different screen sizes. So it sort of breaks here and breaks there, I guess. And the one thing with them is you can do it at something like this. Or if we go back to our simple example here, just because again, it's gonna be a little bit more visual, we can also create ranges. So I can come in here and I can say, instead of just being at a min width of 600, I can say and max width of say 800 pixels. And now it's only gonna be orange red from when we get to a width of 600, it's gonna go. And then it's gonna turn off again at 800. It's only applying in between this range that we have right here. Now, what you might want is a different background color, or maybe more realistically, we'd be doing this with font sizes where you're saying like, I have this, and then I want my font sizes to get bigger again at a larger font size or screen size. But I'm gonna stick with the colors just because they're a lot more visual and we're doing silly demos. Definitely there's other times we might wanna do this. Then we're gonna come here and choose this one again. And you might say, well, at a larger size than 800, I want a new style. So we're gonna do a screen and then we can come here and say that we're gonna have a min width, right? And this min width is going to be, we can switch the color at that size. So here we have our Rebecca purple, then we get to our orange red and prepare yourself for a very bright color as we get into this bright green color. Now, there is one thing with this is when I get to exactly 800 pixels, we don't actually know which one the browser is really gonna pick here. It is going to this light green, but we're actually telling the browser it should be two different colors and it's relying on the cascade here a little bit in how it works. And because if I move this up on top and we have the min width one right here, at that exact 800 pixel point, it's going to be keeping the orange red, which we can see right here. You see I'm having a little bit of trouble, but then we have the orange red and then it's going to that one. So you sort of run into a bit of a conflict and there's times where you can even have like all the styles disappear if you don't have like a base value set up and it can be a really a little bit weird. So often what you'll actually see is like this thing where you get to a 799 here and then you have your 800 here or if you're using other units, you might even see some that have like decimal points or if you're using REMS or EMS because you don't have to use pixels for these. And if you watched older videos of mine, you might have seen me using EMS it was for browser consistencies but those have since been fixed. So you can use pixels safely here. But you might see something like a 65.999 REM and then a 66 REM here or something. So if ever you come across a code base that has that that's the reason is you don't want this overlap of styles and you're trying to prevent it. But luckily they've actually updated how things work a little bit with a new range syntax. So instead of having to write things like this we luckily don't have to do it anymore. So what I could actually do is my app media we still want to put in the same syntax before we open and close and then we include our rules inside of there. And now what I could do here is this is an interest I'm gonna delete this one here as well just so we can focus on one at a time. But I could say if my width is greater than 600 pixels and this is kind of a nice much cleaner way of writing it because you know exactly what you're getting and you can also easily create ranges here as well like we had before. So I could actually come here and say 600 pixels and my width so my you know this should be pixels not just 600. So I'm saying if my width is greater than 600 pixels but it is smaller than 800 pixels then we're going to run into that range again where we get it working at those. And this is just especially if you're coming from computer science or something like that this is much cleaner and easier to understand but it's also I find a lot easier to do we have the single one we don't need the ands and other stuff. Now this is if it's smaller than 800 which means it's going to stop at 799. So as soon as I hit 800 pixels like this isn't including that anymore if I wanted to include those numbers I can actually put the equal sign now this is looking really kind of funky here just cause I have the glyphs on in code pen but really this is what I'm typing just with no space in between you can see it's kicking in a glyph when I make that change. So it's just the greater than or and equal to so if my width is between 600 and 800 inclusive then it's going to be this orange red and then of course I can do it at media over here if I wanted to and then say 800 pixels and as long as my width is greater than that value we can do my route and BG color becomes whatever we want red just to do something fast and then we get all the different ones the red I guess is a bit hard to see the change let's try per, let's just do green. So we have something that's a bit different so you can see all of them are working. Now one thing with this range syntax that is important to know is browser support is not perfect this is as of the time of recording it's in all the major browsers but it's about 89% support right now so just do be careful if you are using it do keep that in mind but I'll include a link to this in the description below so you can check what the up to date browser table is if you're watching this in the future and one of the reasons actually I really like this syntax more is just because I always found the min width and max width a little bit counterintuitive or weird because min width you're saying the word min but it was bigger than and then max width would be smaller than just when you're going fast it can be a little bit counterintuitive where this is like much more obvious right you have that or I could do it the other way around I could say if my width is smaller than 800 pixels can type it however you want and it just works and it's I find it much cleaner and much better so I'm happy that it's here now we're gonna move on to container queries in just a second but one thing I do wanna say really fast is this isn't the only thing that we're using media queries for this video is really focusing on like layout that's why because container queries are much more for layout than other things but we can do a lot more with media queries than just check for font sizes for example in this one right here you can see I have my font sizes set up but I also have a whole bunch of colors set up and I have this prefers media prefers color scheme dark and so if the person's on a dark scheme I'm redefining all of those colors so I'm completely changing my color palette and you know darks are being lights and so on and so forth and so if somebody was on a computer their system settings were for a light theme they'd be getting light colors like we can see here because it's using the ones there and if they're on something like I currently have with the dark as we saw then they would be getting the dark one like we can see right here so that's one of the things we can check for we can also do prefers reduced motion for people who have requested less motion because it could be that they find a lot of motion disorientating or it can actually cause nausea and if you have vestibular issues and stuff you don't want a lot of motion on your websites so we do have instead of prefers color scheme it would be prefers reduced motion and there's either reduced or no preference that you can use, you wouldn't be redefining your colors you'd be redoing your animations in there you can also check for aspects, ratios, heights if devices can hover and other stuff like that but I'll include a full link down below to an MDN article that shows you all of the different things because as I said I want to focus on layouts for the most part but I do want to mention that media queries can do more than just layout stuff they're useful for a whole bunch of other things and if you'd like a deep dive into the other things we can do with media queries let me know in the comments down below but with that done, let's jump into the world of container queries now container queries are very similar to media queries but there's a few key differences into how they work and we sort of are gonna treat them almost like a miniature viewport so it's the same idea as a media query where we're gonna change the layout depending on the size it's available it's just we have to say what we're looking at instead of looking at the entire viewport so as a first example here you're gonna see I have these three cards that are there and so it's just a card, a card, and a card nothing too fancy going on but they're all in a section here called of a class of cards and what we're going to do is and this is one of the requirements for using container queries is you have to define the container because if you don't have any defined containers the browser doesn't know what you actually want it to be looking at so to define a container there's two different things we can do we can just say that this is a container we can also give it a name and we'll get to the name thing in a little bit but I'm gonna say container type is inline size and this is the one you're going to use almost all of the time we do also have the option of only saying size here which means look at the height and the width whereas when I say inline size it's the inline axis this is like a logical property and the idea with inline size is that it's again it's basically looking at the width if you were to go into a vertical writing mode then potentially I guess it would be looking at the height and that's all we have to do and when you first do that it's not gonna change anything but we're saying now the browser knows that this cards is a container and as soon as I do that I can now open up this world of container queries for the things that are inside of there which will be my individual.card here so what we're gonna do is we're gonna come here and just like instead of an app media we're gonna write app container we're gonna do the same opening close of a parentheses and then an opening close of a curly brace here like as usual I can define my size so we can say a min width if we want we can do it this way so I'm gonna say a min width and in this case I'm gonna say 45 CH another option though if you prefer the range syntax is you could definitely say if the width is greater than 45 CH that would be the exact same thing and one nice thing with container queries is because they're new if you're using a container query and the container query is supported that means the range syntax is also supported so you can just use it this way all the time if you prefer so if our width is greater than 45 CH we can then select a card now I already created a quick style here just so we can do it a little bit faster but basically I'm just going to go to this two column layout and just have my title go all the way across the top so when we're at smaller screen sizes and if you don't know the CH unit it's characters wide so as long as I have a width of 45 I just found that worked well you can use pixels, you can use RAM you can use whatever you want there when you get to that size you can see we switch over to it being this two column layout and then it's going to work and stay that way and when you get to smaller it goes to here and we're doing this based on the size of this cards right here so right now you might be thinking well I can do the exact same thing you're doing here with a media query Kevin it's not really changing much why would I do it this way instead and you're kind of right so I'm going to update the content and I'll be right back all right so what I've done now is I have this main area right here and inside of the main we have this section here and then the section that we had with my cards originally before right there section at the top is just my content and then down at the bottom we have that and what I'm going to do is I'm going to come in here and I'm going to add in a media query just a traditional media query saying when my viewport is 760 pixels or bigger because that's how we use the min-width we're going to go to this two column layout where my column on the right is 300 pixels wide and then this just takes up the rest of the room and you'll notice something really important happening here which is if we go to the really small screen sizes because we have this set up only within my container query at the small screen sizes they're stacking when we get enough space they're going next to each other but then when it goes back to being a sidebar they're stacking on top of each other again and this is not something that we can do with a traditional media query this is something that only a container query can do because it's looking at the size of the container itself which is where these are living since we define that as my cards right here so let's just give this a border so we can see it five pixels solid red you can see that this is smaller than my 45ch so because it's smaller than that they're stacking and it's not using what we see right here which is amazing because if I change this back to a traditional media query it's going to go next to each other and it's completely breaking my layout as soon as we get past that stage here it's fine we get to the two columns and then it's just always going to stay two columns whereas with the container query it's all about where are those elements living and how much space do they have available to them this is really how the modern web is going with component-based design and it just makes our lives so much easier and there's one more really important thing with container queries is that we can also name our container queries so I've set up this other example right here that we're gonna take a look at and in this example, what I wanna sort of focus on is how you might have similar components in different areas and you might want them to behave a little bit differently so the one thing I have done is add this primary content class right here just so I could style that card differently just so we can keep an eye on it and know which one I'm speaking about so we're gonna be sort of focused on this one and one thing it's actually really important to know with container queries before we get to this naming part is if you don't have a container that's defined like here I have my dot card set up this should be working but I've deleted any mention of that cards with the inline size on it so because that's gone, it's just not working for container queries to work you need to have a defined container it will not fall back to the viewport and that is a very important thing to keep in mind so let's come back onto here we're gonna do that again so it's cards and we're gonna do a container type of inline size and again, you could do a size the size has a very big limitation because you're gonna also have to have a defined height on it you might feel like sometimes you wanna use just size because you don't know which one you wanna look for inline size 99% of the time I guarantee it and now you can actually see that by defining that here on my cards, the ones on this side it's working but this pink one it's not working because the pink one is living in my primary content it's not living in that other space so because it's living in this primary content area there's nothing defined for this one it's not working over here but these ones on the side that are above my head now those ones are working completely fine they're sort of as intended where they're breaking over and becoming two columns when they have enough room for it so one thing that you might think about doing is having a container class that just does this as a utility class and it's one of the reasons I've stopped using container for being a max width is because I think I might start doing this and using that's why I have a wrapper up here to hold my content so just something to think about but of course you don't have to do that we could have our cards and my primary content are both container type inline size now and again this is like this magic thing where these both have the same styles applied to them other than the background color but these ones are stacking on top of each other because they don't have enough room and this is going into two columns because it does have enough room this is magical if you're new to CSS and like you just might be like yeah that's cool if you've lived in the old way of doing things this is just incredibly, incredibly useful so at these sizes everything works the same they're stacked they go like that but where things can potentially get very interesting is if I name my containers because maybe I want things to be a little bit different depending on the situation and where things are being placed like maybe this one I wanted to always stay like this but these ones when they run out of room I want to change the text alignment it's a bit of a silly one but let's just, we're gonna come here and I'm gonna do my dot cards and we're gonna say we already have the container type being defined here so here I'm gonna write container name and we're just gonna call it cards make sense right? and then so this is my regular container but what we can do is we can also do an at container do the same thing open and close my parentheses open and close my curly braces so we have that set up but then here I could do cards so I'm putting the name of the container let's come in with the same size just so we have some consistency between those and I'm gonna say that my dot card that is inside of that we'll get a text align of center and just because it's fancy demo land we're working in now and we can do silly things to make things stand out I'm also gonna make the background yellow on them just so we can see a big difference so if I shrink these down now you see that they're getting a text alignment of center this is going to the center and this is lining up center here and so when we get to these bigger sizes it's getting that yellow background it's getting the centered and then it's not applying anymore but this is only working on these ones and it's not applying to this one and that has nothing to do with the background color I said originally let's delete this just to show it's not specificity there's nothing else it's because we're only applying these styles if it's inside of the cards container here and that's only gonna work because I've named my container right here so this is the type of thing where you can say that you have one component and it could have these certain styles and then depending on the container it's in not only can you change the layout but if it's in a very specific situation where it's in a specific container you can also have it change and be different as well and this is just extremely powerful and super amazing and useful in different ways and just really fast I've done it with the long hand on these if you wanted to you can just remove this from here and on my cards you could also use the container shorthand where I'm gonna say cards and inline size and now if I take a look at it you can see it's still working where I'm getting that yellow background that's still coming on so you can either use the long hand or the shorthand where you just have them separated with this forward slash and it's going to work in either situation we're registering the name and then we're saying that it's looking at the inline size and just to reiterate how this is working a media query is gonna be like hey browser add this viewport size when the browser window is this size we're gonna apply these styles when we get down to a container query we're saying hey browser when this element is living inside a defined container when that defined container gets to a minimum size of whatever I want you to change the layout and then this last one here is saying hey browser when a dot card is inside of a container named cards that has the specific size that we're setting here then I want you to do some different styling on it now another thing that has opened up in container queries got a lot of the attention but the other thing that's really really useful with container queries is the container query units so if you're used to seeing things that have been done with viewport units, container query units are very similar but they're amazing and for this one I'm gonna come down here and delete the yellow because we don't really need that applying and I'm gonna move my face out of the way just cause we're gonna wanna be looking at everything and let's come on my card and well let's do my card H2 actually so card H2 and for the begin with let's set the font size here to five VW and please never use viewport units that's a little big 2.5 never use viewport units alone like this if you're going to use viewport units on a font size do them within a clamp and I'm gonna suggest the same thing for container query units as well but let's just say we do that and right now they look the same which is I guess okay but this is getting kinda small here and then at one point this breaks and oh my goodness they're getting tiny and again this is where clamp could come in handy but here like they're all like these are just as big as this and maybe you don't want that you want the ones here to be smaller and this to be bigger cause this has more room and should have more visual weight well instead of that I'm gonna change this to a container query inline there is a container query W which is for width or inline for the inline axis we're already saying that this is my inline size so we might as well be using the inline here as well and now you'll notice they're really small but I have this title here is tinier than this one even though the font size is declared at the same size and so let's boost this up to maybe a seven just so they're not super small and you can see this one is really big and this one is smaller because the size is being defined by the size of the container it's basically like 7% of the container size so this is in a smaller container it has a smaller font size this is in a bigger container it has a larger font size and what I would normally do is probably do a clamp here and then around my clamp I could say that this is going to be the smallest it's allowed to get is a 1.5 rem it has the seven container queries so that's like its growth factor and the biggest it can get to maybe is a three so we're just sort of setting a minimum and maximum to make sure that they don't get either way too big or way too small and the nice thing here is when they're stacking they're all the same size because they all have the same amount of room to work with sort of makes sense but then once we get into this layout these ones are the visually the weight is smaller on them so the font size is fitting within the container it makes the whole thing more balanced whereas because this one has more room it gets a larger font size, wonderful these units are fantastic we have inline we also do have B here for block and what that means is it's now it's the block where this would be the same as doing an H here where it's looking at the height of them so block for the block axis so here if I take this and I shrink it down you'll see that they actually start to shrink and get smaller or growing it bigger because it's based on the container's height and that's the thing that we're thinking of is always the container's height and in these situations once again I find there will be use cases for going on the block axis and actually in this case I think the block axis is probably not even looking at the containers that they're living in but it's looking at the viewport just because I've only defined these as the inline size here so the container's height isn't part of the calculation but this is another really nice thing actually with the units is the units unlike the at container if there's no defined container these will fall back to being like viewport units so if I come and I delete these right here it's not gonna look great but you're gonna see that it's and actually let's switch this back to the I so it's based on the width and you're gonna see that they're all behaving in the same way again because they're just focused like oh there was no container so I guess my container is the viewport and they're gonna lock into the viewport so at least there's like this consistency in a fallback it won't break your font sizes which is really really handy that's not the same with at container you do need to have a defined container so it might be useful at times just to have something like HTML container type of inline size I haven't played around with this idea so I don't know if it's a good idea or not to have this but it could be just to make sure that like if you end up placing something that doesn't have a defined container at least it has something to fall back to along the way but again, I'm not sure you might just maybe it's better that you don't so you're making sure because if the layout say this actually does end up changing but you didn't really want it to for whatever reason because you need it to be in a defined container anyway, it might be safe or not to it might be safe or do this is one of the things that is relatively new so we're still playing with and figuring out what the best practice might be so if you have any thoughts or input on that please do leave a comment down below because I'd love to sort of have a bit of a discussion around how we could be, you know is this a good idea or a bad idea type of thing and if you've played around with it if you've run into any problems with it or if you found it useful or if you never tried it but you said, hey, that would help me out in this situation leave a comment and let me know because I'd really this is the type of thing I'm trying to figure out still these days and maybe with padding or something doing the man or the max here could actually be useful but for font sizes, I just find the CQI is the one that I end up falling back to and using the most often now an important note here is just like the range syntax that we've been looking at container queries on the size here they have about 90% browser support right now again, they're in all the major browser engines so please do keep that in mind if you're gonna be using them today again, I'll include a link in the description for an up to date support tables if you're watching this anytime in the future and if you do search this up on your own and can I use you'll also come across this which is style queries which they're only sort of working in the chromium browsers right now but that still gives them 70% support which is kind of crazy and they work in a very specific way but this is a little bit of the future of where they're going because when we talk about container queries there, we'd call them container queries but they're actually container size queries so where they're looking at the size but there's more that these or the spec has more than just being able to do that which is really, really cool what we're gonna eventually be able to do or if you don't mind only it working in Chrome right now there is a thing that we can do that's gonna be expanded upon and what that is is style queries so what we can do to set up these style queries which are gonna be great is it lets us come here at the top and we're gonna set them up here and we're going to say that the sidebar here or we're gonna play around with that a little bit and so we're gonna say, let's just come here we're gonna say at container like you normally would set it up like that but the one thing that's different here is instead of having a name function so before we had my cards as the name right here or it wasn't a function it was getting the name of the container we're not gonna put a space here we're gonna keep it all together and write style so this is a style function with no space and the space here would be a very big difference in the future the plan is for this to work with like I could check for the background color and then apply different styles depending on that right now this only works in Chrome and it only works like it's limited it's partial support because it's only working with checking the values of custom properties but this is still extremely powerful so what we can do is I'm gonna come here and we're just gonna look for theme of dark and so if my card is inside of a container that has a theme of dark where you can say that my card the background is going to be black and the color is going to be white then let's just make sure we have both of them named because I think I deleted it so we had my primary content as well as my dot cards and on both of those we're just gonna do container type of inline size now it doesn't have to be something that's necessarily a theme you might have like a BG color and you just wanna be checking what the value of that BG color is for example but I think this type of thing will be a common way to do it where now if I come on to my primary content here and I'm gonna do it as an inline style it doesn't have to be but let's just say style is equal to and because maybe you're applying this through JavaScript or something like that I'm gonna say theme is dark I don't have anything set up for those ones but look it's changed the style of the child because our container has switched over to that really fast introduction here just because I was watching the final edit of this and I said, wait a second I define my containers but with style queries you do not need to have a defined container so just as you can see here I have like the test, test two we have them all going the style query is working and I have no defined containers one of the really big benefits of style queries is we don't need them so even though I'm using at container to do a style query we do not need to have a defined container for them to work just wanted to make that clear since right before I started using them I redefined those containers that I'd had set up and I didn't want any confusion on that and if you want to learn more about these because it's something that's on the horizon but if you want really good examples and stuff this is one by Una that it's fantastic Una Kravitz where she looks at like this new the low stock with the red thing all of these are being things that are conditionally being added through using this idea of if the style depending on the style of the container and she has a really good article here on the Chrome for developers blog that I'll also link down below that goes into more detail on them just because they're cutting edge right now and I don't want to go too far in but I sort of did want to show you sort of the future of where container queries are headed and now of course this begs the question of like well I mean not necessarily with the style can queries but when it comes to container queries versus a regular media queries which one should you be using and honestly I think both of them are still incredibly useful and there's no big rush to replace media queries with container queries just because I think for like large layout purpose stuff like I looked at when I set this up I used a media query for the break that I had right here and I think this is still a very useful way to look at it when we're doing layout changes that are dependent on the size of the viewport itself then I think it makes sense to still use a media query but for component based styling then I think container queries are definitely the way to go because you can adjust it depending on everything including eventually the styles which is just going to be absolutely incredible but of course all of this does also come down to this idea of having like responsive design in general and I know a lot of people really do struggle when it comes to just creating responsive layouts and it's often because we're trying too hard to set up specific things and you sort of need to have the right mindset and approach when it comes to approaching responsive layouts and if it's something in general you struggle with you know it's not just the media query or when should I use a media query or container query but it's just the whole thing just seems like a big struggle and I've recently put out a video that's a practical guide to responsive web design I think you might really like it is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Andrew Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome and buy a shirt if you like it, bye.