publication.css

:root {
    --dark-color: rgb(55, 50, 46);
    --mid-color: rgb(86, 82, 79);
    --light-color: rgba(255,255,255);
    --focus-color: rgb(0,150,0);
  }

  body {
   background: linear-gradient(180deg, rgba(240,241,241,0) 0%, rgba(230,230,230,1) 100%);
    background-color: var(--primary-color);
    background-size:cover;
    font-family: Quicksand, Calibri, Arial, Helvetica, sans-serif;
    margin: auto;
    height: max-content;
    line-height: 1.3;
}
body > * {
    padding-left:  10vw;
    padding-right: 10vw;
}

#homeArrow {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--mid-color);
    transform: rotate(-90deg) scale(2);
    padding: 0!important;
}

.dark, .mid, .light {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
body div * {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
a {
    text-decoration: none;
    color: var(--light-color);
}

h1 {
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
}
h1 strong {
    font-weight: 600;
}

h2 {
    font-weight: 600;
    text-align: center;
}
h3 {
    font-weight: 500;
    text-align: center;
    font-size: 1.5rem;
}

.paperbutton {
    background-color: var(--dark-color);
    color: white;
    padding: 1rem;
    border-radius: 2rem;
    margin: auto auto 3rem auto;
display: block;
width: max-content;

align-items: center;
display: inline-flex;
justify-content: center;
transition: 0.1s all;
}
    .paperbutton_light {
        background-color: var(--light-color);
        color: var(--dark-color);
    }
    .paperbutton_light img {
        fill: var(--dark-color);
    }
    .paperbutton:hover {
        scale: 1.05;
    }

.pdfsvg {
    width: 1rem;
    fill: white;
    margin-inline-end: 0.5rem;
}

.abstract {
  margin-bottom: 3rem;
  font-size: 1.4rem;
}

p {
    font-size: 1.2rem;
}

ul,ol {
    text-align: left;
    font-size: 1.2rem;
}

ol li {
    margin-bottom: 1rem;
    margin-left: 3rem;
}

.mid {
    background-color: var(--mid-color);
    color: var(--light-color);
}
.dark {
    background-color: var(--dark-color);
    color: var(--light-color);
}

.skew1 {
    transform: skewY(-1.3deg);
    margin-bottom: -1rem;
}
.skew-1 {
    transform: skewY(1.3deg);
    padding: 0;
}

@media screen and (max-width: 500px) {
    body > * {
        padding-left: 4vw;
        padding-right: 4vw;
      }
    p {
        text-align: left;
    }
    h1 {
        font-size: 2rem;
    }
    .paperbutton {
        margin-bottom: 1rem;
    }
    img {
        max-width: 92vw!important;
    }
}