/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

:root {
  --bg1: #fff;
  --bg2: rgba(128,128,128,.085);
  --bg3: rgba(128,128,128,.5);
  --wash1: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3));
  --wash2: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7));
  --primary: rgba(255, 221, 85, 1);
  --secondary: rgba(128,128,128, .4);
  --tertiary: rgba(128,128,128, .25);
  --txt1: #000;
  --txt2: #777;
  --shadow1: 0 0 .4em 0 rgba(0,0,0,.2);
  --shadow2: 0 0 .2em 0 rgba(0,0,0,.2);
  --shadow3: inset .4em 0 .4em -.4em rgba(0, 0, 0, 0.2);
  --shadow4: inset -.4em 0 .4em -.4em rgba(0, 0, 0, 0.2);
  --shadow5: 0 0 .175em 0 rgba(0,0,0,.75);
  --category-1:#FA9343;
  --category-2:#75D0FF;
  --category-3:#A36F92;
  --category-4:#FF5671;
  --category-5:#93B050;
  --profile: #C0B090;
  --columnWidth: 16.65%;
  --headerHeight: 50px;
}

.hidden{
  display: none;
}
.error{
  border: 1px solid red;
}

body {
  font-family: sans-serif;
  text-align: center;
  font-size: calc(10px + .4vw);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 1s ease-in-out;
  background: var(--bg1);
  margin: 0;
  color: var(--txt1);
  text-size-adjust: none;
}
audio,canvas,iframe,img,svg,video {
  vertical-align: middle;
}
input{
    color: var(--txt1);
    background: var(--bg1);
}

input[type="submit"], input[type="button"]{
    -webkit-appearance: none;
}
ol, ul{
  clear: both;
  list-style: none;
  padding: 0;
  margin: 0;
}
h1, h2{
  margin-bottom: .5em;
  text-align: center;
  font-weight: 100;
  font-size: 140%;
  letter-spacing: .15vw;
}

div.resourcesComingSoon h1, div.developComingSoon h1{
   font-size: 2em;
   padding: 3em 0;
}

h1 a{
  color: var(--txt1);
  text-decoration: none;
}
button, a.button, span.button{
  display: inline-block;
  text-decoration: none;
  min-width: 1em;
  border-radius: 500px;
  border: none;
  cursor: pointer;
  background-color: var(--secondary);
  color: var(--txt1);
}
button:disabled, a.button.disabled, input.disabled, input[type="text"]:disabled,
form#search .navigate li.disabled {
  opacity: .4;
  cursor: default;
}
button:not(:disabled):hover, a.button:not(.disabled):hover{
  box-shadow: var(--shadow2);
}

a.stealth{
  color: #999;
  text-decoration: none;
}

.clear{
  clear: both;
}

.button{
  cursor: pointer;
}

select{
  padding: 0.25em;
  border-radius: 0.5em;
}

input:focus, textarea:focus, button:focus, select:focus, a.button:focus{
  outline: none;
  box-shadow: var(--shadow2);
}

body > div.header{
  text-align: center;
  z-index: 500;
  background-color: var(--txt1);
  position: fixed;
  width: 100%;
  top: 0;
}

div.profile {
  display:none;
}

div.header h1{
  background: #fff;
}

div.header h1, h1.logo{
  font-size: 1.75em;
  padding: 0;
  margin: 0;
  letter-spacing: 4vw;
  text-align:center;
  padding-left: 4vw;
  line-height: 1.75em;
  height: 1.75em;
  color: #fff;
}
h1.logo{
  padding: .75em;
  padding: 0em;
  height: 0;
  font-size: 1em;
  overflow: hidden;
}
div.header h1 img{
  height: 1.25em;
  margin-right: 4vw;
}
div.preview div.header h1{
  width: calc(60% - 4vw);
  max-width: calc(750px - 4vw);
  padding-top: 2vh;
}

div.navigation{
  width: 100%;
  margin: 0;
  padding: 0;
  height: var(--headerHeight);
  z-index: 1;
  font-size: calc(10px + .8vw);
  display: flex;
}

div.navigation a{
  flex: 1 1 var(--columnWidth);
  text-align: center;
  display: block;
  text-decoration: none;
  padding: 0;
  font-weight: 100;
  cursor: pointer;
  box-sizing:border-box;
  color: var(--bg1);
  line-height: var(--headerHeight);
  background: var(--secondary);
  box-shadow: inset 0 0 0 1px var(--txt1);
}

div.navigation a span.count{
  padding-left: .5em;
}

div.navigation a.search{
  display: none;
}

div.navigation a.selected{
  font-weight: 900;
  background: var(--bg3);
  border: none;
  box-shadow: none;
}

div.searchLinks{
  margin: 0 auto;
  width: 95%;
  max-width: calc(50% + 300px);
}

body:not(.developSignup) div.developSignup,
body:not(.developers) > div.developers,
body:not(.topics) > div.topics,
body:not(.search) div.searchLinks.search,
body:not(.resources) div.resources{
  display: none;
}

div.searchLinks div{
  text-align: justify;
  clear: none;
  padding: 0;
  margin: 0 0 -1em;
}

div.searchLinks div:after{
  content: '';
  width: 95%; /* Ensures at least 2 lines, so justification works */
  display: inline-block;
}

div.searchLinks button.selected{
  display: inline-block;
}

body.developSignup .availability, body.developSignup .category-4{
  display: none;
}

div.searchLinks div button.nonfavorites{
  display: none;
}

div.searchLinks div button.nonfavorites.selected{
  display: inline-block;
}

div.searchLinks div button{
  background: none;
  padding: .6em .5em;
  margin: .75em .1em;
  box-shadow: 0 0 .2em rgba(255, 68, 102, 1);
  min-width: 2em;
  text-align: center;
}
div.searchLinks div button:hover, div.searchLinks div button:focus{
  box-shadow: 0 0 .6em rgba(255, 68, 102, 1);
}
div.searchLinks div button.selected{
  background: rgba(255, 68, 102, 1);
  box-shadow: 0 0 0 .1em rgba(255, 68, 102, 1);
}

div.searchLinks div.category-1 button{
  box-shadow: 0 0 .2em rgba(119, 221, 255, 1);
  background: none;
}
div.searchLinks div.category-1 button:hover,
div.searchLinks div.category-1 button:focus{
  box-shadow: 0 0 .6em rgba(119, 221, 255, 1);
}
div.searchLinks div.category-1 button.selected{
  background: rgba(119, 221, 255, 1);
  box-shadow: 0 0 0 .1em rgba(119, 221, 255, 1);
}

div.searchLinks div.availability button{
  box-shadow: 0 0 .2em rgba(115, 167, 75, .8);
  background: none;
}
div.searchLinks div.availability button:hover, div.searchLinks div.availability button:focus{
  box-shadow: 0 0 .6em rgba(115, 167, 75, .8);
}
div.searchLinks div.availability button.selected{
  background: rgba(115, 167, 75, .8);
  box-shadow: 0 0 0 .1em rgba(115, 167, 75, .8);
}

div.searchLinks div.category-2 button{
  box-shadow: 0 0 .2em rgba(127, 55, 104, .8);
  background: none;
}
div.searchLinks div.category-2 button:hover,
div.searchLinks div.category-2 button:focus{
  box-shadow: 0 0 .6em rgba(127, 55, 104, .8);
}
div.searchLinks div.category-2 button.selected{
  background: rgba(127, 55, 104, .8);
  box-shadow: 0 0 0 .1em rgba(127, 55, 104, .8);
}

div.searchLinks div.category-4 button{
  box-shadow: 0 0 .2em rgba(253, 98, 78, 1);
  background: none;
}
div.searchLinks div.category-4 button:hover,
div.searchLinks div.category-4 button:focus{
  box-shadow: 0 0 .6em rgba(253, 98, 78, 1);
}
div.searchLinks div.category-4 button.selected{
  background: rgba(253, 98, 78, 1);
  box-shadow: 0 0 0 .1em rgba(253, 98, 78, 1);
}

div.searchLinks div.category-5 button{
  box-shadow: 0 0 .2em rgba(128, 128, 128, 1);
  background: none;
}
div.searchLinks div.category-5 button:hover,
div.searchLinks div.category-5 button:focus{
  box-shadow: 0 0 .6em rgba(128, 128, 128, 1);
}
div.searchLinks div.category-5 button.selected{
  background: rgba(128, 128, 128, 1);
  box-shadow: 0 0 0 .1em rgba(128, 128, 128, 1);
}

div.searchLinks div.developButton, div.searchLinks div.searchButton{
  display: none;
  width: 100%;
  text-align: center;
}

body> div.resources, body > div.developers, body > div.topics{
  padding: 2em 0 0;
}

body > div.topics{
  box-sizing: border-box;
  width: 100%;
  text-align: justify;
  left: 0;
}

div.topics .topics > div{
  line-height: 2.4em;
  text-align: left;
  border-radius: 5em;
  margin: 0;
  padding: 0 1em 0;
  z-index: 1;
}

span.topics div h2{
  font-size: 1.2em;
  line-height: 1em;
  margin: 1em .5em .5em;
  text-align: left;
}

span.topics div h2 span{
  display: none;
}

div.topics div h2 span{
  font-size: .75em;
}

div.topics .topics > div ul li{
  text-align: center;
  overflow:hidden;
  text-overflow: ellipsis;
}

div.topics .topics.filtered > div:not(.filtered) {
  display: none;
}

div.topics .topics.filtered li:not(.filter){
  display: none;
}

