* {
    padding: 0px;
    margin: 0px;
    font-family: "Cairo";
}

@media (min-width:360px){

    #cabecera{
        position: absolute;
        top: 10px;
        left: 10px;
        height:60px;
        width: 360px;
        background-color: rgb(228, 228, 228);
    }

    #img_corp{
        position: absolute;
        top: 1px;
        left: 1px;
        height: 60px;
        width: 70px;
    }

    #iniciol{
        position: absolute;
        top: 20px;
        left: 200px;
        color:  rgb(1, 3, 20);
        font-size: 90%;
        font-weight: 600;
    }

    #contactanos{
        position: absolute;
        top: 20px;
        left: 280px;
        color: rgb(1, 3, 20);
        font-size: 90%;
        font-weight: 600;
    }

    #productos{
        position: absolute;
        top: 72px;
        left: 10px;
        height: 35px;
        width: 360px;
        text-align: center;
        font-size: 120%;
        font-weight: 600;
        color: white;
        background:rgb(87, 85, 109);
        border-radius: 5px;
    }

    #img_producto{
        position: absolute;
        top: 5px;
        left: 15px;
        height: 50px;
        width: 50px;
        border-radius: 5px;
    }

    #sesions{
        position: absolute;
        top:110px;
        left:10px;
        height: 250px;
        width: 360px;
        background: linear-gradient(70deg, rgb(180, 179, 179), rgb(248, 248, 248));
        border-radius: 10px;
    }

    #encaform{
        position: absolute;
        top:10px;
        left:0px;
        height: 30px;
        width: 360px;
        text-align: center;
        font-size: 130%;
        font-weight: bold;
    }

    #recordar{
        position: absolute;
        top:40px;
        left:200px;
        height: 30px;
        width: 150px;
        text-align:right;
        font-size: 90%;
        font-weight: bold;
    }

    #usuario{
        position: absolute;
        top:80px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: 600;
    }

    #inusu{
        position: absolute;
        top:80px;
        left:120px;
        height: 25px;
        width: 225px;
        text-align:left;
        font-size: 90%;
        border-radius: 5px;
        border: solid 1px grey;
    }

    #password{
        position: absolute;
        top:110px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #inpas{
        position: absolute;
        top:110px;
        left:120px;
        height: 25px;
        width: 225px;
        text-align:left;
        font-size: 85%;
        border-radius: 5px;
        border: solid 1px grey;
    }

    #robot{
        position: absolute;
        top:140px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #letras{
        position: absolute;
        top:150px;
        left:125px;
        height:30px;
        width:110px;
        text-align:center;
        font-size: 120%;
        font-weight: 600;
        background: linear-gradient(70deg, rgb(44, 12, 190), rgb(248, 248, 248));
        border-radius: 5px;
        color: white;
    }

    #inrobot{
        position: absolute;
        top:150px;
        left:240px;
        height: 25px;
        width: 105px;
        text-align:left;
        font-size: 90%;
        font-weight: 600;
        text-align: center;
        border: solid 1px grey;
        border-radius: 5px;
    }

    #ingresar{
        position: absolute;
        top:200px;
        left:230px;
        height:30px;
        width:120px;
        text-align: center;
        font-size: 90%;
        font-weight: 600;
        color: white;
        background:rgb(87, 85, 109);
        border-radius: 10px;
    }    

    #ingresar:hover{
        color: rgb(87, 85, 109);
        background-color: rgb(223, 217, 217);
        cursor: pointer;
    }

    #registro{
        position: absolute;
        top: 220px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:right;
        font-size: 90%;
        font-weight: bold;
    }

    #inicio{
        position: absolute;
        top:365px;
        left:10px;
        height:290px;
        width: 360px;
    }

    #img_inicio{
        position: absolute;
        top: 0px;
        left: 0px;
        height:290px;
        width: 360px;
    }

        #ver2024{
        position: absolute;
        top:190px;
        left:40px;
        height:30px;
        width:150px;
        text-align: center;
        font-size: 90%;
        font-weight: 600;
        color: white;
        background:rgb(80, 43, 83);
        border-radius: 10px;
    }

    #ver2024:hover{
        color: rgb(87, 85, 109);
        background-color: rgb(223, 217, 217);
        cursor: pointer;
    }

}

