index.css

:root{
	--main-radius: 5px;
	--main-padding: 30px;
}
/*
box-sizing: border-box;*/


.page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* container for grid layout */
.container {
  overflow: auto;
  flex: 1;
	display: grid;
	height: 100%;
	grid-template-columns: 0.7fr 1fr 1fr 0.7fr;
	grid-template-rows: 0.5fr 2.5fr 1.5fr 1fr 0.5fr;
	grid-template-areas: 
    "top top top top"
		"left main main right"
		"left content1 content2 right"
    "bottom bottom bottom bottom"
		"footer footer footer footer";
	grid-gap: 0.2rem;	
	font-family: 'Montserrat Alternates', sans-serif;	
}

/* link colors */
a:link {
  color: #8d9a74;
}
a:visited {
  color: gray;
}
a:hover {
  color: #2f3a51;
}
a:active {
  color: black;
}

#pageTitle {
  font-weight: 800;
  font-size: 3em;
  padding: 0px 0px 40px 0px;
}

/* MAIN */

/* Exterior Box */
main{
	background: #FFFAF2;
	grid-area: main;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}


/* Swatch Square 1 */
#swatchMain {
  grid-area: swatchMain;
  background-color: #32333b;
  padding: 5px;
  border: 1px solid black;
  height: 350px;
  width: 305px;
}

/* Nested Grid 1 - Interior Boxes */
#swatch1 {
  display: grid;
  height: 360px;
  border: solid 1px black;
  padding: 5px 5px 50px 5px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .1fr .01fr .01fr 1fr 1fr;
	grid-template-areas: 
		"swatchMain swatchTitleMain"
		"swatchMain colorNameMain"
    "swatchMain hexValueMain"
    "swatchMain mainButtonDiv";  
	grid-gap: 0.3rem;
}

#swatchTitleMain {
  grid-area: swatchTitleMain;
  font-size: 2em;
  font-weight: 500;
}
#colorNameMain {
  grid-area: colorNameMain;
}
#hexValueMain {
  grid-area: hexValueMain;
}

#mainButtonDiv {
  grid-area: mainButtonDiv;
  vertical-align: bottom;
  padding-top: 10px;
}

.button {
  transition-duration: 0.4s ease-in-out;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  border: 0px;
  cursor: pointer;
  padding: 12px;
  font-size: 18pt;
  background-color: #D1D1D1;
  color: black;
}
.button:hover {
  background-color: #6B6B6B; /* #637092 Dark Purple */
  color: white;
}


/* Empty Row */
#top {
  grid-area: top;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}
/* Empty Column */
#left {
  grid-area: left;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}
/* Empty Column */
#right {
  grid-area: right;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}

/* CONTENT 1 - Exterior Box */
#content1{
	background: #FFFAF2;
	grid-area: content1;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}

/* Nested Grid 2 - Interior Boxes */
#swatch2 {
  display: grid;
  /* border: solid 1px black; */
  padding: 5px 5px 5px 5px;
  height: 30vh;
	grid-template-columns: 1.5fr 0.2fr;
	grid-template-rows: 0.6fr 0.2fr 1.6fr;
	grid-template-areas: 
		"swatchSecond swatchTitle2"
		"swatchSecond colorName2"
    "swatchSecond hexValue2";
	grid-gap: 0.3rem;
 
}
/* Swatch Square 2 */
#swatchSecond {
  grid-area: swatchSecond;
  background-color: gray;
  padding: 5px;
  border: 1px solid black;
  height: 200px;
  width: 200px;
}
#swatchTitle2 {
  grid-area: swatchTitle2;
  font-size: 1.em;
  font-weight: 500;
}
#colorName2 {
  grid-area: colorName2;
}
#hexValue2 {
  grid-area: hexValue2;
}

/* CONTENT 2 - Exterior Box */
#content2{
	background: #FFFAF2;
	grid-area: content2;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}
/* Nested Grid 3 - Interior Boxes*/
#swatch3 {
  display: grid;
  /* border: solid 1px black; */
  padding: 5px 5px 5px 5px;
  height: 30vh;
	grid-template-columns: 1.5fr 0.2fr;
	grid-template-rows: 0.6fr 0.2fr 1.6fr;
	grid-template-areas: 
		"swatchThird swatchTitle3"
		"swatchThird colorName3"
    "swatchThird hexValue3";
	grid-gap: 0.3rem;
}

