/* ----------------------  LOAD FONTS FROM SERVER ------------------------------ */

@font-face {
 font-family: "GrotzecCond-Demibold";
  src: url(https://journalismdesign.camd.northeastern.edu/clean/fonts/GrotzecCond-Demibold3.woff2);
}  

@font-face {
 font-family: "GrotzecCond-DemiboldItalic";
  src: url(https://journalismdesign.camd.northeastern.edu/clean/fonts/GrotzecCond-DemiboldItalic.woff2);
}  

@font-face {
 font-family: "LeJeunePoster-Regular";
  src: url(https://journalismdesign.camd.northeastern.edu/clean/fonts/LeJeunePoster-Regular.woff2);
} 

@font-face {
 font-family: "LeJeunePoster-RegularItalic";
  src: url(https://journalismdesign.camd.northeastern.edu/clean/fonts/LeJeunePoster-RegularItalic.woff2);
}

/* ----------------------  SITE STYLES  ------------------------------------- */



*{
    
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* -----------------------  NAV BAR ---------------------------------------- */

ul.nav {
    background-color: #2961c2;
    color:white; /* Type color */
    padding: 5px;
    font-family: "GrotzecCond-Demibold","Impact",sans-serif;
    font-size: 2em;
    overflow: hidden; /* Forces the ul to be height of type */
    list-style-type:none; /* Hides the bullets that usually come with lists */
}

ul.nav li {
    float: left;  
}

ul.nav li.logo {
    position: relative;
    left: 40%;
}

ul.nav li a:link {
        text-decoration: none;
        color:white;
}

ul.nav li a:visited {
        color:white;
}


div.dropdowncontent {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px grey;
  z-index: 1;
}

ul.nav li.logo a:hover {
        text-decoration: none;
        background-color: #2961c2;
        letter-spacing: 2px;
        transition: letter-spacing 0.3s ease-in;
}
li.dropbutton:hover div.dropdowncontent {
  display: block;
}
li.dropbutton:hover div.dropdowncontent a:link {
    color: #666;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    font-size: .6em;
    border-bottom: 1px solid #666;
}

li.dropbutton:hover div.dropdowncontent a:visited { /* The same as above */
    color: #666;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    font-size: .6em;
    border-bottom: 1px solid #666;
}

li.dropbutton:hover div.dropdowncontent a:hover {
    color: white;
    background-color: #666;
    transition: background-color 0.2s ease-in;

}

/* ---------------------- LANDING PAGE STYLES -------------------- */
body {
    background-color: black;
}
.tease {
    border-bottom: 1px solid #d534eb;
    padding-bottom: 10px;
}
.teasecontainer {
    width: 50%;
    margin: 20px auto;
}

.teasecontainer .tease {
    margin-top: 40px;
}

.teasecontainer a:link {
    text-decoration: none;
    color:white;
}

.teasecontainer a:visited {
    text-decoration: none;
    color:white;
}

.teasecontainer a:hover {
    text-decoration: none;
    color:#d534eb;
}

.teasecontainer a h2 {
    font-family: "LeJeunePoster-Regular","Georgia",serif;
    font-size: 2.5em;
    position: relative;
}


.teasecontainer a:link h3 {
    font-family: "GrotzecCond-Demibold","Arial",sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
    color:white;
    letter-spacing: 2px;
    margin-top: 10px;
}

.teasecontainer a:visited h3 {
    color:white;
}

.teasecontainer a:hover h3 {
    color:#2961c2;
}

.teasecontainer a h3 span {
    border-top: 1px solid white;
    border-left: 1px solid white;
    padding-top: 5px;
    padding-left: 100px;

}