.code
{
    background-color: #1e1e1e;
    color: #eeeeee;

    border: 2px solid #555;
    border-radius: 8px;

    padding: 20px;
    margin: 20px 0;

    max-height: 500px;
	max-width: 500px;
    overflow: auto;

    font-family: Consolas, monospace;
}

    .split
    {
        display: flex;
        align-items: flex-start;
		flex-direction: row;
        gap: 30px;
    }
	
	.code
	{
		flex:1;
	}
	
	.splitcontent
	{
		flex:1;
	}
}


.sphinx-area
{
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

#riddleBox
{
	max-width: 300px;
	padding: 15px;
	border: 1px solid black;
	background-color: white;
}

#answerArea
{
	margin-top: 10px;
}

#riddleAnswer
{
	padding: 8px;
}

#answerButton
{
	padding: 8px 12px;
}


#Door
{
    width: 300px;
    height: auto;
    cursor: pointer;
}



@media (max-width: 900px)
{
    .split
    {
        flex-direction: column;
    }

    .code,
    .splitcontent
    {
        width: 100%;
    }
}