* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --background-color: white;
    --text-color: black;
}

.dark {
  --background-color: black;
  --text-color: white;
}


html {
    font-family: 'Helvetica';
    margin: 16px;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}


.headerandlinks div  {
    align-items: baseline;
    display:flex;
    padding: 10px 0 10px 0;
}

.headerandlinks:last-child {
    padding: 0 0 20px 0;
}

.headerandlinks div > a {
    padding: 0 0 0 10px;
}

#dark-mode-toggle { 
    transform: scale(2);
    margin: 0 10px 0 10px;
 }

.project-item {
    padding: 10px 0px 10px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.project-item  {
  display: block;
  position: relative;
}
.project-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--text-color);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}
.project-item:hover::after,
.project-item:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}

/* https://stackoverflow.com/a/62808509 */
.myname {
    font-size: clamp(3rem, 10vw, 5rem);
    margin: 0.5rem 0 0.5rem 0;
}



.secondhalf {
    border-left: thin solid black;
}
.secondhalf .title {
    padding: 10px 20px 10px 10px;
    border-bottom: thin solid black;
    position: sticky;
    color: var(--text-color);
    background-color: var(--background-color);
    top: 0;
    z-index:2;
}