body {
  font-size: 16px;
  margin: 0;
  padding-top: 9em; /* Content is not covered by menu bar */
  font-family: 'Nanum Gothic', sans-serif;
}

/* 
   ==================================================
   1. General Links
   ==================================================
*/ 
li {
  list-style-type: none; 
}

.desktop-link a, 
.desktop-link a:link, 
.desktop-link a:visited {
  color: #fff;
  display: block;
  font-size: 1.25em;
  font-weight: 500;
  padding: 1em;
  text-decoration: none;
}

.desktop-link a:hover, 
.desktop-link a:focus, 
.desktop-link a:active {
  background: #3277ae;
}

/* Removes border around images in menu for IE10 */
a img {
	border: 0;
}

/* 
   ==================================================
   2. Desktop Nav Menu
   ==================================================
*/
.desktop-menu {
  background: #002147;
  margin: 0;
  padding: .75em 0;
  position: absolute; /* Prevents parent ul from collapsing because of floated children li's. Alternative to overflow: auto/none; */
  top: 0;
  width: 100%;
  z-index: 1; /* Allows desktop menu to show over slider */
}

.desktop-link {
  float: left;
  margin-top: 1.75em;
  text-align: center;
}

  /* 
     ==================================================
     2.1 Desktop Home Link 
     ==================================================
  */
  #home {
    border: 1px solid #fff;
    float: left;
    font-size: 1em; 
    margin: .5em 1em .5em 1em;
    padding: .75em;
    text-decoration: none;
  }

  #home, 
  #home:link, 
  #home:visited, 
  #home:hover, 
  #home:focus, 
  #home:active {
    color: #fff;
    background: none;
  }

  #home img {
    display: block;
  }

  .yonsei-logo {
    margin: -.5em auto .5em auto;
    width: 4em;
  }

  /* 
     ==================================================
     2.2 Desktop Dropdown-menu 
     ==================================================
  */
  .desktop-link a.caret,
  #mobile-menu, 
  .dropdown-menu {
    display: none; /* Removes mobile menu, caret links, and dropdown menu (when menu items are not hovered) on large screens */
  }

  .desktop-link:hover .dropdown-menu {
    display: block; /* Shows dropdown menu when menu items are hovered */
  }

  .dropdown-menu {
    background: #fff;
    box-shadow: 2px 2px 10px #777;
    font-size: .7em;
    padding: 0; 
    position: absolute;
    text-align: left;
    width: 20em;
  }

  .dropdown-menu a,
  .dropdown-menu a:link,
  .dropdown-menu a:visited {
    border-top: 1px solid #002147;
    color: #002147;
    font-size: 1.5em;
    font-weight: 600;
  }

  .dropdown-menu a:hover,
  .dropdown-menu a:focus,
  .dropdown-menu a:active {
    color: #fff;
  }