div.topics div ul:not(.showNonFavorites) li.nonfavorites{
  display: none;
}
div.topics div ul:not(.showFavorites) li.favorites{
  display: none;
}
div.topics div ul.showAll li.nonfavorites,
div.topics div ul.showAll li.favorites{
  display: inline-block;
}

div.topics div ul li.favorites{
  min-height: 1em;
  font-size: 1em;
}

li.longName br.longName{
  display: none;
}

span.topics div ul li,
ul.topics > li{
  border-radius: 500px;
  display: inline-block;
  margin: .5em .5em 0 0;
  cursor: pointer;
  padding: .6em 1em;
  position: relative;
  white-space: nowrap;
  background-color: var(--category-5);
  box-sizing: border-box;
  border: none;
max-width: calc(100% - .5em);
overflow: hidden;
text-overflow:ellipsis;
}

span.topics div ul li{
  min-width: 4.1em;
}

form#search li.topic,
span.topics  div ul li,
ul.topics > li{
  color: black;
}

form#search li.topic:not(.favorites),
span.topics  div ul li:not(.favorites),
ul.topics > li:not(.favorites){
  background-image: var(--wash2);
}

form#search li.topic[data-category=category-1],
span.topics div.category-1 ul li,
ul.topics > li[data-category=category-1]{
  background-color: var(--category-1);
}

form#search li.topic[data-category=category-2],
span.topics div.category-2 ul li,
ul.topics > li[data-category=category-2]{
  background-color: var(--category-2);
}

form#search li.topic[data-category=category-3],
span.topics div.category-3 ul li,
ul.topics > li[data-category=category-3]{
  background-color: var(--category-3);
}

form#search li.topic[data-category=category-4],
span.topics div.category-4 ul li,
ul.topics > li[data-category=category-4]{
  background-color: var(--category-4);
}

form#search li.topic[data-category=category-5],
ul.topics > li[data-category=category-5]{
  background-color: var(--category-5);
}

span.topics div ul li.boxed{
  border: 2px solid var(--txt1);
  margin: calc(.4em - 2px);
}

div.topics span.shares, div.topics span.name{
  display: none;
}

span.topics.new div ul li span.badge.new,
span.topics.saved div ul li span.badge.saved{
  display: block;
}

span.topics div ul li span.badge{
  position: absolute;
  bottom: -.35em;
  right: -.75em;
  border-radius: 500px;
  min-width: 1.5em;
  width: 2em;
  height: 2em;
  line-height: 2.1em;
  font-size: .7em;
  overflow: visible;
  font-weight:  600;
  display: none;
  padding: 0;
  background-color: var(--bg1);
  color: var(--txt1);
  border: 2px solid var(--category-5);
}

span.topics div ul li span.badge.saved{
  top: -.35em;
  border: none;
  padding: 2px;
  background: inherit;
  color: black;
}

span.topics div ul li.selected span.badge,
span.topics div.category-1 ul li.selected span.badge,
span.topics div.category-2 ul li.selected span.badge,
span.topics div.category-3 ul li.selected span.badge,
span.topics div.category-4 ul li.selected span.badge{
  border: 2px solid var(--txt1);
  padding: 0;
}

span.topics div.category-1 ul li span.badge{
  border-color: var(--category-1);
}

span.topics div.category-2 ul li span.badge{
  border-color: var(--category-2);
}

span.topics div.category-3 ul li span.badge{
  border-color: var(--category-3);
}

span.topics div.category-4 ul li span.badge{
  border-color: var(--category-4);
}

span.topics div li .handle{
  width: 1em;
  padding: .55em .4em;
  margin: -.5em 0 -.25em -.5em;
  cursor: move;
  opacity: .3;
}

div.scrollTips{
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  clear: both;
}

div.scrollTips span.scrollMore, div.scrollTips span.scrollEdit{
  font-size: 2.5em;
  font-weight: 100;
  color: rgba(0,0,0, .15);
  display: inline-block;
  margin-top: 2em;
}

div.developButton{
  font-size: 125%;
}
div.developButton a.button{
  background: rgba(255, 221, 85, 1);
  width: 100%;
  padding: .5em 0;
  text-align: center;
  margin: 1em auto 0;
}
div.developButton a.button:focus, div.developButton a.button:hover, div.topics button:focus, div.topics button:hover{
  box-shadow: 0 0 1em rgba(255, 221, 85, 1);
}

div.top, div.bottom{
  line-height: 1.75em;
  width: 100%;
  float: none;
  text-align: left;
  position: fixed;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 2000;
  overflow: visible;
  pointer-events: none;
}

div.top{
  top: var(--headerHeight);
  text-align: right;
}

div.bottom{
  bottom: 0;
}

div.top *, div.bottom *{
  pointer-events: auto;
}

div.topics div.top{
  position: fixed;
}

.profileButton, .searchButton, .settingsButton,
.filterButton, .addResourceButton {
    margin: 1em;
    height: 2.75em;
    width: 2.75em;
    line-height: 2.75em;
    border-radius: 1.5em;
    box-sizing: border-box;
    background: #fff;
    box-shadow: var(--shadow1);
    cursor: pointer;
}

.filterButton {
    display: inline-block;
    line-height: 1em;
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
    padding: .5em 0 0 .925em;
    margin-bottom: 0;
    z-index: 200;
}

.profileButton{
  display: inline-block;
  width: auto;
  height: auto;
  text-align: right;
  box-shadow: none;
  float: right;
  margin-bottom: .75em;

}

.profileButton.open{
  box-shadow: var(--shadow1);
  padding: 0 .5em .25em;
  position: relative;
  left: .5em;
}

.profileButton button, .profileButton a.button{
  display: none;
  line-height: 2.5em;
  text-align: left;
  background: var(--secondary);
  border-radius: 1.5em;
  box-sizing: border-box;
  padding: 0 1em;
  width: 9em;
  margin: .5em 0;
  font-size: 1em;
}

.profileButton.open button, .profileButton.open a.button{
  display: block;
}

.profileButton img{
  margin: 0;
  width: 2.75em;
  border-radius: 2em;
  box-shadow: var(--shadow1);
}

.profileButton.open img{
  box-shadow: none;

}

.filterButton > *{
  width: 1.5em;
  height: 1.5em;
  margin: .2em -.15em .2em -.3em;
  padding: 0;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: bottom;
}

.filterButton > br{
  display: none;
}

.filterButton > span{
  font-size: .6em;
  font-weight: 900;
  text-align: center;
  line-height: 1.75em;
  background: black;
  color: white;
  border-radius: 500px;
  width: auto;
  min-width: 1.75em;
}

.filterButton > .filters{
    margin-right: -.65em;
}

.filterButton > .close{
  display: none;
  margin: 0;
  padding: 0;
  width: 2.75em;
  line-height: 2.75em;
  height: 2.75em;
  vertical-align: middle;
  font-size: 1em;
  color: black;
  background: none;
}

body.filtersOpen .filterButton{
    box-sizing: border-box;
    padding: 0;
}

body.filtersOpen .filterButton:hover{
    box-shadow: var(--shadow2);
}

