/*
    tutorialLocalStyle.css
*/

html, body
{
    height : 100% ;
    width : 100% ;
    top : 0 ;
    margin : 0 ;
    font-family : Roboto, Helvetica, Arial, sans-serif ;
    color : #3c4858 ;
    line-height : 1.618 ;
    font-size : 16px ;
}

header, footer
{
    margin : 0 ;
    padding : 0 ;
}

#bodyContainer
{
    width : 100% ;
    height : 100% ;
    padding-left : 5px ;
    padding-top : 5px ;
    padding-bottom : 5px ;
}

.wrapper
{
    top : 0 ;
    width : 100% ;
    height : 100% ;
    display : flex ;
    flex-direction : column ;
    overflow : hidden ;
}

.wrapper > header
{
    font-family : Roboto,Helvetica,Arial,sans-serif ;
    color : #777 ;

    flex : 1 1 auto ;
    padding : 4px ;
    background-color : rgb(12, 12, 12) ;
    box-shadow : 0px 0px 5px black ;
}

.wrapper > #bodyContainer
{
    flex : 1 1 auto ;
    overflow : hidden ;
    display : flex ;
    width : 97% ;
    margin-left : auto ;
    margin-right : 0 ;
}

.docCode
{
    font-family : SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace ;
    color : #2c3848 ;
	border-left : 3px solid #893531AA ;
	border-radius : 3px ;
    display : inline-block ;
	padding : 12px ;
    margin-left : 16px ;
    white-space : pre-wrap ;
    line-height : 1.1 ;
    background-color : #89353108 ;
    tab-size : 4 ;
    -moz-tab-size : 4 ;
}

.docCode::after
{
    content : " " ;
}

.cpp::before
{
	content : "Code : C++" ;
	display : block ;
	font-style : italic ;
	font-size : small ;
	border-bottom : 1px solid #893531AA ;
	margin-bottom : 12px ;
	color : #000000AA
}

.hlsl::before
{
	content : "Code : Hlsl" ;
	display : block ;
	font-style : italic ;
	font-size : small ;
	border-bottom : 1px solid #893531AA ;
	margin-bottom : 12px ;
	color : #000000AA
}

.lua::before
{
	content : "Code : Lua" ;
	display : block ;
	font-style : italic ;
	font-size : small ;
	border-bottom : 1px solid #893531AA ;
	margin-bottom : 12px ;
	color : #000000AA
}

.scriptResult
{
    font-family : SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace ;
    color : #2c3848 ;
    display : table ;
	border-left : 3px solid #358931AA ;
	border-radius : 3px ;
	padding : 12px ;
    margin-left : 16px ;
    line-height : 1.1 ;
    background-color : #89353108 ;
    tab-size : 4 ;
    -moz-tab-size : 4 ;
}

.scriptResult::before
{
    content : "Lua >" ;
}

.logResult
{
    font-family : SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace ;
    color : #2c3848 ;
    display : table ;
	border-left : 3px solid #2c8af5aa ;
	border-radius : 3px ;
	padding : 12px ;
    margin-left : 16px ;
    line-height : 1.1 ;
    background-color : #89353108 ;
    tab-size : 4 ;
    -moz-tab-size : 4 ;
}

.logResult::before
{
    content : "C++ >" ;
}

figure
{
	margin-bottom : 16px ;
	text-align : center ;
}

figure > img
{
	box-shadow : 3px 2px 3px grey ;
	transition : box-shadow 0.2s ease-out ;
}

figure > img:hover
{
	box-shadow : 3px 2px 3px black ;
}

@media (prefers-color-scheme : dark)
{
	body
	{
		background-color : #303030 ;
		color : #ccc ;
	}
	
	hr
	{
		border-top : 1px solid #585858 ;
	}
	
	figure > img
	{
		box-shadow : 3px 2px 3px #242424 ;
	}
	
	table > th
	{
		border-color : #646464 ;
	}

    th.componentCell
    {
        border-color : #646464 ;
    }
	
	.tutorialMenuContainer
	{
		background-color : #303030 ;
		box-shadow : 0px 0px 5px rgba(0, 0, 0, 0.15) ;
	}

	.tutorialMenuButtonCollapsible
	{
		background-color : #363636 ;
		color : #ccc ;
		font-weight : bold ;
		border-radius : 0px ;
		box-sizing : border-box ;
		margin-left : auto ;
	}

	.tutorialMenuButtonCollapsible:hover
	{
		background-color : #484848 ;
		color : #9a4644 !important ;
	}
	
	.tutorialMenuButtonCollapsible:focus
    {
        background-color : #363636 ;
        color : inherit ;
    }
	
	.tutorialMenuUl p
	{
		color : #aaaaaa ;
	}
	
	.tutorialMenuUl p:hover
	{
		color : #cccccc ;
	}
	
	.tutorialMenuButtonActive
	{
		box-shadow : 0px 4px 5px -5px rgba(0, 0, 0, 0.15) !important
	}
	
	a
	{
		color : #9a4644 ;
	}
	
	.docCode
	{
		background-color : #242424 ;
        color : #aaa ;

		border-radius : 0px ;
		border-left : 3px solid #484848 ;

		box-shadow : 0px 0px 5px rgba(0, 0, 0, 0.15) ;
	}
	
	.cpp::before
	{
		color : #aaaaaa ;
		border-bottom : 1px solid #404040 ;
	}
	
	.hlsl::before
	{
		color : #aaaaaa ;
		border-bottom : 1px solid #404040 ;
	}
	
	.glsl::before
	{
		color : #aaaaaa ;
		border-bottom : 1px solid #404040 ;
	}
	
	.lua::before
	{
		color : #aaaaaa ;
		border-bottom : 1px solid #404040 ;
	}

	.scriptResult
	{
		color : #8ca898 ;
		background-color : #242424 ;
		border-radius : 0px ;
		
		box-shadow : 0px 0px 5px rgba(0, 0, 0, 0.15) ;
	}

	.logResult
	{
		color : #8c98a8 ;
		background-color : #242424 ;
		border-radius : 0px ;
		
		box-shadow : 0px 0px 5px rgba(0, 0, 0, 0.15) ;
	}
}