:root{
    --lightGreyGradient2: linear-gradient(to right, transparent 0%, rgba(180,180,180,.75) 10%, transparent 20%, rgba(180,180,180,.75) 30%, transparent 40%, rgba(180,180,180,.75) 50%, transparent 60%, rgba(180,180,180,.75) 70%, transparent 80%, rgba(180,180,180,.75) 90%, transparent 100%);
    --darkGreyGradient2: linear-gradient(to right, transparent 0%, rgba(40,40,40,.75) 10%, transparent 20%, rgba(40,40,40,.75) 30%, transparent 40%, rgba(40,40,40,.75) 50%, transparent 60%, rgba(40,40,40,.75) 70%, transparent 80%, rgba(40,40,40,.75) 90%, transparent 100%);
    --lightGreyGradient: linear-gradient(to right, transparent 0%, rgba(180,180,180,.75) 10%, transparent 20%, rgba(180,180,180,.75) 30%, transparent 40%, rgba(180,180,180,.75) 50%, transparent 60%, rgba(180,180,180,.75) 70%, transparent 80%);
    --darkGreyGradient: linear-gradient(to right, transparent 0%, rgba(40,40,40,.5) 10%, transparent 20%, rgba(40,40,40,.5) 30%, transparent 40%, rgba(40,40,40,.5) 50%, transparent 60%, rgba(40,40,40,.5) 70%, transparent 80%);
    --whiteGradientSolid: linear-gradient(white 100%, transparent 0);
    --darkGreyGradientSolid: linear-gradient( rgb(40,40,40) 100%, transparent 0);
    --lightGreyGradientSolid: linear-gradient(rgb(180,180,180) 100%, transparent 0);
}

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    background: rgb(70,70,70);
}

.skeleton{
    background-repeat: no-repeat;
    animation: loading 4s linear .5s infinite;
}

@media (min-width: 1400px) {
    .skeleton {
        height: 185px;
        width: 1400px;
        background-image:
            var(--darkGreyGradient), /* animated top layer */
            var(--lightGreyGradient), /* animated top layer */
            var(--whiteGradientSolid), /* promotional text */
            var(--darkGreyGradientSolid), /* top bar background */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* login */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* search */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--lightGreyGradientSolid); /* background */
        background-size:
            50% 40px, /* animated top layer */
            50% 100%, /* animated top layer */
            450px 24px, /* promotional text */
            100% 40px, /* top bar background */
            80px 35px, /* logo */
            80px 35px, /* logo */
            80px 35px, /* logo */
            80px 35px, /* logo */
            130px 25px, /* login */
            115px 50px, /* logo */
            260px 45px, /* search */
            75px 25px, /* nav */
            75px 25px, /* nav */
            75px 25px, /* nav */
            75px 25px, /* nav */
            75px 25px, /* nav */
            75px 25px, /* nav */
            100% 100%; /* background */
        background-position:
            -100% 0, /* animated top layer */
            -100% 40px, /* animated top layer */
            50% 7px, /* promotional text */
            0px 0px, /* top bar background */
            2% 52.5px, /* logo */
            9% 52.5px, /* logo */
            16% 52.5px, /* logo */
            23% 52.5px, /* logo */
            98% 60px, /* login */
            2% 105px, /* logo */
            14.5% 107.5px, /* search */
            65.5% 118px, /* nav */
            72% 118px, /* nav */
            78.5% 118px, /* nav */
            85% 118px, /* nav */
            91.5% 118px, /* nav */
            98% 118px, /* nav */
            0 0; /* background */
    }
    @keyframes loading{
        to{
            background-position:
            200% 0,  /* animated top layer */
            200% 40px,  /* animated top layer */
            50% 7px, /* promotional text */
            0px 0px, /* top bar background */
            2% 52.5px, /* logo */
            9% 52.5px, /* logo */
            16% 52.5px, /* logo */
            23% 52.5px, /* logo */
            98% 60px, /* login */
            2% 105px, /* logo */
            14.5% 107.5px, /* search */
            65.5% 118px, /* nav */
            72% 118px, /* nav */
            78.5% 118px, /* nav */
            85% 118px, /* nav */
            91.5% 118px, /* nav */
            98% 118px, /* nav */
            0 0; /* background */
        }
    }
}

