body {
    margin: 0 0 0 0;
    color: aliceblue;
    background-image: url(Pictures/GIFS/BG1.gif);
    background-size: 5px;
    width: auto;
    height: auto;
    text-align: -webkit-center;
}
.content {
    box-sizing: border-box;
    border: 0px solid white;
    padding: 3px;
}
.grid {
    box-shadow: #86dbee 0px 0px 20px;
    border: ridge 10px #b2cecb;
    background-image: url(Pictures/GIFS/BG2.gif);
    background-size: 30px;
    display: inline-grid;
    column-gap: 10px;
    row-gap: 5px;
    padding: 10px;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px 100px 100px);
    grid-template-areas: 
    'header header header'
    'scotta scotta scotta'
    'leftbar main rightbar'
    'dd dd dd'
    'ee ee ff'
    'qq qq qq'
    'footer footer footer';
}
.page-dd {
    grid-area: dd;
    border: 0px solid white;
    height: 0px;
}
.page-ee {
    grid-area: ee;
    border: 0px solid white;
    width: 0px;
    height: 0px;
}
.page-ff {
    grid-area: ff;
    border: 0px solid white;
    width: 0px;
    height: 0px;
    margin-left: -0px;
}
.page-qq {
    grid-area:qq ;
    border: 0px solid white;
    height: 0px;
}
.page-header {
    grid-area: header;
    border: 0px solid white;
}
.page-scotta {
    grid-area: scotta;
    height: 150px;
    border: 0px solid white;
}
.page-main {
    grid-area: main;
    border: 0px solid white;
}
.page-leftbar {
    grid-area: leftbar;
    border: 0px solid white;
    width: 180px;
}
.page-rightbar {
    grid-area: rightbar;
    border: 0px solid white;
    width: 180px;
}
.page-footer {
    grid-area: footer;
    padding: 0px;
    border: 0px solid white;
    height: 0px;
}
.top-section a {
    font-size: 20px;
    margin: -30px 0 0 -200px;
    position: absolute;
}
.aa {
    width: 200px;
    margin: -18.2cm 0 0 -31cm;
}
.ADS1 {
    padding-top: 30px;
}
.ADS1 img {
    width: 145px;
    border: 5px inset gray;
}
.bb {
    width: 200px;
    margin: -17.2cm 0 0 31.2cm;
}
.ADS2 {
    padding-top: 25px;
}
.ADS2 img {
    width: 145px;
    display: inline-block;
    border: 5px inset gray;
}
.note {
    border: 2px solid #dbeaea92;
    background: linear-gradient(0deg, #2d5d77dd 0%, #153b52e7 50%, #021f33e4 100%);
    overflow-wrap: break-word;
    width: 500px;
    height: 295px;
    padding: 15px;
}
.note p {
    font-size: 1.2rem;
    margin-top: 120px;
}

.Images img{
    width: 170px;
    border: 4px inset gray;
}
.card1 {
    margin-left: -3px;
    padding: 2px;
    display: inline-block;
}
.low-images {
    display: inline-flex;
    width: 850px;
    height: 90px;
    gap: 10px;
    margin-top: 10px;
}
h1 {
    font-size: 50px;
}

/*----- custom scrollbar ----- */
::-webkit-scrollbar{
    width: 5px;
}
::-webkit-scrollbar-track{
    background: #000000;
}
::-webkit-scrollbar-thumb{
    background-color: #214e55;
    box-shadow: inset -1px -1px #000000, inset 1px 1px #3d747b, inset -2px -2px #002c32, inset 2px 2px #3d747b;
}
::-webkit-scrollbar-corner {
    background: #1d3032;
}

.low-images1 {
    animation: jumping 1s 0s 1;
    animation-iteration-count: infinite;
}
.low-images2 {
    animation: jumping 1s 0.3s 1;
    animation-iteration-count: infinite;
}
.low-images3 {
    animation: jumping 1s 0.7s 1;
    animation-iteration-count: infinite;
}
.low-images4 {
    animation: jumping 1s 1s 1;
    animation-iteration-count: infinite;
}
.low-images5 {
    animation: jumping 1s 1.3s 1;
    animation-iteration-count: infinite;
}
.low-images6 {
    animation: jumping 1s 1.7s 1;
    animation-iteration-count: infinite;
}
.low-images7 {
    animation: jumping 1s 2s 1;
    animation-iteration-count: infinite;
}
.low-images8 {
    animation: jumping 1s 2.3s 1;
    animation-iteration-count: infinite;
}
.low-images9 {
    animation: jumping 1s 2.7s 1;
    animation-iteration-count: infinite;
}
.low-images10 {
    animation: jumping 1s 3s 1;
    animation-iteration-count: infinite;
}
.low-images11 {
    animation: jumping 1s 3.3s 1;
    animation-iteration-count: infinite;
}
.low-images12 {
    animation: jumping 1s 3.7s 1;
    animation-iteration-count: infinite;
}
.low-images13 {
    animation: jumping 1s 4s 1;
    animation-iteration-count: infinite;
}
.low-images14 {
    animation: jumping 1s 4.3s 1;
    animation-iteration-count: infinite;
}

@keyframes jumping {
    0% {
        transform: translateY(0%);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(-50%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
    }
}