@media (min-width:1330px){
    
    #cabecera{
        position: absolute;
        top: 20px;
        height: 75px;
        width: 1330px;
        background-color: rgb(228, 228, 228);
    }

    #img_corp{
        position: absolute;
        top: 5px;
        left: 455px;
        height: 60px;
        width: 70px;
    }

    #iniciol{
        position: absolute;
        top: 20px;
        left: 1000px;
        color:  rgb(1, 3, 20);
        font-size: 90%;
        font-weight: 600;
    }

    #contactanos{
        position: absolute;
        top: 20px;
        left: 1090px;
        color:  rgb(1, 3, 20);
        font-size: 90%;
        font-weight: 600;
    }

    #productos{
        position: absolute;
        top: 97px;
        left: 170px;
        height: 35px;
        width: 950px;
        text-align: center;
        font-size: 120%;
        font-weight: 600;
        color: white;
        background:rgb(87, 85, 109);
        border-radius: 5px;
    }

    #img_producto{
        position: absolute;
        top: 270px;
        left: 480px;
        height: 50px;
        width: 50px;
        border-radius: 5px;
    }


    #inicio{
        position: absolute;
        top:135px;
        left:170px;
        height:460px;
        width: 300px;
    }

    #img_inicio{
        position: absolute;
        top: 0px;
        left: 0px;
        height:460px;
        width: 300px;
    }

    #sesions{
        position: absolute;
        top:150px;
        left:480px;
        height: 350px;
        width: 550px;
        background: linear-gradient(70deg, rgb(180, 179, 179), rgb(248, 248, 248));
        border-radius: 10px;
    }

    #encaform{
        position: absolute;
        top:50px;
        left:0px;
        height: 30px;
        width: 550px;
        text-align: center;
        font-size: 130%;
        font-weight: bold;
    }

    #recordar{
        position: absolute;
        top:80px;
        left:390px;
        height: 30px;
        width: 100px;
        text-align:right;
        font-size: 90%;
        font-weight: bold;
    }

    #usuario{
        position: absolute;
        top:110px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #inusu{
        position: absolute;
        top:110px;
        left:120px;
        height: 25px;
        width: 260px;
        text-align:left;
        font-size: 90%;
        border-radius: 5px;
        border: solid 1px grey;
    }

    #password{
        position: absolute;
        top:150px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #inpas{
        position: absolute;
        top:150px;
        left:120px;
        height: 25px;
        width: 260px;
        text-align:left;
        font-size: 85%;
        border-radius: 5px;
        border: solid 1px grey;
    }

    #robot{
        position: absolute;
        top:190px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #letras{
        position: absolute;
        top:190px;
        left:125px;
        height:30px;
        width:110px;
        text-align:center;
        font-size: 120%;
        font-weight: bold;
        background: linear-gradient(70deg, rgb(69, 56, 131), rgb(4, 7, 39));
        border-radius: 5px;
        color: white;
    }

    #inrobot{
        position: absolute;
        top:190px;
        left:240px;
        height: 25px;
        width: 140px;
        text-align:left;
        font-size: 90%;
        text-align: center;
        border: solid 1px grey;
        border-radius: 5px;
    }

    #ingresar{
        position: absolute;
        top:230px;
        left:260px;
        height:30px;
        width:120px;
        text-align: center;
        font-size: 90%;
        font-weight: 600;
        color: white;
        background:rgb(87, 85, 109);
        border-radius: 10px;
    }    

    #ingresar:hover{
        color: rgb(87, 85, 109);
        background-color: rgb(223, 217, 217);
        cursor: pointer;
    }

    #registro{
        position: absolute;
        top: 300px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:right;
        font-size: 90%;
        font-weight: bold;
    }

    #errores{
        position: absolute;
        top: 350px;
        left: 0px;
        height: 25px;
        width: 550px;
        color: white;
        font-size: 80%;
        font-weight: 600;
        text-align: center;
        background: red;
        border-radius: 5px;
    }

    #ver2024{
        position: absolute;
        top:240px;
        left:30px;
        height:30px;
        width:150px;
        text-align: center;
        font-size: 90%;
        font-weight: 600;
        color: white;
        background:rgb(80, 43, 83);
        border-radius: 10px;
    }

    #ver2024:hover{
        color: rgb(87, 85, 109);
        background-color: rgb(223, 217, 217);
        cursor: pointer;
    }
}


