@font-face {
  font-family: 'Miso';
  font-style: normal;
  src:
    local('Miso'),
    local('Miso Regular'),
    url('../fonts/miso-regular.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  src:
    local('Noto Sans'),
    local('Noto Sans Regular'),
    url('../fonts/NotoSans-Regular.ttf') format('truetype');
}

.miso {
  font-family: 'Miso', sans-serif;
}

.noto {
  font-family: 'Noto Sans', sans-serif;
}

div.splashlink a {
  text-decoration: none !important;
  color: #000;
  border-bottom: 8px solid;
}

nav div div a.ö {
  border-bottom: none;
}

nav div div a.ö:hover {
  border-bottom: none;
}

div.splashlink a:hover {
  opacity: .8;
  border-bottom: 8px dotted;
}

nav div div.selected a {
  /* this is a new class to add to the nav link for whichever page you are on */
  border-bottom: 8px double;
}

div.splashlink a.about {
  border-color: #e7040f;
}

nav div div.selected a.about {
  color: #e7040f;
}

div.splashlink a.contact {
  border-color: #B900BB;
}

nav div div.selected a.contact {
  color: #B900BB;
}

div.splashlink a.events {
  border-color: #ff6300;
}

nav div div.selected a.events {
  color: #ff6300;
}

div.splashlink a.misc {
  border-color: blue;
}

nav div div.selected a.misc {
  color: blue;
}

div.splashlink a.projects {
  border-color: #ffde37;
}

nav div div.selected a.projects {
  color: #ffde37;
}

div.splashlink a.research {
  border-color: #0A0;
}

nav div div.selected a.research {
  color: #0A0;
}

article a {
  /* all of these properties are the same for each page set, the only variance is color so these can be stated just once */
  text-decoration: none;
  font-weight: bold;
  opacity: .7;
}

article a:hover {
  opacity: 1;
  transition: opacity .2s;
  -webkit-transition: opacity .2s;
  text-decoration: underline;
}

h1 {
  text-align: center;
  font-family: 'miso', sans-serif;
  font-weight: normal;
}

#artabout a {
  /* this is where we start to specify the color for each page set */
  color: #e7040f;
}

#artcontact a {
  color: #B900BB;
}

#artevents a {
  color: #ff6300;
}

#artmisc a {
  color: blue;
}

#artprojects a {
  color: #f2d12a;
  opacity: .95;
}

#artprojects a:hover {
  opacity: 1;
  transition: opacity .2s;
  -webkit-transition: opacity .2s;
  text-decoration: underline;
}

#artresearch a {
  color: #0A0;
}

.footers p {
  color: black;
  transition: color .3s;
  font-size: 2vh;
}

.footers p:hover {
  color: white;
  transition: color .1s;
}

.event-address {
  list-style-type: none;
}

.project-info {
  text-align: center;
  padding-left: 5vw;
  padding-right: 5vw;
}

.project-media {
  text-align: center;
}

.quote {
  margin-left: 3%;
  margin-right: 5%;
  padding-left: 2%;
  border-left: solid;
  border-color: #ffde37;
  border-left-width: 5px;
}

.quote-attribution {
  margin-left: 10%;
  margin-right: 5%;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media print {
  nav, div.social {
    display: none !important;
  }

  .arttitle span::before {
    content: "warren enstrom // " !important;
  }
}