body.filtersOpen .filterButton > .close{
    display: inline-block;
}
body.filtersOpen .filterButton > *:not(.close):not(.order){
    display: none;
}
body.filtersOpen .filterButton > *:not(.close) {
    width: 1.75em;
    height: 1.75em;
    line-height: 1.4em;

}
body.filtersOpen .filterButton > .filters{
    display: none;
}
body.filtersOpen .filterButton > .compactFilterCount{
    display: none;
}

  body.filtersOpen .filterButton > .filterCount{
      color: black;
      background: none;
    }

  body:not(.filtersOpen) .filterButton > .compactFilterCount{
      margin-left: -.5em;
  }
  body:not(.filtersOpen) .filterButton > .filterCount{
      display: none;
  }

  body .filterButton.saved > .filterCount:before,
  body .filterButton.shared > .filterCount:before,
  body .filterButton.archived > .filterCount:before,
  body .filterButton.saved > .compactFilterCount:before,
  body .filterButton.shared > .compactFilterCount:before,
  body .filterButton.archived > .compactFilterCount:before{
     content: '+';
  }

  div.profile a#update, .logo img{
      line-height: 1em;
      font-size: 2.25em;
      height: 1em;
      float: none;
      position: fixed;
      bottom: .33em;
      right: 2em;
      opacity: .8;
      border: 1px solid rgba(0,0,0,0.2);
      background: rgba(255, 255, 255, 1);
  }

  .logo img{
      border-radius: 500px;
      height: 1.25em;
      background: none;
      right: .5em;
      bottom: .2em;
      border: none;
  }

  div.bottom ul{
    line-height: 1.75em;
    padding: 0;
    text-align: left;
    font-size: 1em;
  }

  div.bottom ul.info > li{
    background: var(--bg1);
    box-shadow: var(--shadow1);
    padding: 1em 4vw .25em;
    border-radius: 0;
    width: 92vw;
    margin: 0;
    z-index: 200;
    overflow: auto;
    text-align: left;
    bottom: 0;
    display: none;
  }

  ul.info .title{
    margin: 0;
    padding: .5em 0 0;
    text-align: left;
    width: 100%;
    float: left;
    min-height: 2em;
  }

  ul.info .title button{
    float: right;
    clear: none;
    font-size: 1.5em;
    width: 1.75em;
    line-height: 1.75em;
    padding: 0;
    margin: -.5em 0 .25em .4em;
    height: auto;
    background: none;
    box-shadow: var(--shadow2);
  }

  ul.info .title h3{
    margin: 0 0 .25em;
    font-size: 1.75em;
    font-weight:100;
    padding: 0;
    display: inline;
    float: left;
  }

  ul.info .title h3 a{
    margin: -.25em 0 0;
  }

  ul.info .title a{
    margin: 0 0 0 calc(1vw + 1em);
    padding: 0;
    max-width: calc(8em + 5vw);
    background: none;
    border-radius: 0;
  }

  ul.info .title a.secondary{
    max-width: none;
  }

  ul.info .description{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: .25em 0 0 0;
      margin: 0;
  }

  form#search a,
  ul.info a{
    background: var(--bg2);
    border-radius: 500px;
    padding: .5em .75em;
    margin: 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
  }

  #unpublishedModal span.selectAll,
  #unpublishedModal span.deselectAll{
    cursor: pointer;
    background-color: var(--bg2);
    padding: .25em .75em;
    margin: 0 .5em .5em 0;
    border-radius: 2em;
    display: inline-block;
  }

  #unpublishedModal input[type=checkbox]{
    float: left;
    width: fit-content;
    margin: .75em .5em 0 0;
  }

  #unpublishedModal a{
    line-height: 1.25em;
    border-radius: 500px;
    width: auto;
    margin: 0 .5em 0 0;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--secondary);
    padding: .5em;
  }

  #unpublishedModal a.url{
    width: calc(100% - 9em);
    text-overflow: ellipsis;
    padding-left: 1em;
  }

  #unpublishedModal a img{
    width: 1.25em;
    height: 1.25em;
  }

  #unpublishedModal .resources li{
    margin: .75em 0;
    border-radius: 2em;
  }

  #unpublishedModal #topicsList{
    padding: .25em;
    margin: 0 .5em;
    border-radius: 2em;
  }

  #unpublishedModal input[type=submit]{
    width: 100%;
    margin-top: 2em;
  }

  form#search a.more{
    font-family: serif;
    font-weight: 900;
    border-radius: 1.5em;
    box-shadow: 0 0 0 .125em var(--txt1);
    padding: 0 .5em 0;
    margin: 1.25em 1.5em 0 .35em;
  }

  form#search li.resourceContainer a.url{
    padding: .75em;
  }

  form#search .resourceContainer > a:not(.more),
  ul.info ul.resources > li > a{
    background: none;
    line-height: 1.2em;
    border-radius: 0;
    width: calc(100% - 7.5em);
    padding: .1em;
    font-size: 1.1em;
  }

  form#search .resources > li a:not(.more),
  ul.info ul.resources > li a:not(.more){
    min-height: 2.4em;
    margin-left: .25em;
  }

  span.addResourceButton{
    padding: 0;
    font-size: 1.25em;
    line-height: 2.2em;
    width: 2.25em;
    margin: .75em 0 .75em 1em;
    color: black;
    height: auto;
    text-align: center;
    position: fixed;
    bottom: 0;
  }

  a.url img
  {
      height: 1em;
      width: 1em;
      margin: 0 .5em 0 0;
  }

  a span.path{
    opacity: .65;
  }

  a span.domain{
    font-weight: 900;
  }

  a span.title{
    font-size: 1.3em;
    display: block;
    margin: .5em 0 0;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }

  ol#resources .sidebar img{
    width: 2em;
    height: 2em;
    padding: .4em;
    float: left;
    cursor: pointer;
  }

  ol#resources img.saved,
  ol#resources img.shared{
    position: absolute;
    top: 4.5em;
    left: .5em;
  }

  ol#resources img.saved{
    top: 7em
  }

  ol#resources span.more{
    font: italic 900 1.25em serif;
    border-radius: 1.5em;
    border: 2px solid var(--txt1);
    padding: .05em .5em .1em;
    box-sizing: border-box;
    position: absolute;
    left: .75em;
    top: 1.75em;
    cursor: pointer;
    margin: 0;
  }

  ol#resources > li .date{
    position: absolute;
    top:  0;
    left: .5em;
    text-align: left;
    width: auto;
    overflow: hidden;
  }

  ol#resources span.more:hover{
      box-shadow: var(--shadow1);
  }

    /* signup & notifiaction form styles */

    body.signup div.edit ul{
      width: 25em;
      max-width: 85%;
      margin: .5em auto 1em;
      list-style: disc outside;
      text-align: left;
    }
    body.signup div.edit ul li{
      margin: .5em 0;
      list-style: disc outside;
    }

    body.signup .thankyou{
      display: none;
    }

    body.signup form{
      width: 95%;
    }

    body.signup form label, form.notification label {
      color: rgba(0,0,0,1);
      border-radius: 500px;
      padding: 0;
      margin: 1em .5em;
      display: block;
      width: calc(100% - 1em);
      text-align: left;
    }

    input,
    body.signup form label input,
    form.notification label input{
      width: calc(100% - 5.25em);
      margin: 0;
      border-radius: .5em;
      border: 1px solid #ccc;
      padding: .5em .625em 0;
    }

    form.notification label input[type=checkbox]{
      width: auto;
      margin: 0 .25em 0 0;
    }
    body.signup form button, body.signup form a.button,
    div.searchLinks div form.notification button,
    div.searchLinks div form.notification input[type=submit]{
      border-radius: 500px;
      padding: 1em .5em;
      margin: .5em .5em 0 .5em;
      display: inline-block;
      background: #eee;
      width: calc(50% - 1.25em);
      font-size: 110%;
      line-height: .9em;
      box-shadow: none;
      border: none;
      clear: none;
    }
    body.signup form a.button, div.preview a.button{
      width: calc(50% - 2em);
    }
    body.signup form button.submit,
    div.preview div.thankyou a.button,
    div.searchLinks div form.notification input[type=submit],
    div.topics button.submit{
      background: rgba(255, 221, 85, 1);
    }
    div.preview div.thankyou a#startover.button{
      background: #eee;
    }
    div.searchLinks div form.notification.minimized label.email,
    div.searchLinks div form.notification.minimized input[type=submit]{
      display: none;
    }
    div.searchLinks div form.notification.minimized button{
      width: calc(100% - 2em);
    }



    /* preview styles */
    div.preview div.edit{
      width: 60%;
      max-width: 750px;
      float: left;
      margin: 0 0 calc(30px + 3vh + 1em);
      text-align: center;
    }
    div.preview.full div.edit{
      display: none;
    }

    div.preview div.edit form{
      max-width: 700px;
      margin: 0 auto;
    }

    div.preview .formLinks .hidden{
      display: none;
    }
    div.preview .formLinks label{
      margin: .5em 0 .75em 8px;
      border: 1px solid #ccc;
      display: block;
      border-radius: .5em;
      background-size: 1em 1em;
    }
    div.preview .formLinks input{
      width: calc(100% - 50px);
      border: none;
      margin: 0;
    }

    div.preview .formLinks .sample input{
      color: #ccc;
    }

    div.background{
      height: 100%;
      top: 0;
      padding: 0;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
    }

    div.preview div.background{
      float: left;
      position: fixed;
      min-height: auto;
      width: 36%;
      min-width: calc(97% - 730px);
      margin: 2vh 0 1vh 0;
      right: 4%;
      box-shadow: 2px 2px 2px #CCC;
      border-radius: 1.5vw;
      height: calc(94vh - 36px);
    }
    div.preview.full div.background {
      float: none;
      width: 92%;
      max-width: 1200px;
      margin: 2vh auto;
      position: relative;
      right: 0;
      height: calc(90vh - 45px - 4vw);
    }
    div.preview.signup div.background {
      height: calc(96vh);
    }
    div.profile div.background {
      height: auto;
      min-height: 103;
      border-radius: 0 0 1em 1em;
      border-radius: 0;
      box-shadow: 0 0 .5em;
    }

    div.preview.full div.header h1 {
      width: 100%;
      max-width: 100%;
      margin: 2vh 0 0;
      padding: 0;
    }

    div.preview.full div.front {
      font-size: calc(8px + 1.6vw);
    }
    div.preview.full div.back {
      font-size: calc(8px + 1.2vw);
    }

    div.gradient{
      margin: 0;
      padding: 0 3%;
      overflow: auto;
      overflow-wrap: break-word;
      height: 100%;
    }
    div.preview div.gradient{
      border-radius: 1.5vw;
    }
    div.profile div.gradient{
      height: auto;
      min-height: calc(100vh);
      padding-bottom: 0;
      border-radius: 0 0 1em 1em;
      border-radius: 0;
    }
    div.gradient a{
      color: blue;
      text-decoration: underline
    }

    div.preview input:focus, div.preview textarea:focus,
    div.preview button:focus, div.preview select:focus{
      box-shadow: 0 0 .75em rgba(119, 221, 255, 1);
    }

    div.preview div.save{
      position: fixed;
      width: 100%;
      bottom: 0;
      background: #fff;
      box-shadow: 0 0 5px calc(5px + 1vh) #FFF;
      z-index: 10;
    }
    div.preview div.save #save{
      opacity: .25;
      cursor: default;
    }
    div.preview.save div.save #save{
      opacity: 1;
      cursor: pointer;
    }

    div.preview div.form-group.general span.asterisks{
      display:none;
    }
    div.preview.save div.form-group.general span.asterisks{
      display:inline;
    }
    div.preview.save div.form-group.general a.asterisks{
      display: none;
    }

    div.preview div.save a{
      display: block;
      width: 47%;
      float: left;
      margin: 0 .5% calc(5px + 1vh) 2%;
      z-index: 99;
      height: calc(25px + 2vh);
      line-height: calc(25px + 2vh);
      font-size: 18px;
      background: var(--secondary);
      border-radius: .5em;
    }
    div.preview div.save a#save{
      background: var(--primary);
    }

    div.front, div.back{
      max-width: 1200px;
      margin: auto;
      text-align: left;
      font-size: calc(10px + 2vw);
      clear: left;
    }
    div.back{
      font-size: calc(10px + 1.25vw);
    }

    div.preview div.front{
      font-size: calc(5px + 1vw);
    }
    div.preview div.back{
      font-size: calc(5px + .625vw);
    }
    div.front div.header{
      padding: .5em .75em;
      background: rgba(255,255,255,.5);
      margin: .5em 0;
      text-align: left;
      border: 1px solid rgba(0,0,0,0.1);
    }
    div.preview div.front div.photo:hover,
    div.preview div.front div.header:hover,
    div.preview div.back div.body:hover,
    div.preview div.back div.links li:hover,
    div.preview div.front ul.topics li:hover{
      cursor: pointer;
      box-shadow: 0 0 5px 0 #7DF;
    }
    div.preview .background:hover{
      cursor: pointer;
    }
    div.preview.signup div.front div.photo:hover,
    div.preview.signup div.front div.header:hover,
    div.preview.signup div.back div.body:hover,
    div.preview.signup div.back div.links li:hover,
    div.preview.signup div.front ul.topics li:hover,
    div.preview.signup .background:hover{
      cursor: default;
      box-shadow: none;
    }

    div.front div.header h2 span{
       hyphens: auto;
    }

    div.front div.header h2{
      font-weight: bold;
      display: inline;
      padding: 0;
      color: black;
    }

    div.front div.header span.location{
      font-weight: bold;
      font-size: .8em;
    }

    div.front div.photo{
      width: 30%;
      max-width: 350px;
      float: left;
      position: relative;
      overflow: hidden;
    }

    #developers div.front div.photo{
      max-width: 150px;
      width: calc(30% - 1em);
    }

    div.front div.photo img{
      width: 100%;
    }

    div.front div.photo.photoLoading img{
      z-index: 1;
      filter: blur(.75px);
    }

    div.front div.photo img.spinner{
      display: none;
    }

    div.front div.photo.photoLoading img.spinner{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .5;
      width: 80%;
      padding: 60%;
      filter: blur(0px);
      margin: -50%;
      z-index: 2;
      background: #999;
    }

    div.front ul{
      float: left;
      clear: none;
      width: 68.5%;
      min-width: calc(98.5% - 350px);
      margin-left: 1%;
    }

    div.preview.full div.front ul,
    div.profile div.front ul{
      font-size: 3.5vw;
    }

    div.front ul.fewestest li{
      font-size: 2em;
    }
    div.front ul.fewest li{
      font-size: 1.5em;
    }
    div.front ul.few li{
      font-size: 1.175em;
    }
    div.front ul.many li{
      font-size: .9em;
    }
    div.front ul.most li{
      font-size: .7em;
    }
    div.preview div.front ul.mostest li{
      font-size:.6em;
    }

    div.back div.links li, div.back div.body{
      margin: .65em 0 0;
      padding: .5em 1em;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid rgba(0,0,0,0.1);
      background: rgba(255, 255, 255, .7);
      float: left;
      width: calc(100% - 2em);
    }

    div.back div.links li{
      width: auto;
      margin-right: .5em;
    }

    div.back div.links li:first-child:last-child{
      width: calc(100% - 2em);
      margin-right: 0;
    }

    div.back div.body{
      background: rgba(255, 255, 255, .8);
      margin-bottom: 1em;
      clear: left;
      opacity: 1;
    }

    div.back div.body h1, div.back div.body h2,
    div.back div.body h3, div.back div.body h4,
    div.back div.body h5, div.back div.body h6,
    label.description div.display h1, label.description div.display h2,
    label.description div.display h3, label.description div.display h4,
    label.description div.display h5, label.description div.display h6{
      margin: 0;
      font-weight: bold;
      font-size: 1em;
      text-align: left;
    }
    div.back div.body h1, label.description div.display h1{
      font-size: 1.2em;
    }
    div.back div.body h2, label.description div.display h2{
      font-size: 1.1em;
    }
    div.back div.body ul, label.description div.display ul{
     list-style: disc;
      margin: 0 0 .5em 1.5em;
    }

