@font-face {
    font-family: grotesque;
    src: url(assets/terminal-grotesque.ttf);
  }

body {
    margin: 0;
    padding: 0;
  color: aliceblue;
  font-family: grotesque;
  text-shadow: 1px 1px 2px black;
  }

canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      overflow-y: hidden;
      position: fixed;
      background-size: cover;
  }
/*
.content{
    text-align: left;    
    position: absolute;          
    bottom: 50%;   
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/

.checkmark {
  top: 0;
  left: 0;
  height: 3.9vw;
  width: 3.9vw;
  background-color: #eee;
}

.kolabTitle{
display:flex;
flex-direction: row;
align-content: stretch;
gap:2px;  
}


h1 {
    font-size: 5.9vw;
  }
  
h2 {
    font-size: 3.0vh;
  }


a{

  background-color: black;  
}
/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color:black;
  background-color: rgb(250, 116, 188);
}

.content{
      /* Cover viewport */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Remove default padding/border */
  margin: 0;
  padding: 0;
  /* Flexbox with centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /*width:5%;*/
  /*position: absolute;*/
  margin-left:50%;
}

.image-container a{
background-color: rgba(0, 0, 0, 0);  
}

.image-container img:hover{
  background-color: rgba(0, 0, 0, 0);
  background-color: rgb(250, 116, 188);  
  }

@keyframes dateAnimation {
  from {color:  rgb(250, 89, 175);}
  to {color:  rgb(255, 255, 255)}
}
#upcoming{
  color:  rgb(250, 89, 175);
  animation-name: dateAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;  
}