body{
    font-weight: bold;
    font-size: 20px;
    color: white;
    background: linear-gradient(to right, black, rgb(84, 0, 0),black);
    overflow: hidden;
    animation: fadeIn 1.5s;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.header1{
    display: flex;
    justify-content: space-around;
    animation: scrollText 80s reverse linear infinite;
    animation-fill-mode: forwards;
    width: fit-content;
    overflow: hidden;
    
    white-space: nowrap;    
}
.header2{
    display: flex;
    justify-content: space-around;
    animation: scrollText 80s linear infinite;
    animation-fill-mode: forwards;
    width: fit-content;
    overflow: hidden;
    
    white-space: nowrap;    
}
.innerHeader{
    margin-right: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
}
@keyframes scrollText {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-50%);
    }
}
@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.container{        
    margin-bottom: 25px;
    height: fit-content;
    max-width: 100vw;
    overflow: hidden;    
    
    -webikit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    z-index: 4;
}
.container2{        
    margin-top: 15vw;
    transform: rotate(90deg);
    position: absolute;
    left: 80.5vw;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    
    height: fit-content;
    max-width: 37vw;
    overflow: hidden;    
    
    -webikit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    z-index: 3;
}
.container3{            
    height: fit-content;
    max-width: 98vw;
    overflow: hidden;    
    position: absolute;
    bottom: 0;
    
    -webikit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    z-index: 2;
}
.container4{        
    margin-top: 15vw;
    transform: rotate(270deg);
   position: absolute;
   right:80.5vw;
   padding: 0;
   margin-left: 0;
    margin-right: 0;
    
    height: fit-content;
    max-width: 37vw;
    overflow: hidden;    
    
    -webikit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20% 80%, transparent);
    z-index: 1;
}
.positive{
    color: green;
}
.negative{
    color: red;
}

  
h1,h2{
    color: green;
}
a.button {
    padding: 5px 15px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: green;
    text-decoration: none;
}
.indexContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15vh;
}
@media(max-width: 700px){  
  body{
    max-width: 99vw;
  }
  
  h1{
    font-size: 24px;    
    width: 0;  
    max-width: 75vw;    
    animation: 
      typing2 3.5s steps(30, end),
      blink-caret .7s step-end infinite;  
      
    animation-fill-mode: forwards;
  }
  h2{
    font-size: 19px;
  }  
  .container2, .container4{
    display: none;
  }  
}
@media(max-height: 500px){
  body{
    max-width: 99vw;
  }
  
  h1{
    font-size: 24px;    
    width: 0;  
    max-width: 43vw;    
    animation: 
      typing2 3.5s steps(30, end),
      blink-caret .7s step-end infinite;  
      
    animation-fill-mode: forwards;
  }
  h2{
    font-size: 19px;
  }  
  .container2, .container4{
    display: none;
  }
  .indexContainer{
    margin-top: -2vh;
  }
  #svg{
    height: 55px;
    width: 55px;
  }
}

@media(min-height: 1200px){
    .container2{
        min-width: 42vw;
        max-width: 42vw;
        margin-top: 530px;
        left: 78vw;
    }
    .container4{
        min-width: 42vw;
        max-width: 42vw;
        margin-top: 530px;
        right: 78vw;
    }
    .indexContainer{
        margin-top: 20vh;
    }
}
h1 {
  
  width: 0;  
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 4s steps(30, end),
    blink-caret .7s step-end infinite;  
    
  animation-fill-mode: forwards;
}

/* The typing effect */
@keyframes typing {
  50% { width: 0 }
  100% { width: 610px }
}
@keyframes typing2 {
  50% { width: 0 }
  100% { width: 200px }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: red }
}

#svgContainer{
    display: none;;
}  
  
#svg {
    display: block;
    height: 100px;
    width: 100px;
    position: relative;
    
    overflow: visible;
  }
  #svg circle {
      fill:rgba(0,0,0,0);
    stroke-width:31.8309886184;
    stroke-dasharray: 0,0,0,100;
    stroke-dashoffset: 25;
    -webkit-animation: pie1 4.5s infinite ease both;
    animation: pie1 4.5s infinite ease both;
  }
  #svg .pie1 {
    stroke:hsl(0, 0%, 100%);
  }
  #svg .pie2 {
    stroke:hsl(0, 70%, 50%);
    -webkit-animation-name: pie2;
    animation-name: pie2;
  }
  #svg .pie3 {
    stroke:hsl(111, 54%, 37%);
    -webkit-animation-name: pie3;
    animation-name: pie3;
  }
  #svg .pie4 {
    stroke:hsl(0, 0%, 0%);
    -webkit-animation-name: pie4;
    animation-name: pie4;
  }
  
  /* 1st pie is 40% */
  @-webkit-keyframes pie1 {
    50%,100% {stroke-dasharray: 40,60,0,0;}
  }
  @keyframes pie1 {
    50%,100% {stroke-dasharray: 40,60,0,0;}
  }
  /* 2nd pie is 30% */
  @-webkit-keyframes pie2 {
    50%,100% {stroke-dasharray: 0,40,30,30;}
  }
  @keyframes pie2 {
    50%,100% {stroke-dasharray: 0,40,30,30;}
  }
  /* 3rd pie is 30% */
  @-webkit-keyframes pie3 {
    50%,100% {stroke-dasharray: 0,70,20,10;}
  }
  @keyframes pie3 {
    50%,100% {stroke-dasharray: 0,70,20,10;}
  }
  /* 4th pie is 10% */
  @-webkit-keyframes pie4 {
    50%,100% {stroke-dasharray: 0,90,10,0;}
  }
  @keyframes pie4 {
    50%,100% {stroke-dasharray: 0,90,10,0;}
  }