profile-site/styles/home.css

* {
   font-family: "Nunito", "Times New Roman", Times, serif;
}

body {
   overflow-x: hidden;
}

.content {
   transition: .2s;
}

.main-text {
   margin: auto;
   max-width: 750px;
   transition: .2s;
}

.main-text p {
   margin: .5rem 2rem;
}

.title {
   margin: 2rem 2rem 1rem 2rem;
}

.subtitle {
   font-style: italic;
   margin: 0 2rem;
}

h2 {
   position: relative;
   margin: 1rem .75rem .75rem 2.5rem;
   font-size: 1.5rem;
   transition: .2s;
}

h2::before {
   content: "";
   position: absolute;
   top: .3rem;
   left: -.6rem;
   height: 1rem;
   width: .25rem;
   border-radius: 5rem;
   background-color: var(--theme-color);
   transition: .2s;
}

h2:hover {
   margin: 1rem .75rem .75rem 3rem;
}

h2:hover::before {
   left: -1.1rem;
}

h3 {
   margin: .75rem 0 0 2rem;
}

button {
   padding: .2rem .5rem;
   font-size: 1.1rem;
   color: #fff;
   background-color: var(--theme-color);
   border: solid .2rem var(--theme-color);
   border-radius: .5rem;
   box-shadow: 0 .1rem .2rem #ddd;
   transition: .15s;
}

button:hover {
   color: var(--theme-color);
   background-color: transparent;
}

button:active {
   transform: scale(.98);
}

a {
   color: var(--theme-color);
}

.funsies {
   padding: .5rem 2rem;
}

.funsies p {
   margin: 0 .2rem .8rem .2rem;
}

.progress-parent {
   display: block;
   width: 100%;
   background-color: #ddd;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
}

.progress {
   height: .5rem;
   width: 0%;
   background-color: var(--theme-color);
   animation: progress 1s linear;
}

@keyframes progress {
   to { width: 100%; }
}

.progress {
   animation-play-state: paused;
   animation-delay: calc(var(--scroll) * -1s);
   animation-iteration-count: 1;
   animation-fill-mode: both;
}

@media only screen and (min-width: 1200px) {
   .main-text, .thoughtsblock {
      padding: 0 2rem 0 4rem;
      line-height: 1.7rem;
   }
}

@media only screen and (max-width: 700px) {
   .content {
      grid-template-columns: 100%;
      margin-right: 0;
      width: 100vw;
   }
}

@media (prefers-color-scheme: dark) {
   .thoughts-preview h2 {
      color: #eee;
   }
   .thoughts-preview * {
      color: #ddd;
   }

   .progress-parent {
      background-color: #444;
   }
   button {
      box-shadow: 0 .2rem .2rem #000;
   }
   @media only screen and (max-width: 700px) {
      .thoughts-preview {
         background-color: #77777720;
      }
   }
}

/* People */
.people {
   margin: 0 2rem;
}
.person {
   display: inline-block;
   border: solid .15rem;
   border-color: #ddd;
   background-color: #f9f9f9;
   width: 12rem;
   border-radius: .5rem;
   margin: .4rem .1rem;
   padding: .6rem .7rem .8rem .7rem;
   text-align: center;
}
.person h4 {
   margin-bottom: .3rem;
}
.person a {
   margin: .4rem .1rem;
   padding: .2rem .4rem;
   border: solid .2rem var(--theme-color);
   background-color: transparent;
   text-decoration: none;
   border-radius: .2rem;
   background-color: var(--theme-color);
   color: #fff;
   transition: .3s;
   /* text-shadow: 0 0 .05rem #000; */
}
.person a:hover {
   background-color: transparent;

   color: var(--theme-color);
   /* background-color: #aaa;
   color: #000; */
   /* text-shadow: 0 0 .05rem #000; */
}

/* Recent github actions */
.github-actions {
   font-size: 0.9em;
   line-height: 1.6;
   margin: 1rem 2rem;
}

.github-event-card {
   border: .15rem solid #ddd;
   border-radius: .5rem;
   padding: 5px 15px;
   margin-bottom: 15px;
   background-color: #f9f9f9;
   overflow: hidden;
}

.github-event-card .event-type {
   margin: 5px 0;
   font-size: 1.3em;
}

.github-event-card .event-details dt {
   font-weight: bold;
   color: #333;
   float: left;
   width: 120px;
   clear: left;
}

.github-event-card .event-details dd {
   margin-left: 130px;
   color: #555;
}

.github-event-card .event-comment-body {
   white-space: pre-wrap;
   word-break: break-word;
   font-size: 0.9em;
   padding: 5px;
   max-height: 100px;
   overflow-y: auto;
}

.github-event-card .event-time {
   font-size: 0.8em;
   color: #777;
   margin-left: 10px;
   text-align: right;
}

@media only screen and (max-width: 700px) {
   .github-event-card .event-details dt {
      width: 80px;
      text-align: right;
   }

   .github-event-card .event-details dd {
      margin-left: 90px;
   }

   .people {
      text-align: center;
   }
}

@media (prefers-color-scheme: dark) {
   .github-event-card {
      border-color: #444;
      background-color: #2a2a2a;
   }

   .github-event-card .event-details dt {
      color: #ccc;
   }

   .github-event-card .event-details dd {
      color: #bbb;
   }

   .github-event-card .event-time {
      color: #777;
   }

   .person {
      border-color: #444;
      background-color: #2a2a2a;
   }
}