/*  beta stylesheet  */
/* I'd forgotten how template grids work entirely, credit to Angel's Valentine for being my Inspect Element tutor! */

/* colors */
:root {
	/* ----- greens ----- */
	--dark: #2301a9;
	--mediumdark: #2F3A34; /*-- dim  green --*/
	--medium: #48634F; /*--  neutral green --*/
	--mediumlight: #61A66B; /*-- bright green --*/
	--light: #9BD085; /*-- light green --*/
	/* ----- oranges ----- */
	--copper: #D97746; /* bright copper */
	--bronze: #ffffff; /* burnt  copper */
	/* ----- greys ----- */
	--warmgrey: #E8E3DA; /* primary text */
	--coolgrey: #A6A298; /* secondary text*/
	
	/* ----- grayscale ----- */
	--black: #0A0D0C; /* really dark green*/
	--white: #ffffff; /* hex white */
}
/* page */
html {
 background-color: var(--black); 
}

:heading {
  color: var(--copper);
}

/* grid */

/* container */
  .grid-cont{
    width: 1000px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-areas:
      "banner banner banner banner banner"
      "icon scan scan scan scan"
      "icon welcome welcome welcome clock"
      "icon welcome welcome welcome calendar"
      "updates updates updates todo navbar"
      "feat feat music music navbar"
      "footer footer footer footer footer";
    padding: 10px;
  }

/* all grid sections */

.grid-sec {
	background-color: var(--mediumdark);
	border: 2px  solid var(--copper);
	box-shadow: 10px 10px 25px var(--black);
	margin: 5px;
}


/* section specific styling */
#g1{
    grid-area: banner;
}

#g2{
    grid-area: icon;
}

#g3{
    grid-area: scan;
}

#g4{
    grid-area: welcome;
}

#g5{
    grid-area: clock;
}

#g6{
    grid-area: calendar;
}

#g7{
    grid-area: updates;
}

#g8{
    grid-area: todo;
}

#g9{
    grid-area: navbar;
    
}

#g10{
    grid-area: feat;
    padding: 2%;
    display: grid;
    text-align: center;
}

#g11{
    grid-area:  music;
}

#g12{
    grid-area: footer;
}