@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100;0,200;0,400;0,700;1,100;1,200;1,400;1,700&display=swap');

html{
  scroll-behavior: smooth;
}

#root{
  position: fixed;
}

:root body {
  background: black;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Chivo Mono', monospace;
  font-weight: 100;
  font-size: 18px;
}
:root body #grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
  justify-content: center;
}
:root body #grid .grid-item {
  z-index: 10;
  min-width: 100%;
  min-height: 100%;
  background-color: white;
  cursor: pointer;
  position: relative;
}
:root body #grid .grid-item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  outline: 1px solid black;
  display: block;
}
:root body #grid .grid-item:hover {
  opacity: 0.8;
}

#wrapper {
  z-index:9999999;
  position:absolute;
  top:0;
  pointer-events: none; 
  width:405px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#wrapper > div {
  background-color: rgba(255,255,255,.85);
  padding:2em;
  margin:1em;
  box-shadow: rgba(0,0,0,0.25) 0px 20px 150px;
  border:5px solid #FFF;
  width: 100%;

}
.day{
}
.date{
  font-weight: 200;
  font-size: .5em;
}
.meet{
  border:1px solid #333;
  padding:.05em 1em;
  background-color: #FFF;
}
.emojipun{
  font-size: 8em;
  padding:0;
  margin:0;
  text-align: center;
}

h1{
  text-align: center;
}

p {
  line-height: 1.5em;;
}

a {
  pointer-events:auto;
  color:blue;
  text-decoration: underline;
  padding:.25em .2em;
}

a:hover{
  background-color:blue;
  color:white;
}


@media (max-width: 768px) {
  #wrapper {
    width:80vw;
    padding:5vw;
    margin:5vw;
  }
}