.note {
  position: relative;
  top: 0px;
  margin: 0 auto;
  border-top:var(--filetto);
  border-bottom:var(--filetto);
}

#note{
  border-right:0px;
}



.note-title{
  font-family: stilson-display,Times New Roman,serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  line-height: 35px;
}
.note-header {
  padding-top: 3rem;
  margin-bottom: 3rem;
}

.no-indent{
  text-indent: 0px!important;
}

article header p{
  text-indent: 0px;
}

article p{
  text-indent: 30px;
  font-size: 18px;
  line-height: 28px;
}
article ul p{
  margin-bottom: 0rem;

}

article p a{
  border-bottom: 1px solid green;
}

article p a:hover{
  color: var(--accent);
  opacity: 1;
}

article h3{
  font-size: 18px;
  line-height: 28px;
  font-family: var(--font-family-serif);
  letter-spacing:0.1rem;
}

article .pagella p {
 text-indent: 0px;
}

.pagella{
  border-top:var(--filetto);
  padding-top: 25px;
}


/* //////////////////////////////////////////////////
// Small devices (landscape phones, 576px and up)
////////////////////////////////////////////////// */


@media (min-width: 576px) {
  .note{
    top:0px;
  }
}


/* //////////////////////////////////////////////////
// Medium devices (tablets, 768px and up)
////////////////////////////////////////////////// */

@media (min-width: 768px) {
  .note{
    top:0px;
  }

  .note-title{
    font-family: stilson-display,Times New Roman,serif;
    font-size: 40px;
    line-height: 45px;
  }

  article p{
    text-indent: 80px;
    font-size: 22px;
    line-height: 30px;
  }
}

blockquote {
  font-size: 18px;
  line-height: 28px;
  text-indent: 0px!important;
  border-left:2px solid #FFB800;
  padding-left:30px;
}



/* //////////////////////////////////////////////////
// Large devices (desktops, 992px and up)
////////////////////////////////////////////////// */

@media (min-width: 992px) {
  
  .main{
    margin-top:100px!important;
  }

  .note-title{
  font-size: 50px!important;
  line-height: 55px!important;
  }
}



/* //////////////////////////////////////////////////
// Extra large devices (large desktops, 1200px and up)
////////////////////////////////////////////////// */

@media (min-width: 1200px) {

  .main{
    padding-top:30px;
  }
  
  #note{
    border-right:var(--filetto);}

  .note{
    margin-top: 0px;
  }
  .note-title{
    font-size: 40px!important;
    line-height: 45px!important;
  }
  blockquote{
    font-size: 22px;
    line-height: 30px;
    padding-left:50px;
  }
  .author-portrait{
    border-radius:50px;
    width:40px;
    height:40px;
    background-color: var(--accent);
  }
}

.note-category{
  font-family: var(--font-family-sans-serif);
  color: var(--accent);
  font-size: 15px;
}

.note-footer {
  padding: 6rem 0;
}
.note-date {
  color: var(--color-text-grey);
}
.note-tags {
  display: flex;
  margin-bottom: 1.5rem;
  font-size:12px;
  font-family: var(--font-family-sans-serif);
  border-bottom:var(--filetto);
}
.note-tags li {
  margin-right: .5rem;
}
.note-tags a {
  padding: .5rem 1rem;
  display: block;
  background: var(--color-light);
}
.note-tags a:hover {
  background: var(--color-black);
  color: var(--accent);
}


.note-date{
  opacity:0.5;
}

.author-portrait{
  border-radius:50px;width:35px;height:35px;background-color: var(--accent);
}

.sticky {
  position: sticky;
  top: 87px;
}