form#search ul.profiles li.developer{
  margin: .5em .5em 0 0;
  display: inline-block;
  cursor: pointer;
  border-radius: 2em;
  vertical-align: top;
  background: var(--bg2);
  box-sizing: border-box;
  padding: .5em;
  text-align: left;
}

ol#developers, ol#resources, div.topics > span.topics{
 display: block;
 margin: 0 0 4em;
 text-align: left;
}

ol#resources{
 text-align: center;
}

ol#developers > li, ol#resources > li{
  display: inline-block;
  padding: .625em;
  margin: 1em .5em 0 1em;
  box-sizing: border-box;
  border-radius: 1.5em;
  vertical-align: top;
  width: calc(100% - 1em);
}

ol#developers > li{
    width: calc(50% - 1.75em);
  cursor: pointer;
  border-radius: 2em;
  background: var(--profile);
  background-image: var(--wash2);
}

ol#developers > li.boxed{
  border: 2px solid var(--txt1);
}

ol#developers > li:not(.boxed):hover{
  box-shadow: var(--shadow1);
}

ol#developers > li.following{
  background: var(--profile);
  background-image: none;
}

ol#resources > li{
  margin: 1em auto 0;
  padding:  2em .75em 0;
  background-size: 1.5em;
  position: relative;
  display: list-item;
  text-align: left;
  max-width: 100%;
  overflow:visible
}

ol#resources > li > a{
  display: block;
  border-radius: 1em;
}

ol#resources > li > a:not(.more){
  padding: .5em .5em .75em 1em;
  margin: 0 0 .5em 3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--bg2);
  min-height: 3.5em;
}

ol#resources > li > a br{
    clear: none;
}

ol#resources > li > a br::after{
  display: block;
  width: 2em;
}

ol#resources > li > a.more{
  position: absolute;
  top: 0;
  margin: .5em 0;
  cursor: pointer;
}

ol#resources > li > a.more span{
  font-family: serif;
  font-weight: 900;
  border-radius: 1.5em;
  box-shadow: 0 0 0 .125em var(--txt1);
  padding: 0 .5em 0;
  margin: 0 0 0 .35em;
  box-sizing: border-box;
}

ol#resources > li > a:hover{
  box-shadow: var(--shadow1)
}


form#filterForm label:not(.clearAll){
  position: relative;
}


form#filterForm span.count{
  display: inline-block;
  position: absolute;
  top: .125em;
  right: 0;
  padding: .25em;
  background: var(--bg2);
  opacity: .5;
}

ol#resources ul{
  width: calc(50% - 1.75em);
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 3em;
}

ol#resources ul.excerpts{
  min-height: 0;
  width: calc(100% - 4em);
  box-sizing: border-box;
}

ol#resources ul.excerpts li{
  line-height: 2em;
  height: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 1em;
  cursor: pointer;
  margin-bottom: 1em;
  padding-right: .25em;
}

ol#resources ul.excerpts li img{
  height: 2em;
  width: 2em;
  margin-right: .325em;
  border-radius: 50%;
}

ol#resources ul.topics{
  text-align: right;
  margin-left: 0;
}

ul.info > li:not(.following) .unfollow,
ul.info > li.following .follow{
  display: none;
}

ol#developers a.developer, ol#developers .close{
  display: none;
}

ol#developers > a.developer{
  font-size: .9em;
  padding-right: .75em;
}

ol#developers ul.topics li.boxed,
ol#resources  ul.topics li.boxed,
ol#resources  ul.developers li.boxed{
  box-shadow: 0 0 0 2px var(--txt1);
}

ol#developers div.front{
  font-size: .95em;
  max-width: none;
}

ol#developers div.front h2{
  padding: 0 .5em 0 0;
  font-weight: 100;
}

ol#developers div.front span.location{
  font-weight: 100;
  padding-right: .5em;
  white-space: nowrap;
}

ol#developers div.front img{
  border-radius: 500px;
}

form#search ul.profiles div.header,
ol#developers > li div.header{
  display: block;
  float: none;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 1.5em;
  cursor: pointer;
  color: var(--txt1);
  background: none;
  float: right;
  width: calc(100% - 3.5em);
}

form#search div.photo{
  float: left;
  overflow: hidden;
  position: relative;
  max-width: 150px;
  margin: .75em 0;
  height: 3em;
  width: 3em;
  border-radius: 900px;
}

form#search h2.name{
  padding-top: .25em;
}

ol#developers > li.boxed.following div.header{
  background-image: url('../img/following.svg');
}

ol#developers > li .front div.photo{
  border-radius: 900px;
  width: 3em;
  height: 3em;
  cursor: pointer;
}

ol#developers span.age, ol#developers span.shares{
  display: none;
}

ol#developers ul.topics{
  width: calc(99% - 4.5em);
  margin: .25em 0 0 .5em;
}

ol#developers ul.topics{
  width: 100%;
  margin: .5em;
}

ol#developers ul.topics li{
  padding: .125em .375em;
  margin: 0 .5em .5em 0;
  max-width: calc(100% - .5em);
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: .25em;
  opacity: .85;
}

ol#developers > :not(.boxed) ul.topics li:not(.boxed):not(.favorites):nth-child(n+4){
  display: none;
}

ol#resources ul.topics li{
  padding: .5em .75em;
  margin: 0  0 .5em .5em;
}

ol#resources ul li:hover{
  box-shadow: var(--shadow1);
}

ol#resources ul.developers li{
  margin: 0 .5em .5em 0;
  height: 4.5em;
  width: 4.5em;
  display: inline-block;
  cursor: pointer;
  border-radius: 3em;

}

ol#resources ul.developers li:not(.boxed){
  box-shadow: var(--shadow1);
}