@media (min-width:1900px){
    #cabecera{
        position: absolute;
        top: 20px;
        height: 75px;
        width: 1900px;
        background-color: rgb(228, 228, 228);
    }

    #img_corp{
        position: absolute;
        top: 5px;
        left: 455px;
        height: 60px;
        width: 70px;
    }

    #iniciol{
        position: absolute;
        top: 35px;
        left: 1250px;
        color:  rgb(1, 3, 20);
        font-size: 90%;
        font-weight: 600;
    }

    #contactanos{
        position: absolute;
        top: 35px;
        left: 1350px;
        color:  rgb(1, 3, 20);
        font-size: 90%;
        font-weight: 600;
    }

    #productos{
        position: absolute;
        top: 97px;
        left: 475px;
        height: 37px;
        width: 950px;
        text-align: center;
        font-size: 120%;
        font-weight: 600;
        color: white;
        background:rgb(87, 85, 109);
        border-radius: 5px;
    }

    #img_producto{
        position: absolute;
        top: 290px;
        left: 480px;
        height: 50px;
        width: 50px;
        border-radius: 5px;
    }


    #inicio{
        position: absolute;
        top:140px;
        left:475px;
        height:750px;
        width: 300px;
    }

    #img_inicio{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 750px;
        width: 300px;
    }

    #sesions{
        position: absolute;
        top:200px;
        left:850px;
        height: 350px;
        width: 550px;
        background: linear-gradient(70deg, rgb(180, 179, 179), rgb(248, 248, 248));
        border-radius: 10px;
    }

    #encaform{
        position: absolute;
        top:50px;
        left:0px;
        height: 30px;
        width: 550px;
        text-align: center;
        font-size: 130%;
        font-weight: bold;
    }

    #recordar{
        position: absolute;
        top:80px;
        left:390px;
        height: 30px;
        width: 100px;
        text-align:right;
        font-size: 90%;
        font-weight: bold;
    }

    #usuario{
        position: absolute;
        top:110px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #inusu{
        position: absolute;
        top:110px;
        left:120px;
        height: 25px;
        width: 260px;
        text-align:left;
        font-size: 90%;
        font-weight: 600;
        border-radius: 5px;
        border: solid 1px grey;
    }

    #password{
        position: absolute;
        top:150px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: 600;
    }

    #inpas{
        position: absolute;
        top:150px;
        left:120px;
        height: 25px;
        width: 260px;
        text-align:left;
        font-size: 85%;
        border-radius: 5px;
        border: solid 1px grey;
    }

    #robot{
        position: absolute;
        top:190px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:left;
        font-size: 90%;
        font-weight: bold;
    }

    #letras{
        position: absolute;
        top:190px;
        left:125px;
        height:30px;
        width:110px;
        text-align:center;
        font-size: 120%;
        font-weight: bold;
        background: linear-gradient(70deg, rgb(44, 12, 190), rgb(248, 248, 248));
        border-radius: 5px;
        color: white;
    }

    #inrobot{
        position: absolute;
        top:190px;
        left:240px;
        height: 25px;
        width: 140px;
        text-align:left;
        font-size: 90%;
        text-align: center;
        border: solid 1px grey;
        border-radius: 5px;
    }

    #ingresar{
        position: absolute;
        top:230px;
        left:260px;
        height:30px;
        width:120px;
        text-align: center;
        font-size: 90%;
        font-weight: 600;
        color: white;
        background:rgb(87, 85, 109);
        border-radius: 10px;
    }    

    #ingresar:hover{
        color: rgb(87, 85, 109);
        background-color: rgb(223, 217, 217);
        cursor: pointer;
    }

    #registro{
        position: absolute;
        top: 300px;
        left:20px;
        height: 30px;
        width: 100px;
        text-align:right;
        font-size: 90%;
        font-weight: bold;
    }

    #ver2024{
        position: absolute;
        top:250px;
        left:40px;
        height:30px;
        width:150px;
        text-align: center;
        font-size: 90%;
        font-weight: 600;
        color: white;
        background:rgb(80, 43, 83);
        border-radius: 10px;
    }

    #ver2024:hover{
        color: rgb(87, 85, 109);
        background-color: rgb(223, 217, 217);
        cursor: pointer;
    }

}