:root {
      --background: white;
      --primary: #2e5984;
      --seconary: #1effc3;
      --card-size: 170px;
    }
    #calEvent { display:grid;
    grid-template-columns: 1fr 1fr;}
    .center {
      text-align: center;
    }
    .bold {
      font-weight: bold;
    }
    #today {
      background-color: yellow;
    }
    #calendar {
      font-size: 1.5rem;
    }
    #calendar table{
      width: 50%;
      margin: 0 auto;
    }
    #calendar table td {
      width: 50px;
      height: 50px;
    }
    #events {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      margin:auto;
    }
    .card {
      margin: 15px;
      width: calc(var(--card-size)*1.586);
      height: var(--card-size);
       border-radius: 0.75rem;
       box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0,0,0,0.3);
       background: #d4ddd5;
       display: grid;
       
       color: black;

       align-items: center;
       will-change: transform;
       transition: transform 0.25s cubic-bezier(0.4,0.0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0.0,0.2,1);
    }
    .card a{ color: black; text-decoration: none;}
    .card a:hover{ color:#fbbb2f; text-decoration: none;}
    .card:hover {
      transform: scale(1.1);
      box-shadow: 0 32px 80px 14px rgba(0,0,0,0.36),0 0 0 1px rgba(0,0,0,0.3);
    }
    .card-details {
      padding-top: 1rem;
      margin:auto;
      text-align: center;
      }
    .event {font-size: 1.25rem; font-weight:800;}
    .name{
      font-weight: 600; 
      color: var(--primary);
    }
    .card-event {
      margin: auto;
      margin-top: 2px;
      display: grid;
      grid-auto-flow: column;
    }
    .item {
      display:flex;
      flex-direction: column;
      margin: 0.5rem;
    }
    .item .value {font-size: 1rem;}
    .item .label{
      margin-top: 0.15rem;
      font-size: 0.75rem;
      color: var(--primary)
    }

    @media screen and (max-width: 600px){
      :root{
        --card-size: 50%;
      }
      #events{
        grid-template-columns: 1fr 1fr;
      }
      .card{
        height:auto;
        width: auto;
      }
      .card-details {
      padding: 1rem;
      }
    .event, .name, .card-event {
      font-size: .95rem;
      }
    
      #calEvent {
        display:block;
      }
      #calendar {
      font-size: .95rem;
    }
    #calendar table{
      
      margin: 0 auto;
    }
    #calendar table td {
      width: 10px;
      height: 10px;
    }
    }