form#search li.developer img,
ol#resources ul.developers li img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

form#topicsFilter, form#filterForm,
form#developersFilter, form#resourcesFilter{
    text-align: left;
    padding: .5em 3em .5em 1.25em;
}

body.filtersOpen > .options,
body.filtersOpen > .filtersOpen {
    width: 60%;
}

body.filtersOpen form#topicsFilter,
body.filtersOpen form#filterForm,
body.filtersOpen form#resourcesFilter,
body.filtersOpen form#developersFilter{
    padding: 1.5em 1em 1em 1em;
    position: fixed;
    background: var(--bg1);
    top: var(--headerHeight);
    right: 0;
    width: 40%;
    box-sizing: border-box;
    height: calc(100% - var(--headerHeight));
    box-shadow: var(--shadow1);
    overflow-y: scroll;
    overflow-x: auto;
    z-index: 600;
}

body.filtersOpen form#filterForm::-webkit-scrollbar,
body.filtersOpen form#topicsFilter::-webkit-scrollbar,
body.filtersOpen form#resourcesFilter::-webkit-scrollbar,
body.filtersOpen form#developersFilter::-webkit-scrollbar {
  display: none;
}

form#filterForm > div,
form#topicsFilter > div,
form#resourcesFilter > div,
form#developersFilter > div{
    clear: both;
    margin-bottom: .5em;
}

form#filterForm > div > div {
  padding: .25em;
  margin: 0 -.25em;
  border-radius: 1em;
  background: var(--bg2);
}

form#filterForm > div > div > div {
  padding: .25em 0;
}

form#topicsFilter h2, form#filterForm h2,
form#resourcesFilter h2, form#developersFilter h2{
    font-size: 1.2em;
    margin:  1em 0 .25em;
    text-align: left;
    /* background: #eee; */
    border-radius: 500px;
}

form#topicsFilter .button, form#filterForm .button,
form#resourcesFilter .button, form#developersFilter .button{
    clear: none;
    padding: .5em .75em;
    margin: 0 .25em;
    font-weight: 500;
    border: none;
    background: none;
    font-size: .8em;
}

form#topicsFilter div > br, form#filterForm div > br,
form#resourcesFilter div > br, form#developersFilter div > br{
  display: none;
}

form#FilterForm div.all > br,
form#topicsFilter div.all > br,
form#filterForm div.all > br,
form#developersFilter div.all > br{
  display: block;
  height: 1em;
  content: ' ';
}

form#topicsFilter h2 .button,
form#filterForm h2 .button,
form#developersFilter h2 .button{
    float: right;
    font-size: .7em;
    font-weight: unset;
    letter-spacing: normal;
}

form#topicsFilter h2 .button.clear,
form#filterForm h2 .button.clear,
form#developersFilter h2 .button.clear{
    float: none;
}

#filterForm img.search {
  width: 1.5em;
}

body:not(.filtersOpen) form#filterForm,
body:not(.filtersOpen) form#topicsFilter,
body:not(.filtersOpen) form#filterForm,
body:not(.filtersOpen) form#developersFilter{
    margin-left: -9999px;
    position: fixed;
}

form#filterForm div.topics:not(.all) label.nonfavorites:not(.checked),
form#developersFilter div.topics:not(.all) label.nonfavorites:not(.checked){
  display: none;
}

form#filterForm div.collapsed > *:not(h2),
form#developersFilter div.collapsed > *:not(h2) {
  display: none;
}

form#topicsFilter input[type=checkbox],
form#developersFilter input[type=checkbox],
form#filterForm input[type=checkbox]{
    width: 1em;
    margin-right: .5em;
}

div.resourcesInfo, div.developersInfo, div.topicsInfo {
  text-align: left;
  margin: 0 1em 0;
  line-height: 1.75em;
}

div.options{
  text-align: left;
  padding: 2.25em 1em 0;
  margin: var(--headerHeight) 0 -1em;
  box-sizing:border-box;
}

div.options.disabled{
  padding: 0;
  margin-bottom: 0;
}

div.options button,
div.options span.more,
div.options .clearAll,
div.options .clear {
  background: var(--tertiary);
  padding: .375em .875em;
  font-size: .9em;
}

div.options :not(.infoButtons) button:not(.clear) {
  border-radius: 2em 0 0 2em;
  padding-right: .5em;
}

div.options button.clear {
  margin-left: .125em;
  margin-left: 0;
  padding-left: .5em;
  border-radius: 0 2em 2em 0;
}

div.options .selected  {
  box-shadow: 0 0 0 2px var(--bg3);
}

div.options span.more,
div.options .clearAll{
  cursor: pointer;
}

div.options.minimal span:not(.selected):not(.more):nth-child(n+6),
div.options.minimal span.more:nth-child(-n+6){
  display:none;
}

div.options .infoButtons {
  display:block;
  margin: 0;
  padding: 0;
}

div.options .infoButtons > * {
  background: none;
  text-decoration: underline;
  display: block;
  margin: .5em 1em;
  padding: .25em 2em;
  text-align: left;
  background-size: 1.5em;
  background-position: .125em 0;
  background-repeat: no-repeat;
}

div.options > * {
  padding: 0;
  margin: 0 1em .75em 0;
  border-radius: 2em;
  display: inline-block;
}

div.options.disabled > * {
  display: none;
}

div.options .infoButtons > .follow {
  background-image: url('../img/checkmark.svg');
}

div.options .infoButtons > .unfollow {
  background-image: url('../img/checkmark2.svg');
}

div.options .infoButtons > .viewProfile {
  background-image: url('../img/profile.svg');
}

div.preview div.edit {
  font-size: 14px;
}

div.edit div.form-group{
  display: block;
  width: 92%;
  padding: 0 4% 1em;
  margin: 0;
  text-align: left;
}
div.edit div:after, div.edit label.radius:after,
div.edit label.bgcolor:after,
div.edit label.bgopacity:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

div.edit div.form-group h2{
  font-size: 1.2em;
  padding: 0 0 .25em;
}

div.edit div.form-group h2 a{
  color: var(--txt1);
  text-decoration: underline
}

div.edit div.form-group span.toggle{
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 4px 8px;
  font-size: .8em;
  /* margin: 0; */
}

div.edit input,
div.edit textarea,
div.edit select,
div.edit button,
#settings input,
#settings select,
#settings textarea {
  width: calc(100% - 20px);
  margin: .25em 0;
  padding:  4px 8px;
  border: 1px solid #ccc;
  border-radius: .5em;
  background: var(--bg1);
  font-size: 14px;
}

body.modal{
  height: 100%;
  overflow: hidden;
}

div.modalContainer{
  text-align: center;
  width: 100%;
  position: fixed;
  background-color:var(--bg3);
  background-image:var(--wash1);
  z-index: 2000;
  cursor: pointer;
  padding: 0;
  display: none;
  top: 0;
  bottom: 0;
}

div.modalContainer > *,
.modalNavigation{
  box-sizing: border-box;
  width: calc(100% - 8em);
  max-width: 1200px;
  margin: 0 auto;
  cursor: auto;
  box-shadow: var(--shadow1);
  background-color: var(--bg1);
  border-radius: 1em;
}

div.modalContainer > *
{
  max-height: calc(100vh - var(--headerHeight) - 1.5em);
  margin: calc(var(--headerHeight) + .5em) auto;
  text-align: left;
  line-height: 1.75em;
  overflow-y: scroll;
  padding: 2em;
  position: relative;
}

div.modalContainer > #resourceModal
{
  padding-bottom: 0;
}

div.modalContainer > *::-webkit-scrollbar{
  display: none;
}

.modalContainer h2{
  text-align: left;
  margin: 0 0 1em 0;
}

.modalContainer span.plural.hidden{
  display: none;
}

.modalNavigation{
  display: flex;
  overflow-x: auto;
  gap: .5em;
  box-sizing: border-box;
  padding: .5em;
  margin: 0 -2em;
  position: fixed;
  top: 1em;
  background: var(--bg1);
  z-index: 100;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-height: calc(var(--headerHeight) + .75em);
}

.modalNavigation > *{
  padding: .25em 1em;
  cursor: pointer;
  border-radius: 4em;
  line-height: calc(var(--headerHeight) - 1em);
  min-width: calc(var(--headerHeight) - 2.5em);
  background: var(--secondary);
  font-size: .85em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modalNavigation > * > img{
  height: calc(var(--headerHeight) - 1em);
  margin-left: -.75em;
  border-radius: 4em;
}

.modalNavigation > *:not(.current):hover{
  box-shadow: var(--shadow1);
}

.modalNavigation > .current{
  box-shadow: 0 0 0 2px var(--txt1);
  cursor: default;
}

.modalContent:not(.current){
  display: none;
}

.modalContent ul.topics li{
  padding:  0 .5em;
  cursor: default;
  border-radius: .25em;
}

.modalContent div.display{
  font-size: .9em;
  background: var(--bg2);
  padding: 1em 1.5em;
  border-radius: .5em;
  line-height:1.5em;
  margin: 1em 0 0;
}

.modalContent div.display.excerpts,
#editResource label.excerpts div.display,
ol#resources ul.excerpts li{
  font-style: italic;
  font-weight: 100;
  font-family: serif;
  font-size: 1.2em;
}

#resourceModal a.url{
  display: block;
  margin: 0 -.5em;
  line-height: 1.5em;
  padding: 0 .5em;
  max-height: 50vh;
  border-radius: .75em;
  box-sizing: border-box;
  font-size: 1.1em;
}

.modalContainer > form{
  font-size: 14px;
}

.modalContainer form label {
  margin: 1em 0 0;
  display: flow-root;
  position: relative;
  line-height: 1em;
  clear: both;
}

