style.css

/*
#800b37 is dark pink accent color
*/

/*--------------------------------------------------------------
   ___              
  / _ )___ ____ ___ 
 / _  / _ `(_-</ -_)
/____/\_,_/___/\__/ 
                    
    2.0 Base
--------------------------------------------------------------*/
* {
  margin: 0;
}

body, html {
  height: 100%;
}
body {
  background: rgba(128,11,55,0.2);
}
/*--------------------------------------------------------------
    2.1 Alignments
--------------------------------------------------------------*/
* {
  box-sizing: border-box;
}
.spacer {
  height: 100px;
}

/*--------------------------------------------------------------
    2.2 Clearings
--------------------------------------------------------------*/
/* Keep images within their elements */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
	}

/*--------------------------------------------------------------
    2.3 Global Elements
--------------------------------------------------------------*/


/*--------------------------------------------------------------
   __                       __ 
  / /  ___ ___ _____  __ __/ /_
 / /__/ _ `/ // / _ \/ // / __/
/____/\_,_/\_, /\___/\_,_/\__/ 
          /___/                
    3.0 Layout
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    3.1 Header
--------------------------------------------------------------*/

#site-header {
	background: url('images/pink-roses.jpg');
	text-align: center;
  height: 50px;
	}

/*--------------------------------------------------------------
    3.2 Navigation
--------------------------------------------------------------*/
nav {
  min-height: 30px;
  background-color: #800b37;
}

#toggle-menu {
  display: block;
  text-align: center;
  color: white;
  padding: 5px;
}
nav ul {
  display: none;
  justify-content: center;
  flex-direction: column;
}
nav ul li {
  font-size: 16px;
  padding: 5px 30px;  
  text-align: center;
  color: white;
}
nav ul li a {
  color: white;
}
/* Hides the menu by default */
#main-menu {
  display: none;
}
/* Turns the menu on */
#tm:checked + #main-menu {
  display: flex;
}

#menu input[type="checkbox"], #menu ul span.drop-icon {
  display: none;
}

/*--------------------------------------------------------------
    3.3 Splash Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    3.4 Content
--------------------------------------------------------------*/
#primary {
	padding: 25px;
}

/*--------------------------------------------------------------
    3.5 Pages
--------------------------------------------------------------*/
#content {
  min-height: calc(100% - 158px); /* Keeps footer at the bottom */
  margin: 0;
  line-height: 1.5em;
}


/*--------------------------------------------------------------
    3.6 Sidebars
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    3.7 Footer
--------------------------------------------------------------*/
#colophon {
	position: relative; /* Keeps footer at bottom of the page, regardless of height of content */
  bottom: 0;
  width: 100%;
  min-height: 40px;
  background: #800b37;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
}
#colophon > div {
  width: 100%;
  padding: 10px;
}
#colophon a {
  color: white;
}
/*--------------------------------------------------------------
   __  ___        __     __   
  /  |/  /__  ___/ /_ __/ /__ 
 / /|_/ / _ \/ _  / // / / -_)
/_/  /_/\___/\_,_/\_,_/_/\__/ 
                                                            
    4.0 Module
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    4.1 Tables
--------------------------------------------------------------*/
table {
  margin: 10px;
  border-collapse: collapse;
}

td:first-child {
  width: 70%;  /* Sets the first column's width */
}

td:last-child {
  width: 30%;  /* Sets the last column's width */
}

td {
  padding: 5px;
}
/*--------------------------------------------------------------
    4.2 Links
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    4.3 Forms
--------------------------------------------------------------*/
form {
  text-align: left;
}
/*--------------------------------------------------------------
    4.4 Lists
--------------------------------------------------------------*/

/* Style lists used as menus */
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.menu li a{
  text-decoration: none;
}

/*--------------------------------------------------------------
    4.5 Buttons
--------------------------------------------------------------*/

/*--------------------------------------------------------------
 ______                                  __       
/_  __/_ _____  ___  ___ ________ ____  / /  __ __
 / / / // / _ \/ _ \/ _ `/ __/ _ `/ _ \/ _ \/ // /
/_/  \_, / .__/\___/\_, /_/  \_,_/ .__/_//_/\_, / 
    /___/_/        /___/        /_/        /___/  

    5.0 Typography
--------------------------------------------------------------*/
h1 {
  font-family: 'Cinzel', Serif;
  font-size: 30px;
  text-align: center;
  padding: 1em;
}
h2 {
  text-align: left;
}
p {
  margin: 10px;
  text-align: left;
}
    /* Sets the style of the header banner */
#banner {
  margin: 0;
  padding: 0;
  color: #800b37;
  font-size: 30px;
  text-shadow: 0 0 30px #fff;
}
    /* Sets the style of the tagline or motto or byline */
#byline {
  display: none;   /* Hides by default for mobile browsers */
  margin: 0;
  color: #800b37;
  font-family: 'Parisienne', cursive;
  font-size: 30px;
}

/*--------------------------------------------------------------
   __  ___       ___     
  /  |/  /__ ___/ (_)__ _
 / /|_/ / -_) _  / / _ `/
/_/  /_/\__/\_,_/_/\_,_/                         

    6.0 Media
--------------------------------------------------------------*/

/*--------------------------------------------------------------
   ___                             _         
  / _ \___ ___ ___  ___  ___  ___ (_)  _____ 
 / , _/ -_|_-</ _ \/ _ \/ _ \(_-</ / |/ / -_)
/_/|_|\__/___/ .__/\___/_//_/___/_/|___/\__/ 
            /_/                              
    7.0 Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
   7.1 Tablets > 768px
--------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
  #menu #main-menu {
    display: flex;
    flex-direction: row;      /* Switches navigation menu to horizontal */
  }
  #toggle-menu, #menu label.drop-icon {
    display: none;    /* Hides the unnecessary toggle button */
  }
  #byline {
    display: inline;  /* Turns on the byline */
  }
  #site-header {
    height: 85px;
  }
  #colophon {
    flex-direction: row;  /* Switches the footer to horizontal */
  }
  #content {
    min-height: calc(100% - 155px); /* Keeps footer at the bottom */
	}
}

/*--------------------------------------------------------------
    7.2 Small desktop > 992px
--------------------------------------------------------------*/
@media only screen and (min-width: 992px) {
  #banner {
    font-size: 60px;
  }
  #site-header {
    height: 130px;
  }
  #content {
    width: 80%;   /* Keeps the content from spreading out too much */
    background-color: rgba(215,107,193,0.4);
    margin: 0 auto;
      min-height: calc(100% - 200px); /* Keeps footer at the bottom */

  }
  table {
    width: 75%;   /* Keeps tables from being unwieldy */
    margin: auto;
  }
}

/*--------------------------------------------------------------
    7.3 Large desktop > 1200px
--------------------------------------------------------------*/
@media only screen and (min-width: 1200px) {
  #content {
    width: 60%;   /* Keeps the content from spreading out too much */
  } 
  table {
    width: 50%;   /* Keeps tables from being unwieldy */
    margin: auto;
  }
}