/* 
   ==================================================
   3. Mobile Nav Menu
   ==================================================
*/ 
@media screen and (max-width: 1200px) {
  body {
    padding-top: 5.9em; /* Content is not covered by menu bar */
  }
  
  .desktop-menu {
    padding: 0; /* Stops mobile nav from jumping up when mobile icon is clicked */
  }
  
  .desktop-link {
    text-align: left;
  }
  
  #mobile-menu {
    background: #002147;
    display: block; /* Shows mobile-menu on small screen menu */
    position: absolute;
    width: 100%;
    /*Added to make mobile menu bar look nice*/
    font-size: 1.25em;
    padding: 1em;
    left: -40px;
  } 
  
  #mobile-icon-container {
    background: none;
    float: right;
    width: 2.5em;
    position: relative;
    left: 1em;
  }
  
    /* 
     ==================================================
     3.1 Mobile Home2 Link
     ==================================================
    */ 
    #home {
      display: none; /* 연세대학교 desktop-link disappears from small screen menu */
    }
     #mobile-menu #home2 { /* Inherits from "Styles for mobile menu icon" */
      background: none;
      border: 1px solid #fff;
      font-size: .8em;
      left: 3.25em;
      position: absolute;
      top: 1em;  
    }
    
    /*Added to make mobile menu bar look nice*/
    #home2 {
      color: #fff;
      padding: .6em;
      text-decoration: none;
    }

    .yonsei-logo {
      float: left;
      margin-bottom: -.5em;
      margin-left: -.25em;
      margin-right: .5em;
      padding: .25em 0em .25em 0;
      width: 3.25em;
    }

    #logo-text {
      font-size: 1em;
      position: relative;
      top: .7em;
    }

    #mobile-icon {
      height: 3.5em;
      margin-top: -.75em;
      position: relative;
      top: .35em;
      width: 2.5em;
    }
  
    /* 
     ==================================================
     3.2 Mobile Dropdown Menu 
     ==================================================
    */
    .desktop-link a.caret { /* ".desktop-link a.caret" to beat specificity of styles for general a links */
      background: #193658;
      border-bottom: 1px solid #002147;
      border-left: 1px solid #002147;
      bottom: 0;
      color: #fff;
      display: block; /* Shows caret link on small screen menu */
      position: absolute;
      right: 0;
      top: 0;
    }

    .desktop-link .caret:hover, 
    .desktop-link .caret:focus, 
    .desktop-link .caret:active {
      background: #3277ae;
    }

    .desktop-link {
      border-top: 1px solid #193658; 
      display: none; /* Javascript menu is removed when mobile menu is inactive */
      font-size: .85em;
      margin-top: 0;
    }

    .desktop-link:hover .dropdown-menu {
      display: none; /* Makes dropdown menu disappear on small screens. AFFECTS ".desktop-link:hover .caretDropdown" ! */
    }
  
  /* 
     ==================================================
     3.3 Mobile Javascript Onclick Menu
     ==================================================
  */ 
    .responsive {
      padding: 0;
      position: absolute; /* Allows scrolling */
    }

    .responsive .desktop-link {
      background: #002147;
      display: block; /* Javascript menu is shown when mobile menu is active */
      width: 100%;
      position: relative;
      top: 7em; /* Vertically aligns menu items */
      z-index: 1; /* Allows mobile menu to show over slider */
    }

    .caretDropdown {
      display: block; 
      width: 100%;
      position: relative;
    }

    .desktop-link:hover .caretDropdown {
      display: block; /* Allows dropdown menu to remain on screen when other mobile menu items are hovered. AFFECTED BY ".desktop-link:hover .dropdown-menu"! */
    }
}

/*
  ==================================================
  5. Desktop Homepage Content 
  ==================================================
*/
h1 {
  font-size: 3em;
  margin: 0;
  padding-top: 1em;
  text-align: center;
}

h2 {
  font-size: 2em;
  margin: 0;
  padding-top: 1em;
}

p {
  font-size: 2em;
  line-height: 1.5em;
  margin-bottom: 0;
  margin-top: 0;
  padding: 1em;
}

/*
  ==================================================
  6. Tablet Homepage Content
  ==================================================
*/
@media screen and (max-width: 1000px) {
  p {
    font-size: 1.85em;
  }
}

/*
  ==================================================
  7. Mobile Homepage 
  ==================================================
*/
@media screen and (max-width: 500px) {
  p {
    font-size: 1.55em;
  }
}

/*
  ==================================================
  8. Footer Content
  ==================================================
*/
  footer {
    background: #002147;
    color: #fff;
		font-size: .65em;
    text-align: center;
  }

	#back-to-top {
		display: block;
		padding: 1.5em 0;
		margin: 0 auto;
		max-width: 8em;
	}

	#back-to-top:hover,
	#back-to-top:focus,
	#back-to-top:active {
		background: none;
	}

	#back-to-top img {
		width: 6em;
	}

	footer p {
		color: #fff;
		padding-top: 0;
		line-height: 1.5;
	}