.modalContainer form label.description.minimal div.display{
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  padding: .5em .75em;
}

.modalContainer form label.disabled {
  opacity: 40%;
}

.modalContainer button,
.modalContainer input[type=button],
.modalContainer input[type=submit]{
  width: calc(50% - .5em);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  margin: 1em .5em 0 0;
  padding: .75em 0;
  background-color: var(--secondary);
  border: none;
  border-radius: 1em;
  font-size: 1.1em;
  color: var(--txt1);
}

.modalContainer #addResource button,
.modalContainer #addResource input[type=button],
.modalContainer #addResource input[type=submit]{
  width: calc(33.3% - .5em);
}

#addResource label input.keepPrivate {
  width: auto;
  float: none;
}

.modalContainer .endButtons{
  background: var(--bg1);
  bottom: 0;
  position: sticky;
  padding: .5em 2em 2em;
  margin: 1.5em -2em 0;
  box-shadow: var(--shadow1);
}

.modalContainer .endButtons.disabled{
  box-shadow: none;
  padding: 0 0 1em;
}

.modalContainer .endButtons.disabled *{
  display: none;
}

#settings button.done,
.modalContainer input[type=submit]{
  background: var(--primary);
  margin-right: 0;
}

.modalContainer input[type=button].cancel{
  background: var(--tertiary);
}

div.edit textarea{
  height: 10em;
  line-height: 1.5em;
  font-size: 16px;
}
div.edit input[type=checkbox],div.edit input[type=radio]{
  display: inline;
  width: auto;
  margin: 0 4px 0 0;
  font-size: 12px;
}
div.edit input#photo{
  font-size: 12px;
  line-height: 22px;
}

div.edit label.radius, div.edit label.bgcolor,
div.edit label.bgopacity, div.edit label.bgimage,
div.edit label.photo, div.edit label.text{
  margin: .25em 0 .25em 8px;
  clear: both;
  width: calc(100% - 8px);
  display: block;
  text-align: left;
}

div.edit div.radius, div.edit div.bgopacity, div.edit .text input,
div.edit input#bgcolor, div.edit input#photo, div.edit select, div.edit button.rotate{
  float: right;
  clear: right;
  width: calc(100% - 175px);
  height: 6px;
  padding: 0;
  margin: 8px 10px;
  padding:  2px 8px;
}

div.edit select, div.edit input#bgcolor, div.edit input#photo,
div.edit .text input, div.edit button.rotate{
  height: 22px;
  width: calc(100% - 157px);
  margin: 0 0 8px;
}

div.edit select{
  width: calc(100% - 141px);
  height: 24px;
}

div.edit button.rotate{
  width: calc(100% - 139px);
  height: 24px;
  font-size: 12px;
}

div.edit input#bgcolor{
  margin-bottom: 0;
}

div.edit input#radius, div.edit input#bgopacity{
  display: none;
}

div.edit label.remotebgimage {
  display: none;
}

div.edit .ui-slider .ui-slider-handle{
  height: 1em;
  top: -.2em;
}
form#filterForm div.filterSearch label.textSearch{
  width: 75%;
  display: inline-block;
  padding-top:10px;
}

form#filterForm label:not(.clearAll), div.edit .topics label,
.category-4 label{
  width: auto;
  margin: .25em .25em .25em 0;
  padding: .3em .6em .2em;
  background:none;
  border-radius: .5em;
  display: block;
}

form#filterForm label.order{
  display: inline-block;
  float: left;
}

#filterForm .age label{
  border: none;
  cursor: pointer;
}

form#developersFilter .all:not(.collapsed) label.nonfavorites,
form#developersFilter :not(.collapsed) label.nonfavorites.selected,
form#filterForm .all:not(.collapsed) label.nonfavorites,
form#filterForm :not(.collapsed) label.nonfavorites.checked{
  display: block;
}
.textSearch input[type=reset] {
  width: 2em;
  padding: 0.5em 0.1em;
}

form#DevelopersFilter button.toggle,
form#filterForm button.toggle{
    clear: both;
    width: auto;
    font-size: 12px;
}

#topicsFilter .topics span.count {
  display: none;
}

#editResource label.titles{
  margin-top: .5em;
}

#editResource label input,
#editResource label textarea,
#addResource label input,
#addResource label textarea,
#settings label input,
#settings label select,
#settings label textarea{
  display: inline-block;
  float: right;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 .5em 0;
}

#editResource label.titles input,
#editResource label input.topic{
  margin-right: 2.5em;
  width: calc(100% -  2.5em)
}

#editResource h2{
  margin: -.25em 1.75em .5em 0;
  font-size: 1.625em;
  line-height: 1.25em;
  font-weight: unset;
  letter-spacing: unset;
  min-height: 1.1em;
}

#editResource label input.resourceTitle{
  font-size: 1.375em;
  padding: .375em .5em;
  margin-right: 2em;
  width: calc(100% -  2em);
}

#editResource label span.required{
    font-size: .75em;
    opacity: .5;
}

#editResource .titles .other{
    margin: 0 3em 1em 0;
}

#editResource .titles .other li{
    background: var(--tertiary);
    padding: .375em;
    border-radius: 1.5em;
    margin: .25em 0 .5em;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

#editResource .titles .other li .name{
    background: var(--bg2);
    display: inline-block;
    font-size: .8em;
    vertical-align: middle;
    font-weight: bold;
    color: var(--txt2);
    padding: .125em .375em;
    margin: 0 .5em 0 0;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    width: 4em;
    border-radius: .375em;
}

#editResource .titles .other li img{
    height: 1.5em;
    width: 1.5em;
    border-radius: 1em;
    margin: 0 .5em 0 0;
}

#editResource .titles.minimal .other li{
    display: inline-block;
    margin: 0 1em 0 0;
    padding: .375em .75em;
}

#editResource .titles.minimal .other li:nth-child(n+6){
    display: none;
}

#editResource .titles.minimal .other li .name{
    background: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#editResource .titles.minimal .other li :not(.name){
    display: none;
}

#editResource div.preview{
    margin: 0 -.5em 1.5em;
    border-radius: .5em;
    padding: .5em .5em;
    overflow: auto;
    cursor: pointer;
    background: var(--bg2);
}

#editResource div.preview:hover{
    box-shadow: var(--shadow1);
}

#editResource div.preview > img{
    float: left;
    margin: .375em .25em .25em 0;
    max-width: 6em;
    max-height: 3em;
    box-shadow: var(--shadow5);
}

#editResource div.preview button{
    display: block;
    padding: .5em .75em;
    font-size: 1em;
    width: auto;
    text-align: left;
    margin: .5em 0;
    background: none;
    text-decoration: underline;
}

#editResource div.preview .description{
    line-height: 1.5em;  
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis; 
    padding: .25em 0 0 .25em;
}

#editResource a.url{
  line-height: 1.25em;
  padding-left: .5em;
}

#editResource a.url .title{
  display: none;
}

#editResource.modalContent div.display{
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}

#editResource div.display p{
  margin: .5em 0;
}

#editResource label textarea {
  display: block;
  width: 100%;
  height: 10em;
  box-sizing: border-box;
  line-height: 1.5em;
  resize: vertical;
  margin: .5em 0 2em 0;
  border-radius: .5em;
}

#editResource label.minimal textarea{
  display: none;
}

#editResource label.excerpts:not(.minimal),
#editResource label.description:not(.minimal) {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1em;
}

#editResource label.archive {
  border-radius: .5em;
  padding: .25em;
  cursor: pointer;
}

#editResource:not(.deleteEnabled) label.archive{
  display: none;
}

#editResource label.archive input{
  width: auto;
  float: left;
  margin: 0 .5em;
}



#editResource a.button.edit {
  height: 1.5em;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  min-width: 1.5em;
  position: absolute;
  bottom: .25em;
  right: .25em;
  font-size: 130%;
}

#editResource a.button.done {
  border-radius: .5em;
  line-height: 2em;
  height: 2em;
  padding: 0;
  margin: 0 0 0 calc(100% - 4em);
  width: 4em;
  text-align: center;
  font-size: .9em;
}

form#editResource button.more{
  width: 1.5em;
  height: 1.5em;
  text-indent: -900px;
  overflow: hidden;
  background-image: url('../img/more.svg');
  background-size: cover;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
}

form#editResource label:not(.minimal) button.more,
form#editResource > button.more:not(.minimal){
  background-image: url('../img/less.svg');
}

form#editResource label.description button.more,
form#editResource label.excerpts button.more{
  background-color: rgba(0,0,0,0);
  background-image: url('../img/edit.svg');
  top: unset;
  bottom: .25em;
  right: .25em;
  opacity: .75;
}

form#editResource label.description:not(.minimal) button.more,
form#editResource label.excerpts:not(.minimal) button.more{
  background-image: none;
  text-indent: 0;
  width: auto;
  padding: .375em .5em;
  border-radius: .5em;
  font-size: .9em;
  line-height: .8em;
  bottom: 0;
  right: 0;
  background-color: var(--tertiary);
}

form#editResource label.titles.minimal input{
  display: none;
}

form#editResource label.titles:not(.minimal) h2{
  display: none;
}

form#editResource label input.topicSearch{
  margin-right: calc(50% + 1em);
  width: calc(50% - 7em);
}

form#editResource label:not(.minimal) input.topicSearch{
  display: none;
}

form#editResource .topics{
  float: right;
  width: calc(100% - 8em);
  box-sizing: border-box;
  clear: both;
  margin: 0 2.5em 0 0;
  min-height: 1em;
  text-align: left;
}

