@charset "utf-8";
/* CSS Document */

.outer{
	height: auto;
	width:1200px;
	display:flex;
	flex-direction:row;
	border:1px solid red;
	margin: auto;
}
.inner-header{ margin:auto;width:100%;border:1px solid red;}
.inner-header-info-h{
	margin:auto;
	width:100%;
	border:1px solid blue;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:28px;
	font-style:normal;
	font-weight:400;
	color:#000000;
	padding-left: 15px;
}
.inner-header-info{ margin:auto;width:100%;border:1px solid blue; font-family:Tahoma, Geneva, sans-serif; font-size:24px; font-style:oblique; color:#000000;}
.fullimg-header{margin:auto;
	width:100%;
	border:1px solid red;
	margin: auto;
}
.fullimg{
	width:100%;
	border:1px solid red;
	margin: auto;
}
.inner-left{ height:600px;width:50%;border:1px solid red;}
.inner-right{ height:600px;width:50%;display:flex;flex-direction:column;border:1px solid red;}

.smallimg{ height:300px;width:100%;height:100%;border:1px solid red;}
@media only screen and (max-width: 425px){.outer{flex-direction:column!important;}}
/*
FILE NAME: styles.css
WRITTEN BY: CS115 Faculty
DATE: Spring 2019
PURPOSE: CS115, Lab on Page Layout with css Solution using grid layout
*/

/*
 * This stylesheet includes a few extra tweaks beyond what was covered in lab.
 */

body {
    background: #fff8dd; /* Bonus: A background color for the whole page */
}

/*  Center the header in its container */
h1 {
    text-align: center;
    font-family: "Uncial Antiqua", serif; /* Bonus: use a fancy font */
}

/* Fancy font for header 2 as well */
h2 {
    font-family: "Uncial Antiqua", serif;
}

/*
div with id "wrapper" contains the left part (navigation) and the right part of
the page. It is laid out as a grid of two columns: one for the nav bar, and one
for the right part of the page.
*/
#wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 10px;
    justify-items: center; /* Keep each column centered */
}

/*
div with id "main" contains the four houses. It goes in column 2 of the
#wrapper div.
*/
.two-column {
  display: grid; /* this elemtn also has a grid inside it */
  grid-template-columns: auto auto;  /* two even columns */
  grid-gap: 10px;
    padding: 10px;
    background-image:url('images/old-map-texture.png');
    max-width: 50em;
    /* margin: auto; /* This centers the div when it has a max width */
}

/*
In index.html the #main div has class two-column, which sets up a grid layout
with two even columns.

In griffindor.html, the #main div doesn't have the two-column class.

.two-column {
    display: grid; /* this elemtn also has a grid inside it */
    grid-template-columns: auto auto;  /* two even columns */
    grid-gap: 10px;
}
*/
/*
Each house belongs in a section /section tag. The sections will automatically
distribute themselves among the grid cells of the #main div.
*/
section {
    padding:10px;
    border:5px solid #886644; /* Brown borders instead of gray */
    border-radius:25px;
}

/*
To style the nav bar
*/
nav {
    background-image:url('images/old-map-texture.png');
    line-height:200%; /* give some vertical space between the links */
    padding: 12px;
    font-family: "Uncial Antiqua", serif;
}

/* Style the unvisited links.  */
a:link {
    font-weight: bold;
    color: #884400; /* This version colors the links brown instead of blue */
    /* text-decoration:none; /* to remove the underline */
}

/* Style the visited links.  */
a:visited {
   font-weight: bold;
   color: #662200; /* A darker brown than unvisited links */
}

/*
Style the crests (images) so they float to the left of the following text
*/
.crest {
    float: left;
}

/*
Center the footer, and give it a bit of breathing space
*/
footer {
    text-align: center;
    padding: 10px;
}

/*
Bonus: some rules that only apply when the scren is narrow (like on a cell
phone).
*/
@media only screen and (max-width: 600px) {
    #wrapper {
        /* Switch the wrapper to a 1-column 2-row format */
        grid-template-columns: auto;
        grid-template-rows: auto auto;
    }

    .two-column {
        grid-template-columns: auto; /* only one column */
    }
}  .row { display: flex; flex-direction: column; }
    
    /* Child */
    .col { flex: 1; }

    /* col styling */
    .col {
      background-color: #0ee6f1;
      margin: 10px;
      padding: 10px;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      padding: 0;
      margin: 0;
      background-color: #fff;
      font-size: 1.2em;
      -webkit-font-smoothing: antialiased;
    }

    /* iPad screen size */
    @media screen and (min-width: 500px){
      .row {
        display: flex;
        flex-direction: row;
      }
    }