<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Search</title>
        <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
        <style type="text/css">

            body{
                margin:0;
                padding: 0;

                color:#222;
                //background-color:#888888;
                background-color:#cccccc;
                
                min-height:100vh;
                
                display:grid;
                grid-template-columns: 3fr 1fr;
                grid-template-rows: 50px 1fr;
            }
            h3{
                margin:0;
            }
            #header{
                grid-column: 1 / span 3;
                grid-row: 1;
                
                grid-template-columns: 3fr 1fr;
            
            }
                #header-left{
                    display:grid;
                    
                    grid-template-columns: 1fr 800px;
                
                }

                
            #left{
                grid-column: 1;
                grid-row: 1;
            
            #right{
                
                
                grid-column: 2;
                grid-row: 1;

            }
            

        </style>
    </head>
    <body>
        <div id="header">
            <div id="header-left">
                <form id="search-form" action="/youtube.com/search">
                    <input type="text" name="query" id="search-box">
                    <input type="submit" value="Search" id="search-button">
                </form>
            </div>
        </div>

        <div id="left">
        </div>
        
        
        <div id="right">
        
        </div>
    
    
    
    
    
    </body>
</html>