@font-face {
                font-family: RobotoCondensed;
                src: url('page_deco/fonts/RobotoCondensed-Regular.ttf');
            }

            @font-face {
                font-family: RobotoCondensed;
                src: url('page_deco/fonts/RobotoCondensed-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: RobotoCondensed;
                src: url('page_deco/fonts/RobotoCondensed-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: RobotoCondensed;
                src: url('page_deco/fonts/RobotoCondensed-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
  
            @font-face {
                font-family: LightPixel;
                src: url('page_deco/fonts/light-pixel-7-regular.ttf');
            }
            
            @font-face {
                font-family: Ticketing;
                src: url('page_deco/fonts/ticketing-regular.ttf');
            }
            
            body {
                font-family: 'RobotoCondensed', sans-serif;
                font-size: 13px;
                margin: 0;
                background-color: #9aa0ee;
                color: #312f2f;
                background-image: url("https://cloudcover.neocities.org/backgrounds/a14.gif");
                background-repeat: repeat;
                cursor: url('/page_deco/pixelsoup.png'), auto;
            }
            
            a:hover {
            cursor:url('/page_deco/pixelsoup2.png'), auto;
            } 
            
            #container {
              max-width: 900px;
              margin: 0 auto;
              padding-top: 180px;
            }
            
            #container a {
                color: #6978FB;
                font-weight: bold;
            }
            
            #container a:hover {
                font-style: italic;
                text-shadow: 2px 2px #98e8d1;
            }
            
            #content {
                background-color: #9aa0ee;
                border: 1px solid #3c779d;
                padding: 10px;
                width: 500px;
                height: 310px;
                border-radius: 10px;
            }
            
            h1 {
                font-family: 'LightPixel', sans-serif;
                color: #313bb2;
                font-size: 20px;
                line-height: 0.7;
            }
            
            h2 {
                font-family: 'Ticketing', sans-serif;
                color:  #ffdcdc;
                font-size: 22px;
                line-height: 0.5;
            }
              
            .box1 {
               float: left;
               height: 290px;
               width: 20%;
               padding: 9px 5px 7px 5px;
              }
              
            .box2 {
               float: right;
               height: 290px;
               width: 65%;
               padding: 5px 0px 5px 0px;
              }
              
                          /* MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }