/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
 @import url('https://fonts.googleapis.com/css2?family=Gill+Sans+Ultra+Bold&display=swap');
 
body {
  background-color: black;
  background: url("images/bluskullbk.jpg");
  color: black;
  font-family: 'Gill Sans Ultra Bold', sans-serif;
  font-size:var(--step-0)
}

main {
  margin-inline:auto;
  max-width:90ch;
  overflow:hidden;
  padding:var(--space-s) var(--space-m)
}
main:not(.guestbook) {
  background:#fff
}
/*main img {
  margin-inline:auto
}*/
.flow>*+* {
  margin-top:var(--space-xs-s)
}
aside {
  font-size:var(--step-0)
}
aside .nav-list {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  justify-content:center
}
aside a {
  color:white;
  font-weight:700;
  padding:var(--space-2xs)
}

*,
:after,
:before {
  box-sizing:border-box
}
blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
p {
  margin:0
}
ol[role=list],
ul[role=list] {
  list-style:none
}
ul[class] {
  margin:0;
  padding:0
}
html:focus-within {
  scroll-behavior:smooth
}
body {
  text-rendering:optimizeSpeed;
  line-height:1.5;
  min-height:100vh
}
a:not([class]) {
  text-decoration-skip-ink:auto
}
img,
picture {
  display:block;
  max-width:100%
}
button,
input,
select,
textarea {
  font:inherit
}
@media (prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior:auto
  }
  *,
  :after,
  :before {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
}
:root {
  --step--2:clamp(0.91rem,calc(0.89rem + 0.1vw),0.96rem);
  --step--1:clamp(1.09rem,calc(1.05rem + 0.21vw),1.2rem);
  --step-0:clamp(1.31rem,calc(1.24rem + 0.37vw),1.5rem);
  --step-1:clamp(1.58rem,calc(1.46rem + 0.59vw),1.88rem);
  --step-2:clamp(1.89rem,calc(1.71rem + 0.89vw),2.34rem);
  --step-3:clamp(2.27rem,calc(2.01rem + 1.29vw),2.93rem);
  --step-4:clamp(2.72rem,calc(2.36rem + 1.83vw),3.66rem);
  --step-5:clamp(3.27rem,calc(2.75rem + 2.56vw),4.58rem);
  --space-3xs:clamp(0.31rem,calc(0.29rem + 0.12vw),0.38rem);
  --space-2xs:clamp(0.69rem,calc(0.66rem + 0.12vw),0.75rem);
  --space-xs:clamp(1rem,calc(0.95rem + 0.24vw),1.13rem);
  --space-s:clamp(1.31rem,calc(1.24rem + 0.37vw),1.5rem);
  --space-m:clamp(2rem,calc(1.9rem + 0.49vw),2.25rem);
  --space-l:clamp(2.63rem,calc(2.48rem + 0.73vw),3rem);
  --space-xl:clamp(3.94rem,calc(3.72rem + 1.1vw),4.5rem);
  --space-2xl:clamp(5.25rem,calc(4.96rem + 1.46vw),6rem);
  --space-3xl:clamp(7.88rem,calc(7.44rem + 2.2vw),9rem);
  --space-3xs-2xs:clamp(0.31rem,calc(0.14rem + 0.85vw),0.75rem);
  --space-2xs-xs:clamp(0.69rem,calc(0.52rem + 0.85vw),1.13rem);
  --space-xs-s:clamp(1rem,calc(0.8rem + 0.98vw),1.5rem);
  --space-s-m:clamp(1.31rem,calc(0.95rem + 1.83vw),2.25rem);
  --space-m-l:clamp(2rem,calc(1.61rem + 1.95vw),3rem);
  --space-l-xl:clamp(2.63rem,calc(1.89rem + 3.66vw),4.5rem);
  --space-xl-2xl:clamp(3.94rem,calc(3.13rem + 4.02vw),6rem);
  --space-2xl-3xl:clamp(5.25rem,calc(3.79rem + 7.32vw),9rem);
  --space-s-l:clamp(1.31rem,calc(0.65rem + 3.29vw),3rem)
}
.rainbow {
  background:linear-gradient(90deg,#9c00ff,red,#f80,#ff0,#02be02,#00f,#4f00ff,#9c00ff);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  transform:scaleY(1.25)
}
.rainbow,
.rainbow-wrapper {
  display:inline-block;
  position:relative
}
.rainbow-wrapper {
  font-family:Arial,sans-serif;
  font-weight:700;
  line-height:1.25
}
.rainbow-wrapper:before {
  color:#000;
  content:attr(data-content);
  opacity:.2;
  position:absolute;
  transform:skew(60deg) scaleY(.5);
  transform-origin:bottom left
}
.wordart {
  background:linear-gradient(#6726bf,#a62cc0 90%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  display:inline-block;
  font-family:Impact;
  transform:skewY(-8deg)
}
.wordart-wrap {
  filter:drop-shadow(5px 5px 0 rgba(130,140,251,.8))
}
.page-wrapper {
  min-height:100vh;
  padding:var(--space-xs)
}
.page-wrapper>*+* {
  margin-top:var(--space-s-m)
}

header {
  font-size:var(--step-2);
  padding-block-start:var(--space-s-m);
  text-align:center
}
a {
  color:navy;
  font-weight:700
}
a:hover {
  color:#f0f
}
aside {
  font-size:var(--step-0)
}
aside .nav-list {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  justify-content:center
}
aside a {
  color:white;
  font-weight:700;
  padding:var(--space-2xs)
}
main {
  margin-inline:auto;
  max-width:80ch;
  overflow:hidden;
  padding:var(--space-s) var(--space-m)
}
main:not(.guestbook) {
  background:#fff
}
/*main img {
  margin-inline:auto
}*/
.flow>*+* {
  margin-top:var(--space-xs-s)
}
.webring-container {
  background-color:#f0f8ff;
  margin-inline:auto;
  max-width:fit-content;
  padding:1rem;
  text-align:center
}
picture {
  display:block
}
/*picture img {
  margin-inline:auto
}*/
audio {
  position:absolute;
  right:0;
  top:0
}
.webmentions {
  list-style-type:none;
  margin:0;
  padding:0
}
.webmentions>*+* {
  margin-block-start:var(--space-s)
}
.webmentions .webmention {
  background:#fff;
  padding:var(--space-s)
}
.webmentions .webmention-meta {
  align-items:center;
  display:flex
}
.webmentions .webmention-meta *+* {
  margin-inline-start:var(--space-xs)
}
.webmentions .webmention-author {
  align-items:center;
  display:flex
}
.webmentions .webmention-pubdate {
  font-style:italic
}
.webmentions .webmention .p-name {
  font-weight:700
}
.center,
.thanksText {
  text-align:center
}
.thanksText {
  font-size:var(--step-2)
}
.retro-frame {
  border-color:#b3b3b3 #6b6b6b #6b6b6b #b3b3b3;
  border-style:solid;
  border-width:8px;
  margin-inline:auto
}
.guestbook .hidden {
  display:none
}
.guestbook>div:not(.mentions-list-wrapper) {
  background:#fff;
  padding:var(--space-xs)
}
.guestbook .likes {
  align-items:center;
  display:flex;
  gap:var(--space-xs)
}
.guestbook #mentions-likes-avatars {
  display:flex
}
.guestbook #mentions-likes-avatars>*+* {
  margin-inline-start:-1rem
}
.guestbook .u-photo {
  border-radius:50%;
  height:var(--space-m);
  min-width:var(--space-m);
  width:var(--space-m)
}
.counter {
  border:1px solid #ddd;
  color:#fff;
  display:inline-flex;
  font-family:monospace;
  margin-inline:auto
}
.counter>*+* {
  border-inline-start:1px solid #ddd
}
.counter .digit {
  background:linear-gradient(180deg,#000,#aaa,#000);
  display:inline-block;
  padding-inline:2px
}
.counter-container {
  display:flex;
  flex-direction:column;
  text-align:center
}
.counter-container>*+* {
  margin-block-start:var(--space-xs)
}
.counter-container .attribution {
  font-size:var(--step--2)
}

.image-row {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .image-row img {
            margin: 10px;
            max-width: 100%;
            height: auto;
        }

        /* Media queries for different screen sizes */
        @media (max-width: 600px) {
            .image-row img {
                width: 40%; /* Adjust as needed for smaller screens */
            }
            .image-row img:nth-child(2),
            .image-row img:nth-child(3),
            .image-row img:nth-child(4),
            .image-row img:nth-child(5){
                display: none;
            }
        }
        
/*@font-face {
  font-family: "w95fa";
  src: url("fonts/w95fa.woff") format('woff');
}

@font-face {
  font-family: "w95fa";
  src: url("fonts/w95fa.woff") format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "w95fa";
  src: url("fonts/w95fa.woff") format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "w95fa";
  src: url("fonts/aw95fa.woff") format('woff');
  font-style: italic;
}*/

h2 {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        .section {
            max-width: 800px;
            margin: 0 auto;
        }
        .item {
            margin-bottom: 20px;
        }
        .degree, .role {
            font-weight: bold;
        }
        .school, .project {
            font-size: 1em;
            margin-bottom: 5px;
        }
        .date {
            font-style: italic;
            color: gray;
        }
        .backers {
            color: #555;
        }
        
        
 hr {
            width: 50%;
            border: 0;
            height: 1px;
            background-color: #ccc;
            margin: 40px auto;
        }