:root {
  --main-radius: 5px;
  --main-padding: 5px;
}

body {
  font-family: sans-serif;
  background-image: url(https://rips-ug.edu.gh/images/great-hall-artwork.png), url(https://rips-ug.edu.gh/images/balme-artwork.png);
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

  @media (min-width: 900px) {
    site-grid {
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;
    }
  }
}



container-banner {
  grid-area: banner;
}

container-top-a {
  grid-area: top-a;
}

container-top-b {
  grid-area: top-b;
}

container-component {
  grid-area: comp;
}

container-sidebar-left {
  grid-area: side-l;
}

container-sidebar-right {
  grid-area: side-r;
}

container-main-top {
  grid-area: main-t;
}

container-main-bottom {
  grid-area: main-b;
}

container-breadcrumbs {
  grid-area: bread;
}

container-bottom-a {
  grid-area: bot-a;
}

container-bottom-b {
  grid-area: bot-b;
}


a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}















/*
container {
  display: grid;
  height: 100vh;
 grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "topbar topbar topbar topbar"
    "below-top below-top below-top below-top"
    "menu menu menu menu"
    "banner banner banner banner"
    "top-a top-a top-a top-a"
    "top-b top-b top-b top-b"
    "sidebar-left breadcrumbs breadcrumbs sidebar-right"
    "sidebar-left main-top main-top sidebar-right"
    "sidebar-left main-bottom main-bottom sidebar-right";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;
}

#topbar {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#below-top {
  background: #a7ffeb;
  grid-area: below-top;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}


#menu {
  background: #a7ffeb;
  grid-area: menu;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#banner {
  background: #a7ffeb;
  grid-area: banner;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#top-a {
  background: #a7ffeb;
  grid-area: top-a;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#top-b {
  background: #a7ffeb;
  grid-area: top-b;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#breadcrumbs {
  background: #84ffff;
  grid-area: breadcrumbs;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#main-top {
  background: #84ffff;
  grid-area: main-top;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#main-bottom {
  background: #84ffff;
  grid-area: main-bottom;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#sidebar-left {
  background: #18ffff;
  grid-area: sidebar-left;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#sidebar-right {
  background: #18ffff;
  grid-area: sidebar-right;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}




#footer {
  background: #1de9b6;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3"
      "footer";
  }
}


















/*
nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

main {
  background: #84ffff;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#sidebar {
  background: #18ffff;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content3 {
  background: #73ffba;
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

footer {
  background: #1de9b6;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3"
      "footer";
  }
}
















/*	BODY	*

@media max-width:1200px;	

body   {
	@media (max-width:900px)	
	position: absolute; 
  	margin:auto;	
    width:900px;	
    padding:0px;
   	background: #fcfcfc;	
    word-wrap: break-word;
}