* {
    margin: 0;
    padding: 0;

    /* font-size: 16px; */
	font-family: Arial; /* 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif; */
	background: #E8E3E3;
	/* color: #2E2E2E; */
	line-height: 1.4em;
	/* font-weight: 300; */
}

body {
    overflow: hidden;
   }

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }


/* headings */
h1 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h2 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 16px; margin-bottom: 1em; }
h4 { font-size: 16px; margin-bottom: 1em; }



.grid {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    grid-template-areas: 
    /* "title title"
    "header header" */
    "menubar menubar"
    "content content"
    "footer footer";
}

.menubar{
    grid-area: menubar;
}

.content{
    grid-area: content;
    overflow-y: auto;
}

.footer{
    grid-area: footer;
}

.youtube-iframe-wrapper{
    position: relative;
    padding-bottom: 56.25%; 
    /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
}

.youtube-iframe {
    max-width: 640px;
    max-height: 360px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



@media screen and (min-width: 900px) and (min-height: 700px){
    .grid {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 220px 1000px 1fr;
        grid-template-rows: 1fr;
        overflow: hidden;
        grid-template-areas: 
        /* "title title ."
        "header header ." */
        "menubar content content"
        "footer content content";
    }
    .youtube-iframe-wrapper{
        position:unset !important;
        padding-bottom:unset !important;
    }
    .youtube-iframe{    
        position:unset !important;
        top:unset !important;
        left:unset !important;
        width: 640px !important;
        height: 360px !important;
    }
	.sprd-header{
    background-color: #E8E3E3 !important;
  }
}