/*---------------------------------------
	UCBA Media Musings
---------------------------------------*/


/* GLOBAL SETTINGS
---------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family:Arial, Helvetica, sans-serif;
  height: 100vh;
  background-color: aliceblue;
  padding: 0.5rem;
}
	
div.wrapper {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  border: 2px solid gray;
  box-shadow: 1px 1px black;
}

img {
  max-width: 100%;
}


/* HEADER
---------------------------------------*/
/* ⬇ Entire header area */
header {
  background-color:honeydew;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 2px;
}

/* ⬇ Contains both the h1 and h2 */
header div.site-name { 
  
}

header h1 {
  font-family:'Roboto', sans-serif;
  font-size: 3rem;

}

/* ⬇ The h1's link */
header h1 a {
  text-decoration: none;
  color: black;
}

header h2 {
  font-size: 1.5rem;
}



/* MAIN NAVIGATION 
---------------------------------------*/	
/* ⬇ Entire navigation area */
nav.topnav { 
  background-color:darkseagreen; 
  padding: 1px 1px;
}

nav.topnav ul {
	list-style-type: none;
	display: flex;
	align-items: center;
}

nav.topnav li {
  
}

/* ⬇ Links in the navigation bar */
nav.topnav a {
	padding: 1rem 2rem;
	text-transform: uppercase;
	display: block;
	text-decoration: none;
	color: black; /* ← you can change this */
  transition: all 0.75s ease-in-out;
}

/* ⬇ Nav link hover effect */
nav.topnav a:hover {
	background-color: ghostwhite; /* ← you can change this */
	border-radius: 2rem;
}



footer {
  background-color:honeydew;
  padding: 1px 1px;
}

footer small { 
  font-size: small;
  line-height: 1.5;
}

/* ⬇ The link in the footer */
footer a {
  
}


/* In a future assignment you'll create media queries below. */

/* TABLET
---------------------------------------*/
/* Tablet Media Query
------------------------------------*/

@media(max-width: 899px) {
  div.wrapper {
    width: 95%;
    margin-top: 0;
    border-radius: 0;
  }

  header {
    flex-direction: column;
  }

  header h1 {
    font-size: 175%;
  }

  main {
    grid-template-columns: 1fr 1fr;
  }

  img {
    max-width: 100%;
  }

  main.homepage {
    grid-template-columns: 1fr 1fr;
  }

  article.blog {
    grid-row: 1/2;
    grid-column: 1/3;
  }

  main.homepage aside.recent {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  main.homepage aside.links {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  section.campus {
    grid-column: 1/3;
  }

  section.campus {
    grid-template-columns: 1fr 1fr 1fr;
  }

  section.campus figure {
    display: grid;
    grid-template-columns:1fr 1fr ;
    align-items: center;
    grid-gap: 1rem;
  }
  article.blog h2 {
    font-size: large;
  }
  article.blog p {
    font-size: large;
  }

  main.homepage aside h3 {
    font-size: small;
  }
  main.homepage li {
    margin-bottom: 10 px
  }
  main.homepage aside a {
    padding: 1rem;
    font-size: medium;
  }
  section.campus h3 {
    font-size: larger;
  }
  section.campus figcaption {
    font-size: medium;
  }
}


/* Phone Media Query
------------------------------------*/
@media (max-width: 480px) {

  div.wrapper {
    max-width: 100%;
    margin: 0;
  }

  header {
    border-radius: 0;
    padding: .5em 0 0 0;
  }

  nav.topnav {
    width: 98%;
    margin: .5em;
  }

  nav.topnav ul {
    flex-direction: column;
  }
  nav.topnav li:last-of-type {
    border: none;
  }

  main.homepage {
    grid-template-columns: 1fr;
  }
  article.blog {
    grid-column: 1/3;
  }

  main.homepage aside {
    display: none;
  }
  
  section.campus {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }

  section.campus h3 {
    font-size: large;
  }

  section.campus figure {
    background-color: ghostwhite;
    padding-right: 10px;
    border-radius: 10%;
  }

  section.campus figcaption {
    font-size: medium;
  }

  

}