form#editResource label:not(.minimal) .topics{
  column-count: 2;
}

form#editResource label .topics > div{
  display: inline-block;
  margin: .25em .25em .25em 0;
  padding: 0 0 .125em .5em;
  width: 100%;
  box-sizing: border-box;
  text-wrap: nowrap;
}

form#editResource label .topics > div > *{
  border: none;
  padding: 0 1em 0 0;
  display: inline-block;
  height: 1.255em;
  line-height: 1.25em;
  overflow: hidden;
  border-radius: 0;
}

form#editResource label:not(.minimal) .topics > div > *{
  text-wrap: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 4em);
}

form#editResource label.minimal .topics div{
  display: none;
}

form#editResource label.minimal .topics div.match,
form#editResource label.minimal .topics div.selected,
form#editResource label.minimal .topics div.default,
form#editResource label.minimal .topics div.current,
form#editResource label.minimal .topics div.url{
  display: inline-block;
  width: auto;
}

form#editResource label .topics input{
  display: none;
}

form#editResource label .topics label{
  float: none;
  content:"";
  padding: 0 .25em;
  margin: -.05em 0 .05em 0;
  width: 1em;
  background: url('../img/star.svg') no-repeat 0 0;
  background-size: 1.25em;
  box-shadow: none;
  cursor: pointer;
  color: white;
}

form#filterForm div.personal label .count{
  font-size: 1.175em;
}


#filterForm div.age label.checked{
  background: var(--secondary);
}

form#editResource label .topics input.save:checked + label.save,
form#filterForm div.personal label.saved.checked{
  background-image: url('../img/star2.svg');
}

form#editResource label .topics input.share + label.share,
form#filterForm div.personal label.shared{
  background-image: url('../img/heart.svg');
}

form#editResource label .topics input.share:checked + label.share,
form#filterForm div.personal label.shared.checked{
  background-image: url('../img/heart2.svg');
}

form#filterForm div.personal label.archived{
  background-image: url('../img/archive.svg');
}

form#filterForm div.personal label.archived.checked{
  background-image: url('../img/archive2.svg');
}

form label img.handle{
  width: 12px;
  padding: .2em .4em .2em .6em;
  cursor: move;
}
form .topics label img.handle, form .category-4 label img.handle{
  width: 10px;
  margin: -.3em -.6em -.1em 0em;
}
div.front ul.topics li{
  float: left;
  margin: 0 .2em .3em;
}
div.profile div.front ul.topics li{
  background: rgba(255,255,255,.6);
}

form#search {
    top: calc(var(--headerHeight) + 1em);
    left: 1em;
    transform: none;
    width: calc(100% - 2em);
    max-width: none;
    max-height: calc(100vh - 100px);
}

form#search .navigate div{
  display: none;
  margin-top: 1em;
  text-align: right;
}

form#search li.topic, form#search .suggest button,
form#search .navigate li, ul.profiles li{
  width: auto;
  padding: .25em .75em;
  display: inline-block;
  margin: 1em .5em 0 0;
  background: var(--bg2);
  font-size: 1em;
  border-radius: 500px;
  cursor: pointer;
}

form#search .navigate li{
  box-sizing: border-box;
  width: calc(33.3% - .75em);
  text-align: center;
  font-size: 1em;
  padding: .75em 0;
  line-height: 1.25em;
  background: var(--secondary);
}

form#search .navigate li span{
  padding-left: .5em;
  color: var(--secondary);
  font-size: .9em;
}

form#search .navigate .developers li{
  width: calc(50% - .75em);
}

form#search .results li.selected{
  border: 2px solid var(--txt1);
}

form#search .suggest button{
  padding: .1em .75em;
  margin: 0;
  background: #eee;
  min-height: 1em;
}

form#search div.suggest{
  padding: .5em 0 0;
  display: none;
}

form#search div.suggest.visible{
  display: block;
}

form#search .results{
  min-height: 1em;
  width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

form#search input[type="submit"]{
  display: none;
}

#login input[type="text"],
#login input[type="password"],
#login div{
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1.25em;
  font-size: 16px;
}

#login div{
  text-align: center;
}

#addResource input:disabled,
#editResource input:disabled {
  opacity: .25;
  cursor: default;
}

/* Spinner */
div.loading{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--bg3);
  z-index: 5000;
}
div.loading img{
  opacity: 1;
  position: absolute;
  top: calc(50% - 6vh - 6vw);
  left: calc(50% - 6vh - 6vw);
  width: calc(12vh + 12vw);
  height: calc(12vh + 12vw);
  margin: 0;
}
div.loading img, div.photoLoading img.spinner {
  animation:spin 3s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



/* Dark mode */
@media (prefers-color-scheme: dark) {

    :root {
      --bg1: #202020;
      --bg3: rgba(70,70,70, .5);
      --txt1: #ccc;
      --primary: rgba(255, 221, 85, .65);
      --secondary: rgba(70,70,70, .25);
      --wash1: linear-gradient(rgba(90,90,90,.1), rgba(90,90,90,.1));
      --wash2: linear-gradient(rgba(70,70,70,.6), rgba(70,70,70,.6));
    }

    select{
      background-color: var(--bg1);
      color: var(--txt1);
    }

    body > div:not(.header) a:not(.button) {
        color: #3bd;
    }

    body .profileButton, body .searchButton,
    body .settingsButton, body .filterButton,
    body .addResourceButton{
      background: #606060;
      color: var(--txt1);
    }

    body ol#developers > li ul.topics li.boxed{
      box-shadow: 0 0 0 2px #ccc;
    }
}

@media only screen and (max-width: 499px) {

div.options{
  padding-right: 5em;
  font-size: 1.125em;
}

  span.topics{
      font-size: 1.2em;
  }

  span.topics div h2{
    margin: .5em;
    font-size: 1.2em;
  }

  div.topics .topics div ul li{
    height: 3em;
    line-height: 2.9em;
    padding: 0 1em;
  }

  li.longName br.longName{
    display: none;
  }

  div.topics .topics div ul li.longName .handle{
    margin-top: -.25em;
  }

  div.topics div ul .handle{
    display: none;
  }

  ul.info ul.resources.default{
    min-height: 12.75em;
    padding-top: .5em;
  }

  ul.info .title a:nth-child(n+4){
    display: none;
  }

  ul.info .title button{
      font-size: 1.8em;
  }

  ul.info button.fav, ul.info button{
      font-size: .95em;
  }

  ul.info .description{
      font-size: 1em;
      line-height: 3.25em;
    }


    ul.info ul.resources, ul.info .resourceNav{
       font-size: 1.2em;
       margin-bottom: 0;
    }

    ul.info ul.resources.default li{
       width: 100%;
       max-width: 100%;
       min-width: 100%;
       clear: both;
    }

    div.topics div ul li span.badge{
      font-size: .75em;
    }


    div.profile a#update, .logo img{
        font-size: 3.5em;
    }

    .filterButton {
        font-size: 1.375em;
    }

    span.addResourceButton{
        font-size: 1.7em;
        margin-right: -.75em;
    }

    .profileButton{
        border-radius: 2em;
        font-size: 1.35em;
    }

    .profileButton.open{
        margin-left: calc(100vw - 13em);
        margin-block-start: -16.5em;
    }

    .settingsButton{
        height: 4em;
        width: 4em;
        line-height: 3.5em;
    }

    .filterButton > .filterCount{
        font-size: 1.1em;
    }

    form#editResource label.description div.display {
      max-height: 20em;
    }
    form#editResource label.description:not(.minimal) div.display {
      width: 100%;
      position: relative;
      line-height: 1.75em;
    }
    form#editResource label:not(.minimal) textarea {
      display: block;
      width: 100%;
      height: 10em;
      box-sizing: border-box;
      line-height: 1.5em;
      float: none;
      margin: .25em 0;
    }

    ol#resources > li{
      font-size: 1.1em;
      padding-bottom: 0;
    }

    ol#resources > li.date{
      max-width: 5em;
    }

    ol#resources > li a{
      white-space: nowrap;
      word-break: break-word;
      line-height: 1.4em;
    }

    ol#developers > li{
      width: calc(100% - 2em);
      margin: 3em 1em 0 ;
    }

    ol#developers div.front{
      font-size: 1.25em;
    }

    ol#developers ul.topics li{
      font-size: 1.1em;
    }


    div.modalContainer > *:not(#batchPublish){
        width: 90vw;
    }

    .modalNavigation{
        width: 90vw;
    }

    form#editResource label input.topicSearch{
      margin-right: 2.5em;
      width: calc(100% - 9em);
    }

    form#editResource label .topics {
      width: 100%;
      margin: 0;
    }

    form#editResource label .topics div{
      line-height: 2em;
      margin-bottom: .5em;
    }

    form#editResource label .topics label{
      background-size: 2em;
      width: 2em;
      height: 2em;
    }
    form#editResource label .topics span{
      padding: 0 0 .75em .25em;
      max-width: calc(100% - 4.75em);
      line-height: 2em;
  }

    body.filtersOpen div.options,
    body.filtersOpen div.filtersOpen{
        margin-left: 0;
    }

    body.filtersOpen form#topicsFilter,
    body.filtersOpen form#filterForm,
    body.filtersOpen form#developersFilter{
        width: 100%;
        font-size: 1.5em;
        z-index: 1000;
    }
    body.filtersOpen form#topicsFilter,
    body.filtersOpen form#filterForm,
    body.filtersOpen form#developersFilter{
        padding-top: 1em;
    }

    body.filtersOpen div.navigation{
        width: 100%;
        margin-left: 0;
    }

    form#filterForm div:not(.personal) label,
    form#topicsFilter div label,
    form#developersFilter div label{
        padding: .5em;
    }

    div.topicsInfo,
    div.resourcesInfo,
    div.developersInfo{
        font-size: 1.25em;
        padding: 0 3.75em;
        text-align: center;
    }

    ol#resources ul{
      width: calc(100% - 3em);
    }

    ol#resources ul.topics{
      text-align: left;
      margin: 1em 0 0 3em;
    }
}