/* Swatch Square 3 */
#swatchThird {
  grid-area: swatchThird;
  background-color: orange;
  padding: 5px;
  border: 1px solid black;
  height: 200px;
  width: 200px;
}
#swatchTitle3 {
  grid-area: swatchTitle3;
  font-size: 1.em;
  font-weight: 500;
}
#colorName3 {
  grid-area: colorName3;
}
#hexValue3 {
  grid-area: hexValue3;
}


/* Empty Row */
#bottom {
  grid-area: bottom;
	border-radius: var(--main-radius);
	padding: var(--main-padding);
}

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

/* Media Queries */

@media only screen and (max-width: 550px){
  body {
    padding: 0;
    margin: 0;
  }

	.container{
    display: grid;
    overflow: hidden;
		grid-template-columns: 100vw;
		grid-template-rows: 1fr .5fr .5fr .22fr;
		grid-template-areas: 
			"main"
			"content1"
			"content2"
			"footer";
    grid-gap: 0.5em;	
    font-family: 'Montserrat Alternates', sans-serif;	
	}

  /* Page Title */
  #pageTitle {
    font-weight: 800;
    font-size: 2em;
    padding: 0px 0px 40px 0px;
  }

/* Exterior Box */
main{
	background: #FFFAF2;
	grid-area: main;
	border-radius: var(--main-radius);
	/* padding: var(--main-padding); */
}


/* Swatch Square 1 - Color Square Properties*/
#swatchMain {
  grid-area: swatchMain;
  background-color: #32333b;
  padding: 5px;
  border: 1px solid black;
  height: 200px;
  width: 200px;
}

/* Nested Grid 1 - Interior Boxes */
#swatch1 {
  display: grid;
  height: 320px;
  border: 0px;
  padding: 5px 5px 50px 5px;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas: 
		"swatchMain" 
    "swatchTitleMain"
		"colorNameMain"
    "hexValueMain"
    "mainButtonDiv";  
  
}

#swatchTitleMain {
  grid-area: swatchTitleMain;
  font-size: 1.2em;
  font-weight: 800;
}
#colorNameMain {
  grid-area: colorNameMain;
}
#hexValueMain {
  grid-area: hexValueMain;
}

#mainButtonDiv {
  grid-area: mainButtonDiv;
  vertical-align: bottom;
  
}

.button {
  transition-duration: 0.4s ease-in-out;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  border: 0px;
  cursor: pointer;
  margin-top: 5px;
  padding: 12px;
  font-size: 14pt;
  background-color: #D1D1D1;
  color: black;
}
.button:hover, element:active {
  background-color: #6B6B6B; 
  color: white;
  -webkit-tap-highlight-color: #6B6B6B;
  -webkit-user-select: none;
  -webkit-touch-callout: none /*disables context menu on long press*/
}

  /* Second Swatch Styling */
  #content1{
    display: grid;
    grid-area: content1;
    background: #FFFAF2;
    border-radius: var(--main-radius);
    /* padding: var(--main-padding); */
  }

  #swatchSecond {
		height: 100px;
		width: 200px;
	}

  #swatch2 {
    display: grid;
    grid-area: ; /* pushes everything over to the right for some reason */
    overflow: hidden;
    height: 200px;
    /* border: solid 1px black; */
    padding: 5px 5px 5px 5px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      "swatchSecond" 
      "swatchTitle2"
      "colorName2"
      "hexValue2";
   
    }


    /* Nested Grid 3 - Interior Boxes*/
  #swatch3 {
    display: grid;
    overflow: hidden;
    /* border: solid 1px black; */
    padding: 5px 5px 5px 5px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      "swatchThird" 
      "swatchTitle3"
      "colorName3"
      "hexValue3";
  }

  /* Swatch Square 3 */
  #swatchThird {
    grid-area: swatchThird;
    background-color: orange;
    padding: 5px;
    border: 1px solid black;
    height: 100px;
    width: 200px;
  }
  #swatchTitle3 {
    grid-area: swatchTitle3;
    font-size: 1.em;
    font-weight: 500;
  }
  #colorName3 {
    grid-area: colorName3;
  }
  #hexValue3 {
    grid-area: hexValue3;
  }

  /* Footer */
  footer{
    background: #FEF3EE;
    grid-area: footer;
    grid-template-rows: min-content;
    border-radius: var(--main-radius);
    /* padding: var(--main-padding); */
  }



} /* end media query max-width 550px */