@media (max-width: 1400px) and (min-width: 768px) {
    .skeleton {
        height: 190px;
        width: 768px;
        background-image:
            var(--darkGreyGradient), /* animated top layer */
            var(--lightGreyGradient), /* animated top layer */
            var(--darkGreyGradient), /* animated top layer */
            var(--lightGreyGradient), /* animated top layer */
            var(--whiteGradientSolid), /* promotional text */
            linear-gradient(rgb(40,40,40) 100%, transparent 0), /* top bar background */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* login */
            linear-gradient(rgb(40,40,40) 100%, transparent 0), /* search */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--whiteGradientSolid), /* nav */
            var(--lightGreyGradientSolid); /* background */
        background-size:
            50% 40px, /* animated top layer */
            50% 60px, /* animated top layer */
            50% 45px, /* animated top layer */
            50% 100%, /* animated top layer */
            300px 24px, /* promotional text */
            100% 40px, /* top bar background */
            70px 35px, /* logo */
            70px 35px, /* logo */
            70px 35px, /* logo */
            70px 35px, /* logo */
            130px 25px, /* login */
            810px 45px, /* search */
            89px 25px, /* nav */
            89px 25px, /* nav */
            89px 25px, /* nav */
            89px 25px, /* nav */
            89px 25px, /* nav */
            89px 25px, /* nav */
            100% 100%; /* background */
        background-position:
            -100% 0, /* animated top layer */
            -100% 40px, /* animated top layer */
            -100% 100px, /* animated top layer */
            -100% 145px, /* animated top layer */
            50% 7px, /* promotional text */
            0px 0px, /* top bar background */
            5% 50px, /* logo */
            16% 50px, /* logo */
            27% 50px, /* logo */
            38% 50px, /* logo */
            95% 60px, /* login */
            48.5% 100px, /* search */
            5% 155px, /* nav */
            23% 155px, /* nav */
            41% 155px, /* nav */
            59% 155px, /* nav */
            77% 155px, /* nav */
            95% 155px, /* nav */
            0 0; /* background */
    }
    @keyframes loading{
        to{
            background-position:
            200% 0,  /* animated top layer */
            200% 40px,  /* animated top layer */
            200% 100px,  /* animated top layer */
            200% 145px,  /* animated top layer */
            50% 7px, /* promotional text */
            0px 0px, /* top bar background */
            5% 50px, /* logo */
            16% 50px, /* logo */
            27% 50px, /* logo */
            38% 50px, /* logo */
            95% 60px, /* login */
            48.5% 100px, /* search */
            5% 155px, /* nav */
            23% 155px, /* nav */
            41% 155px, /* nav */
            59% 155px, /* nav */
            77% 155px, /* nav */
            95% 155px, /* nav */
            0 0; /* background */
        }
    }
}

@media (max-width: 768px) {
    .skeleton {
        height: 130px;
        width: 100%;
        background-image:
            var(--darkGreyGradient), /* animated top layer */
            var(--lightGreyGradient), /* animated top layer */
            var(--whiteGradientSolid), /* promotional text */
            linear-gradient(rgb(40,40,40) 100%, transparent 0), /* top bar background */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* logo */
            var(--whiteGradientSolid), /* search */
            var(--whiteGradientSolid), /* menu */
            var(--lightGreyGradientSolid); /* background */
        background-size:
            50% 32px, /* animated top layer */
            50% 100%, /* animated top layer */
            60% 24px, /* promotional text */
            100% 32px, /* top bar background */
            16% 35px, /* logo */
            16% 35px, /* logo */
            16% 35px, /* logo */
            16% 35px, /* logo */
            80% 45px, /* search */
            5% 35px, /* menu */
            100% 100%; /* background */
        background-position:
            -100% 0, /* animated top layer */
            -100% 32px, /* animated top layer */
            50% 3px, /* promotional text */
            0px 0px, /* top bar background */
            5% 36px, /* logo */
            35% 36px, /* logo */
            65% 36px, /* logo */
            95% 36px, /* logo */
            50% 78px, /* search */
            98% 83px, /* menu */
            0 0; /* background */
    }
    @keyframes loading{
        to{
            background-position:
            200% 0,  /* animated top layer */
            200% 32px,  /* animated top layer */
            50% 3px, /* promotional text */
            0px 0px, /* top bar background */
            5% 36px, /* logo */
            35% 36px, /* logo */
            65% 36px, /* logo */
            95% 36px, /* logo */
            50% 78px, /* search */
            98% 83px, /* menu */
            0 0; /* background */
        }
    }
}