/* nav */
 
#academic:hover {
    color: var(--navItem);
    border-bottom: 0.5859375rem solid var(--invisible);
    box-shadow: 0 0.234375rem 0 0 var(--activeState);
    transform: translateY(-0.05859375rem);
 }

/* body */

.container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   text-align: center;
   background: var(--hero) center/cover no-repeat;
   background-blend-mode: screen;
   width: 100%;
   height: fit-content;
   min-height: calc(100vh - 2.75rem);
   padding: 6rem 0;
}

h2 {
   color: var(--defaultState);
   font-size: 1.4375rem;
   padding: 0 0.2rem;
   margin-top: 0;
   margin-bottom: 4rem;
   border-right: solid 0.15rem rgba(43, 30, 89, 1);
   font-weight: var(--fw-bld);
   white-space: nowrap;
   overflow: hidden;
   animation: animated-text 1s steps(18, end),
              animated-cursor 900ms infinite;
}

@keyframes animated-text {
   from{width: 0;}
   to {width: 100%;}
}

@keyframes animated-cursor{
   from{border-right-color: var(--animated-cursor);}
   to{border-right-color: transparent;}
 }

.card-group {
    display: flex;
}

.card-group > * {
    width: 18.3125rem;
    height: 21.75rem;
    border-radius: 4px;
    background-color: var(--navbar);
    z-index: 1;
}

.card-group > * {
   color: var(--text);
   text-decoration: none;
}

.card-group > * + * {
    margin-left: 2rem;
}

.card-group img {
    margin: 1.5625rem;
    width: 15.1875rem;
    height: 15.1875rem;
    object-fit: cover;
}

.card-group h3 {
    font-size: var(--fsz-ctgry);
    font-weight: var(--fw-blk);
}

/*
.selected {
   display: inline-block;
   padding: 2rem;
   text-decoration: none;
   vertical-align: middle;
   font-family: var(--ff-secondary);
   font-size: var(--fsz-btn);
   color: var(--defaultState);
   background: url(/images/exported/selected.svg) center/77.5% 35% no-repeat;
}

.selected:hover {
   color: var(--hoverState);
   background: url(/images/exported/selected-hover.svg) center/88.75% 46.25% no-repeat;
}

.selected:active {
   color: var(--text);
   background: url(/images/exported/selected-active.svg) center/100% 57.5% no-repeat;
   mix-blend-mode: multiply;
}

.yes,
.yes:hover,
.yes:active {
   display: inline-block;
   padding: 2rem;
   text-decoration: none;
   vertical-align: middle;
   font-family: var(--ff-secondary);
   font-size: var(--fsz-btn);
   color: var(--defaultState);
   background: url(/images/exported/selected.svg) center/77.5% 35% no-repeat;
}
*/