body {
  height: 100vh;
  overflow: auto;
  margin: 10px;
  background-color: #fff2d2;
  cursor: url('images/cursor1.png'),auto;
}

html, body {
  height: auto; /* allow body height to grow */
  min-height: 100vh; /* at least viewport height */
  margin: 0;
  background: linear-gradient(0deg, #06409B, #07409B, #0D58AC, #1160B3, #387BCA, #4284D0, #6197D7,#9BB8E0, #B7CBE3, #d4dee5);
  background-attachment: fixed; /* optional: makes the gradient fixed during scroll */
  background-repeat: no-repeat;
  background-size: cover; /* or '100% 100%' if you want */
}

.canvas{position: absolute;
  z-index: 1;
}



@font-face {
   font-family: disc;
   src: url('disc/disc.TTF');
}

@font-face {
   font-family: discblack;
   src: url('disc/disc_black.TTF');
}

.title {
position: fixed;
left: 1vw;
top: 2vh;
font-size: 20px;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid blue; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation:
  typingtitle 1.5s steps(25, end),
  blink-carettitle .5s step-end infinite;
}


.disc {
  font-family: disc;
}

.discblack {
  font-family: discblack;
}

/* The typing effect */
@keyframes typingtitle {
  from { width: 0 }
  to { width: 20vw }
}

@keyframes blink-carettitle {
  from, to { border-color: transparent }
  50% { border-color: #ff5733 }
}



.menu{
  position: fixed;
  left: 1vw;
  top: 5vh;
  font-size: 20px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation:
    typingtitle 1.5s steps(25, end),
    blink-carettitle 2s step-end infinite;
  z-index: 2;
  text-decoration: none;
}


/*portfolio*/

ul {
  list-style: none;
  text-decoration: none;
}

a:visited { text-decoration: none; color:inherit; }
a:hover { text-decoration: none; color:inherit; }
a:focus { text-decoration: none; color:inherit; }
a:hover, a:active { text-decoration: none; color:inherit;  opacity: 0.5;}

.overlay {position: fixed;
right: 2vw;
bottom: 5vh;
z-index: 2;}

.collapsible {
background-image: linear-gradient(0deg, #06409B, #07409B, #0D58AC, #1160B3, #387BCA, #4284D0, #6197D7,#9BB8E0, #B7CBE3, #d4dee5);
  color: white;
  padding: 20px;
  width: 30%;
  border: none;
  text-align: right;
  outline: none;
  font-size: 15px;
  position: relative;
  z-index: 2;
  flex: 1 1 calc(33.333% - 1rem);

}

.collapsible:hover {cursor: url("images/cursor2.png"), auto; opacity: 0.5;}
.collapsible:active {transform: translateY(4px);
}
.collapsible:focus {background-image:url("images/tile.gif");
  color: white;}




.container {
  display: flex;
  right: -25vw;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 3rem 0 1rem;
  z-index: 2;
  width: 75%;
  position: relative;

}
.content {
  padding: 0 18px;
  background-color: #fff2d2;
  display: none;
  overflow: hidden;
    z-index: 2;
    font-size: 15px;
}

.didactic {
  font-style: italic;
    z-index: 2;
}

.row {
  position: inherit;
  display: flex;
  flex-direction: row;
}


/* about */
.cv-section {
  font-family: sans-serif;
  color: #111;
  margin: 60px 20px;      /* Reduced side margins */
  max-width: 700px;        /* Narrower for better centering */
}

.cv-section h2 {
  margin-top: 3rem;
  font-weight: normal;
}

.cv-item {
  display: flex;
  margin-bottom: 1.5em;
}

.cv-item .year {
  width: 70px;
  font-weight: bold;
  flex-shrink: 0;
}

.cv-item .entries {
  flex-grow: 1;
  line-height: 1.6;
}