body {
    margin: 0;
    padding: 0;
}

.contenedor {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: rgb(159, 215, 223);

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


    overflow: hidden;
}

.contenedor>button {
    position: absolute;
    top: 0;
    left: 0;
}

.botones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100vw;
    height: auto;
    max-width: 800px;

    filter: opacity(0%);
}

.color {
    filter: opacity(100%);
}


.start {
    position: absolute;
    top: 5%;
    left: calc(50%-300px);
    width: 50vw;
    max-width: 300px;

    /* background-color: red; */
    cursor: pointer;

    display: flex;
    flex-direction: row;

    transition: .2s;

    z-index: 10;
}
.start:active{
    max-width: 295px;
}
.start:hover{
    max-width: 315px;
}
.start > img{
    width: 100%;
    height: auto;
}
.consola{
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;
}

.consola>img {
    width: 100vw;
    height: auto;
    max-width: 800px;
}

canvas {
    border: 2px solid #314108;
    padding: 1px;
    position: absolute;


    width: 41vw;
    height: auto;
    max-width: 330px;
}
.github{
    position: absolute;
    bottom: 2%;
    right: 2%;

    width: 50px;
    height: 50px;

    cursor: pointer;

    z-index: 10;

    /* background-color: red; */
}
.github > a > img{
    width: 100%;
    height: auto;
}
#fondoColor{
    position: absolute;
    width: 100vw;
    height: 100vh;
    filter: opacity(0);

    background-color: rgb(10, 90, 102);
    transition: filter 2s;
    z-index: 1;

}
#puntos{
    position: absolute;
    width: 100px;
    height: 100px;
    left: calc(50% -100px);

    z-index: 3;

    transition: 1s ease-in-out;

    background:url(../Imagenes/manzana.png);
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;

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

    color: #fff;
    font-size: 30px;

}
.posicionArriba{
    top: -50%;
}
.posicionAbajo{
    top: 5%;
}