body
{
    background-color: rgba(16, 16, 16, 1.0);
    box-shadow:
	0px 0px 600px black inset,
	0px 0px 600px black inset,
	0px 0px 600px black inset,
	0px 0px 600px black inset
    ;
}

.phases td
{
    width: 25%;
}

.panel h3
{
    text-shadow: 0px 1px 0px white;
}

.left_text a, .right_text a
{
    color: red;
}

.controler > .left_button
{
    background-image: url("/res/left.png");
    background-position: left;
    background-repeat: no-repeat;
}

.controler > .right_button
{
    background-image: url("/res/right.png");
    background-position: right;
    background-repeat: no-repeat;
}

.controler > .pause_button
{
    background-image: url("/res/pause.png");
    background-position: center center;
    background-repeat: no-repeat;
}

.controler > .play_button
{
    background-image: url("/res/play.png");
    background-position: center center;
    background-repeat: no-repeat;
}

.know_more
{
    text-align: center;
}

.know_more a
{
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: darkred;
    border-radius: 5px;
    color: white;
    box-shadow: none;
    /* transition: all 0.5s ease-in-out; */
}

.know_more a:hover
{
    background-color: rgba(64, 0, 0);
    color: white;
    box-shadow: 0px 0px 5px red;
    font-size: 1.1rem;
}

@media (orientation: landscape)
{
    #menu0:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu1:hover
    {
	border-bottom: 18px solid rgba(255, 0, 0, 0.3);
    }
    #menu2:hover
    {
	border-bottom: 21px solid rgba(255, 0, 0, 0.3);
    }
    #menu3:hover
    {
	border-bottom: 24px solid rgba(255, 0, 0, 0.3);
    }
    #menu4:hover
    {
	border-bottom: 27px solid rgba(255, 0, 0, 0.3);
    }
    #menu5:hover
    {
	border-bottom: 30px solid rgba(255, 0, 0, 0.3);
    }
    #menu6:hover
    {
	border-bottom: 33px solid rgba(255, 0, 0, 0.3);
    }
    #menu7:hover
    {
	border-bottom: 36px solid rgba(255, 0, 0, 0.3);
    }
}

@media (orientation: portrait)
{
    #logo a
    {
	font-size: 50px;
    }
    #menu0:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu1:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu2:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu3:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu4:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu5:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu6:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
    #menu7:hover
    {
	border-bottom: 15px solid rgba(255, 0, 0, 0.3);
    }
}