.schedule-wrapper {
    width: 100%;
    max-width: 1600px;
    overflow-x: scroll;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
}

.grid-wrapper {
    height: 100%;
    min-height: 800px;
    min-width: 1000px;
    margin: .5rem auto;
    flex-grow: 2;
position: relative;
    box-sizing: border-box;
}

.outline {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 2fr repeat(25, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    background-color:rgba(0, 0, 0, 0.856);
    color: white;
    box-sizing: border-box;
}

.parent {
    display: grid;
    grid-template-columns: [time] 1fr [main] 1fr [panel-1] 1fr [panel-2] 1fr [tattoo] 1fr [dungeon] 1fr [bunni] 1fr [vtuber] 1fr;
    grid-template-rows: [t0930] 2fr [t1000] 1fr [t1030] 1fr [t1100] 1fr [t1130] 1fr [t1200] 1fr [t1230] 1fr [t1300] 1fr [t1330] 1fr [t1400] 1fr [t1430] 1fr [t1500] 1fr [t1530] 1fr [t1600] 1fr [t1630] 1fr [t1700] 1fr [t1730] 1fr [t1800] 1fr [t1830] 1fr [t1900] 1fr [t1930] 1fr [t2000] 1fr [t2030] 1fr [t2100] 1fr [t2130] 1fr [t2200] 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    box-sizing: border-box;
}

.parent {
    z-index: 2;
}

.outine {
    z-index: 0;
}

.event {
    display:flex;
    background-color: #710C04;
    justify-content: center;
    align-items: center;
    transition: 200ms;
    color: white;
    animation: fade-in forwards 1 ease-in 100ms;
}

.event:hover {
    background-color: black;
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2);
}

#openingceremony {
    grid-column: 2 / span 1;
    grid-row: 2 / span 2;
}

.wrapper {
    grid-column: 1 / span 7;
    grid-row: 1 / span 20;
    position: relative;
    z-index: 1;
}
.outline div {
    border-bottom: 1px solid rgba(66, 66, 66, 0.452);
    border-left: 1px dashed rgba(66, 66, 66, 0.452);
    height: 100%;
}

div.grid-label{
    background-color: white;
    color: black;
    text-align: center;
    vertical-align: center;
    text-transform: uppercase;
}

button.day {
    transition: 300ms;
    padding: 1rem;
    border: none;
    background-color: #710C04;
    color: white;
    width: 100%;
    margin-bottom: 1rem;
}

button.day:hover{
    cursor:pointer;
}

.schedule-card {
    display: flex;
    flex-direction: column;
    border: 1px solid grey;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
}

.schedule-card p {
    margin: 0;
    background-color: black;
    color: white;
    padding-left: 1rem;
    padding-top: .5rem;
}

p.date {
    color: white;
    background-color: #710C04;
    font-size: 2rem;
    padding: 1rem;

}

p.title {
    font-size: 2rem;
    font-weight: bold;

}


p.time, p.room {
    font-size: 1.5rem;
}

p.description {
    padding: 3rem 1rem;
}

#day-choice {
    z-index:3;
    padding: 0 2rem;
    margin-top: .5rem;
}

button.current {
    background-color: white;
    color:black;
    cursor: default;
    text-decoration: underline;
}

@keyframes fade-in {
    from{
        opacity: 0;
    } to {
        opacity: 1;
    }
    
}