:root
{
	--white: #fff;
	--black: #000;

	--ash: #eaeef6;
	--charcoal: #a0a0a0;
	--void: #141b22;

	--fair-pink: #FFEDEC;
	--apricot: #FBC8BE;
	--coffee: #754D42;
	--del-rio: #917072;

	--java: #1FCAC5;

	--titan-white: #e7e7e7;
	--cold-purple: #a69fd6;
	--indigo: #6558d3;
	--governor: #4133B7;
}
body
{
    background-color: var(--ash);
    font-family: "Montserrat";
    user-select: none;
    margin-top: 40vh;
}
@media only screen and (max-width: 450px)
{
    body
    {
        transform: scale(0.8);
    }
}
@media only screen and (max-width: 350px)
{
    body
    {
        transform: scale(0.7);   
    }
}
#main-wrapper
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    background-color: var(--white);
	box-shadow: 0px 5px 25px var(--charcoal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
}
#teachers-wrapper
{
    margin: 0px 35px 10px 35px !important;
    width: 95%;
}
#teachers-wrapper, input, button
{
    box-shadow: none; 
    transition: box-shadow 0.3s ease-in-out;   
}
#teachers-wrapper:hover, input:hover, button:hover
{
    box-shadow: 0px 0px 5px var(--charcoal); 
    transition: box-shadow 0.2s ease-in-out;   
}
#timestamps
{
    display: grid;
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 100px 100px 100px;
    margin-left: 2.5px !important;
}
.timestamp
{
    display: flex;
    padding: 5px;
    border: 1px solid var(--charcoal);
    border-radius: 5px;
    margin: 5px;
    width: 75px;
    height: 25px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
    background-color: white;
    animation: activeTimestampOff 0.5s;
}
.timestamp:hover
{
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}
.activeTimestamp
{
    animation: activeTimestampOn 0.5s;
    background-color: rgb(182, 255, 165);
}
@keyframes activeTimestampOn
{
    from
    {
        background-color: white;
    }
    to
    {
        background-color: rgb(182, 255, 165);
    }
}
@keyframes activeTimestampOff
{
    from
    {
        background-color: rgb(182, 255, 165);    
    }
    to
    {
        background-color: white;
    }
}
.reservedTimestamp
{
    cursor: default !important;
    pointer-events: none !important;
    background-color: rgb(255, 148, 148);
}
input
{
    padding: 5px;
    border: 1px solid var(--charcoal);
    border-radius: 5px;
    margin: 5px;
    width: 91%;
    height: 25px;    
    text-align: center;
}
button
{
    padding: 5px;
    border: 1px solid var(--charcoal);
    border-radius: 5px;
    margin: 5px;
    width: 94.5%;
    height: 35px;
    cursor: pointer;
    color: black;
}
h3
{
    margin-bottom: 35px;
}