@media only screen and (min-width: 800px) {
  :root{
    --headerHeight: 60px;
  }

  div.top{
    top: .25em
  }

  div.top,div.bottom{
    font-size: 13px;
  }


    body > div.header{
      background-image: url('../img/logo.svg');
      background-size: calc(var(--headerHeight) - 1.5em);
      background-position: .75em 1em;
      background-repeat: no-repeat;
    }

  body div.navigation{
    box-sizing: border-box;
    height: calc(var(--headerHeight) * .8);
    margin-top: calc(var(--headerHeight) * .2);
  }

  body div.navigation a{
    flex: 0  1 var(--columnWidth);
    font-size: 13px;
    line-height: calc(var(--headerHeight) * .8);
    border-radius: .75em .75em 0 0;
  }

  body div.navigation a.selected{
    flex: 0 1 calc(var(--columnWidth) * 3);
  }

  body:not(.filtersOpen) div.navigation a.topics,
  body div.navigation a.developers{
    flex: 0  1 calc(var(--columnWidth) - 4.5em);
  }

  body:not(.filtersOpen) div.navigation a.topics.selected,
  body div.navigation a.developers.selected{
    flex: 0  1 calc(var(--columnWidth) * 3 - 4.5em);
  }

  body div.navigation a.developers{
    margin-left: 4.5em;
  }

  .profileButton.open{
    left: .5em;
  }

  form#editResource label:not(.minimal) div.display{
    margin: 0;
    width: 49%;
    box-sizing: border-box;
  }

  form#editResource label.description:not(.minimal) div.display{
    margin: 0;
    width: 49%;
    box-sizing: border-box;
  }

  form#editResource label:not(.minimal) textarea{
    width: 49%;
    margin: 0 0 2em 0;
  }

  body:not(.developers) > div.developers,
  body:not(.topics) > div.topics,
  body:not(.resources) div.resources{
    position: fixed;
    top: var(--headerHeight);
    bottom: 0;
    overflow-y: scroll;
    width: var(--columnWidth);
    display: block;
    background: var(--bg2);
  }

  body.resources > div.topics,
  body.developers div.resources{
    box-shadow: var(--shadow3);
  }

  body.resources > div.developers,
  body.topics > div.resources{
    box-shadow: var(--shadow4);
  }

  body:not(.resources):not(.filtersOpen) div.resources{
    width: calc(var(--columnWidth)*2);
    background: var(--bg2);
  }

  body.resources > div.resources, body.resources > div.options,
  body.developers > div.developers, body.developers > div.options,
  body.topics > div.topics, body.topics > div.options {
    width: calc(var(--columnWidth) * 3);
  }

  body.filtersOpen.resources > div.resources, body.filtersOpen.resources > div.options,
  body.filtersOpen.developers > div.developers, body.developers > div.options,
  body.filtersOpen.topics > div.topics, body.filtersOpen.topics > div.options {
    width: calc(var(--columnWidth) * 2.5);
  }

  body.resources > div.resources,
  body.resources > div.options {
    margin-left: var(--columnWidth);
    width: calc(var(--columnWidth) * 4);
  }

  body.topics > div.topics,
  body.topics > div.options {
    margin-left: calc(var(--columnWidth) * 3);
  }

  body.filtersOpen.topics > div.topics,
  body.filtersOpen.topics > div.options {
    margin-left: calc(var(--columnWidth) * 2);
  }

  body.topics > div.resources{
    left: var(--columnWidth);
  }

  body.developers > div.resources{
    left: calc(var(--columnWidth) *3);
  }

  body.filtersOpen.developers > div.resources{
    left: calc(var(--columnWidth) * 2.5);
  }

  body:not(.topics) > div.topics{
    left: calc(var(--columnWidth) * 5);
  }

  body.filtersOpen:not(.topics) > div.topics{
    left: calc(var(--columnWidth) * 3.5);
  }

  body.filtersOpen form#topicsFilter,
  body.filtersOpen form#filterForm,
  body.filtersOpen form#resourcesFilter,
  body.filtersOpen form#developersFilter{
    width: calc(var(--columnWidth)  *  1.5);
    top: 0;
    height: 100%;
  }

  body.filtersOpen div.top {
    top: 0;
  }

  body:not(.filtersOpen) div.navigation a.resources{
    flex: 0  1 calc(var(--columnWidth)*2);
  }

  body.filtersOpen div.navigation a.selected{
    flex: 0 1 calc(var(--columnWidth) * 2.5);
  }


  body.filtersOpen div.navigation a.developers.selected{
    flex: 0 1 calc(var(--columnWidth) * 2.5 - 4.5em);
  }

  body:not(.filtersOpen) div.navigation a.resources.selected{
    flex-basis: calc(var(--columnWidth) * 4);
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  body:not(.developers) > div.developers::-webkit-scrollbar,
  body:not(.topics) > div.topics::-webkit-scrollbar,
  body:not(.resources) div.resources::-webkit-scrollbar {
    display: none;
  }

  body:not(.resources) .resourcesInfo,
  body:not(.developers) .developersInfo,
  body:not(.topics) .topicsInfo{
    display: none;
  }

  body:not(.developers) ol#developers > li ul,
  body:not(.resources) ol#resources > li ul{
    display: none;
  }

  body:not(.developers) ol#developers > li{
    width: calc(100% - 2em);
    margin: 0 1em 1.5em;
    font-size: 12px;
  }

  body:not(.developers) ol#developers > li .photo{
    float: none;
    width: 2.75em;
    height: 2.75em;
  }

  body:not(.developers) ol#developers > li .header{
    width: calc(100% - 3.5em);
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0;
  }

  body:not(.topics) div.topics .topics > div{
    margin-bottom: .75em;
  }

  body:not(.topics) div.topics .topics > div h2{
    margin: 0 .25em .75em;
  }

  body:not(.resources) ol#resources > li {
    margin: 0 auto 2em;
  }

  body:not(.resources) ol#resources a:not(.more){
    padding: 1em .75em;
    background: var(--bg1);
    min-height: 3em;
    margin: .5em 0;
  }

  body:not(.resources) ol#resources img.shared,
  body:not(.resources) ol#resources img.saved{
    top: 2.25em;
    display: none;
  }

  body:not(.resources) ol#resources img.saved{
    top: 4.75em
  }

  body:not(.resources) ol#resources span.more{
    top: 0em;
  }

  body:not(.resources) ol#resources > li .date{
    top:  .5em;
    left: unset;
    right: 1em;
    left: 4em;
  }

  body:not(.topics) span.topics div ul li {
    text-align: left;
    margin: 0 .25em;
    line-height: 1em;
    font-size: .95em;
  }

  body:not(.topics) span.topics div ul li img{
    display: none;
  }

  .profileButton button, .profileButton a.button{
    line-height: 3em;
    width: 12em;
  }
}

@media only screen and (min-width: 1000px) {

  body div.navigation a{
    font-size: 15px;
  }

  div.topics span.topics,
  form#developersFilter,
  form#filterForm,
  form#editResource,
  ol#resources,
  div.options,
  div.resourcesInfo,
  div.developersInfo,
  div.topicsInfo{
      font-size: 13px;
  }

  body:not(.resources) ol#resources a:not(.more){
    margin: .5em 0 0 3em
  }

  body:not(.resources) ol#resources img.saved,
  body:not(.resources) ol#resources img.shared{
    display: block;
  }

  body.resources ol#resources ul.developers li{
    margin: 0 .75em .75em 0;
    height: 2.75em;
    width: 2.75em;
  }

  body.resources ol#resources ul.excerpts li{
    font-size: 1.1em;
  }

  form#editResource label:not(.minimal) .topics{
    column-count: 3;
  }
}

@media only screen and (min-width: 1280px) {

  body:not(.filtersOpen).resources > div.resources,
  body:not(.filtersOpen).resources > div.options{
    padding-left: calc(6vw - 70px);
    padding-right: calc(6vw - 70px);
    box-sizing: border-box;
  }

  body:not(.filtersOpen) ol#resources ul.excerpts li{
    width: calc(50% - 0.5em);
    display: inline-block;
  }

  body:not(.filtersOpen) ol#resources ul.developers{

  }

  body:not(.filtersOpen) ol#resources ul.topics{
    width: calc(50% - 2em);
    font-size: .85em;
  }

  body:not(.developers) ol#developers > li{
    width: calc(100% - 2.5em);
    margin: 0 1em 1em 1.5em;
    border-radius: 500px;
  }

  body:not(.developers) ol#developers > li .photo{
    width: 4em;
    height: 4em;
  }

  body:not(.developers) ol#developers > li .header{
    width: calc(100% - 5em);
    padding-top: .5em;
  }

  body:not(.topics) span.topics div ul li{
    padding: .5em .75em .375em 1em;
  }

  body:not(.topics):not(.filtersOpen) span.topics div ul li img{
    display: inline-block;
  }
  
  #editResource div.preview{
    margin-bottom: 2em;
    opacity: .85;
  }
  
  #editResource div.preview img{
    max-width: 16em;
    max-height: 8em;
  }

  #editResource div.preview span{
    line-height: 2em;
    -webkit-line-clamp: 4;
    overflow: hidden;
    padding-left: 1.5em;
    font-size: 1.1em;
  }
}