:root {
    --boxMargin: 40px;
    --boxPadding: 10px;
    --boxWidth: calc(50vw);
    --speed: 1s;
    --logoHeight: 8vh;
}

@media all and (max-width: 500px) {
    :root {
        --boxMargin: 10px;
        --boxPadding: 10px;
    }
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: #222222;
}

.logoBox
{
    background: #121212;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.logo img
{
    height: var(--logoHeight);
}

.container
{
    padding: 0;
    margin: 0;
    /* background-color: #424242; */
    background-image: url("../images/bg.jpg");
    /* background-size: contain; */
    background-size: 600px;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

@keyframes leftSlideIn {
    100% {left: 0px;}
    0% {left: calc(-1 * var(--boxWidth));}
}

@keyframes rightSlideIn {
    100% {right: 0px;}
    0% {right: calc(-1 * var(--boxWidth));}
}

.Start:hover
{
    background-color: rgba(100, 130, 200, 0.8);
    transition: background-color 1s;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

.Start
{
    margin: var(--boxMargin);
    padding: var(--boxPadding);

    display: block;
    position: relative;
    left: 0px;

    height: calc(100vh - (var(--boxMargin) * 2 + var(--boxPadding) * 2 + var(--logoHeight)));
    flex-grow: 1;

    background-color: rgba(200, 200, 255, 0.4);

    animation-fill-mode:forwards;
    animation: leftSlideIn var(--speed) forwards;
    animation-timing-function: ease-in-out;
    /* animation-delay: 0s; */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.End:hover
{
    background-color: rgba(200, 61, 61, 0.8);
    transition: background-color 1s;
}

.Hidden
{
    margin: var(--boxMargin);
    padding: var(--boxPadding);

    width: 20%;

    border-radius: 10px;
}

.End
{
    margin: var(--boxMargin);
    padding: var(--boxPadding);

    display: block;
    position: relative;
    right: 0px;

    height: calc(100vh - (var(--boxMargin) * 2 + var(--boxPadding) * 2 + var(--logoHeight)));
    flex-grow: 1;

    background-color: rgba(255, 175, 175, 0.4);

    animation: rightSlideIn var(--speed) forwards;
    animation-timing-function: ease-in-out;
    /* animation-delay: 50ms; */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;

    display: flex;
    justify-content: center;
}

.center-content
{
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: White;

    /* background-color: green; */
    width: 100%;
    height: 100%;
}

.content{
    display: flex;
    display: inline-block;
    background-color: #f0F;


}