* {
    box-sizing: border-box;
    
}

html, .root {
    font-size: 16px;
    line-height: 21px;
    line-height: 1.3125em;
    background-color: whitesmoke;
  }

body {
    margin: 0;
}

body {
    font-family: "Source Code Pro", monospace;
}

h1 {
    font-size: 3.375em;
    line-height: 1.16666667em;
    margin-top: 0.38888889em;
    margin-bottom: 0.77777778em;
}

h2 {
    font-size: 2.5625em;
    line-height: 1.02439024em;
    margin-top: 1.02439024em;
    margin-bottom: 0.51219512em;
}


h3, .h3 {
    font-size: 1.625em;
    line-height: 1.61538462em;
    margin-top: 0.80769231em;
    margin-bottom: 0em;
  }
  h4, .h4 {
    font-size: 1em;
    line-height: 1.3125em;
    margin-top: 1.3125em;
    margin-bottom: 0em;
  }
  h5, .h5 {
    font-size: 1em;
    line-height: 1.3125em;
    margin-top: 1.3125em;
    margin-bottom: 0em;
  }
  p, ul, ol, pre, table, blockquote {
    margin-top: 0em;
    margin-bottom: 1.3125em;
  }
  ul ul, ol ol, ul ol, ol ul {
    margin-top: 0em;
    margin-bottom: 0em;
  }

  p {
    font-size: 1.1rem;
  }

  p.intro {
    font-weight: bold;
  }
  
  img {
    margin-top: 0.80769231em;
    margin-bottom: 0.80769231em;
  }

.announcement {
    margin-top: 30vh;
    margin-left: 10vh;
    animation: fadeIn 50ms;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.overview-panel {
    margin: 0 auto;
    max-width: 1400px;
    min-width: 400px;
    /*animation: fadeIn 1s;*/
}

.overview {
    margin: 0 auto;
    max-width: 1000px;
    min-width: 400px;
}

.overview img, p {
    max-width: 100%;
}

.overview-project {
    padding-top: 3em;
    margin-bottom: 3em;
    justify-content: center;
}

.all {
    display: grid;
}

menu li, h1{
  display: inline-block;
}

menu li {
  padding: 42px;
  font-size: 1.45rem;
  font-weight: 900;
}

menu {
    margin: 0;
    background: #ededed;
}

menu li a:hover, a:visited:active {
  text-decoration-style: wavy;
  color: rgb(6, 0, 128);
}

menu li:before {
    font-weight: 900;
    padding: 10px;
  }




#lines {
    text-decoration-line: overline;
    text-decoration-style: wavy;
}


.gallery {
  display: inline-grid;
  max-width: 90%;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow: hidden;
}

.gallery img {
  justify-content: space-between;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.category-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  
}

.category-intro h1, h2 {
  margin-top: 1rem;

}

.category-intro h2 {
  font-size: 1.85rem;
}

.project-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 35px;
}

.project-grid img {
  margin: 0;
  overflow: hidden;
  max-width: 100%;
}

.project-grid h3 {
  margin-top: 0.2rem;
}

@media only screen and (max-width: 750px) {
  menu li {font-size: 1.5rem; line-height: 0.8rem; padding-top: 0.2rem; display: block;}
  
  .project-grid {display: block; padding: 20px;}
  .overview-project {padding: 20px;}
  .project-preview {margin-top: 5rem;}
  .category-intro {display: block; padding: 20px;}
  .category-intro h2 {margin-top: -1rem;}
  } 

.sidebysidelayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sidebysidelayout img {
  margin: 0;
  overflow: hidden;
  max-width: 100%;
}


.project-preview .blob, .blob,
.project-preview .blob::after,
.project-preview .blob::before{
  width: 100%;
  height: auto;
  border-radius: 25% 75% 22% 78%/62% 50% 50% 38%;
  transition: border-radius 500ms ease-in-out;
}
.project-preview .blob {
  position: relative;
  background-image: linear-gradient(-45deg, #3023ae 0%, #f09 100%);
  isolation: isolate;
}
.project-preview .blob::after,
.project-preview .blob::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: #ffffff09;
}
.project-preview .blob::before {
  top: 0%;
  left: -25%;
}
.project-preview .blob::after {
  top: 25%;
  left: -25%;
}
.project-preview .blob:hover,
.project-preview .blob:hover::before,
.project-preview .blob:hover::after {
  border-radius: 62% 38% 59% 41%/78% 69% 31% 22%;
}