/* Scrollbar styles  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: blue orange;
}
*::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}
*::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #201c29, #201c29 1px, #100e17 0, #100e17);
    background-image: linear-gradient(
        90deg,
        rgb(32, 28, 41),
        rgb(32, 28, 41) 1px,
        rgb(16, 14, 23) 0px,
        rgb(16, 14, 23)
    );
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    /* background-repeat-x: initial;
    background-repeat-y: initial; */
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

*::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear, left top, left bottom, from(#ff8a00), to(#e52e71));
    background-image: linear-gradient(rgb(255, 138, 0), rgb(229, 46, 113));
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    background: linear-gradient(180deg, #ff8a00, #e52e71);
    background-image: linear-gradient(rgb(255, 138, 0), rgb(229, 46, 113));
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    border-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25);
}

/* dropdown menu */

/* .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
} */

/* .dropdown {
  position: relative;
  display: inline-block;
} */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content-1 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}



/* end dropdown */

/* Scrollbar styles */

body {
    display: grid;
    margin: 0;
    background-color: rgb(166, 174, 223);
    width: 100%;
    /* overflow: hidden; */
}

/* Tablet Landscape 
@media screen and (max-width: 500px) {
    ul { width:67%; }
    li { width:30%; border: none;
    }
      
}
 Tabled Portrait 
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
} */

/* ul#navbar li a:hover:not(.active) {background-color: #111;} */

/* ul.nav li a.active {background-color: #4CAF50;} */

/* ul.nav li.right {float: right;} */

/* @media screen and (max-width: 600px) {
  ul.nav li.right, 
  ul.nav li {float: none;}
}  */

.container {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
    margin-right: auto;
    margin-left: auto;
}

.navbar {
    display: inline-block;
    position: relative;
    background: #2f5f7a65;
    overflow: hidden;
    border-radius: 519em 78em 500em 19em;
    width: 100%;
    height: 145px;
    z-index: 18;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.048);
    background-image: linear-gradient(to right, yellow, red); /* Standard syntax (must be last) */
}

button {
    background-image: linear-gradient(to right, #ffd100, #ff6d00c4);
    font-size: 18px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    height: 100px;
    width: 100px;
    border-radius: 10px 50px 50px 50px;
    /* cursor: url(/A-GARBESTON2/img/table-tennis-logo.png), auto; */
}

.buttons {
    display: none;
}

.margin {
    margin-bottom: 5px;
    border: solid;
    border-color: rgba(100, 149, 237, 0.9);
}

/* @media screen and (max-width: 500px) {
    button {
        width: 100%;
        height: 100px;
        background-color: cornflowerblue;
        margin-top: 10px;
        float: right;
        border-radius: 519em 78em 500em 19em;
        display: block;
        border: none;
        color: white;
        padding: 14px 28px;
        font-size: auto;
        cursor: url(/A-GARBESTON2/img/table-tennis-logo.png), auto;
        text-align: center;
        z-index: 20;
    }
} */

#button {
    margin-top: 200px;
}

.links {
    position: sticky;
    /* left: 710px; */
    bottom: 326px;
    /* width: 776px; */
    z-index: 20;
    overflow: hidden;
}

/* ----------------------------- */

.links.responsive a.icon {
    position: sticky;
    right: 0;
    top: 0;
}

.links.responsive a {
    float: none;
    display: block;
    text-align: center;
}

/* ---------------------------------------- */

.links a {
    float: right;
    text-decoration: none;
    margin-right: 25px;
    color: black;
    padding: 15px;
    border-radius: 10px;
    z-index: 20;
    cursor: url("/table-tennis-2092882_1280.png") auto;
}

button:hover {
    background-color: tomato;
}

/* .container-ping {
    height: 300px;
    width: 100%;
} */

.image-ping {
    width: 100%;
    background: url("https://media.giphy.com/media/3o7bu6bgBJ29EQB6mY/source.gif") no-repeat;
    background-size: cover;
    transition: transform 4s ease;
    /* transform: scale(2); */

    /* height: 500px;
  width: 100%;
  background: url("https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?w=940&h=650&auto=compress&cs=tinysrgb") no-repeat;
  background-size: cover;
  transition: transform 3s ease;
  transform: scale(1); */
}

/* @media screen and (max-width: 1050px) {
    .links {
        display: none;
    }
} */

/* @media screen and (max-width: 850px) {
    .links.responsive {
        position: relative;
        position: absolute;
        z-index: 1;
        right: 50px;
        top: 30px;
        width: 165px;
        display: block;
    
    }
    } */
.responsive {
    position: relative;
    z-index: 20;
    /* right: 50px; */
    /* top: 30px; */
    /* width: 165px; */
    display: block;
    font-size: 20px;
}

/* .links a:hover {
    background-color: chocolate;
} */

/* animated burguer menu */
.menu {
    float: right;
    /* background-color: transparent; */
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}
.line {
    fill: none;
    stroke: black;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
/* end animated burger menu */

.icon {
    display: none;
    /* right: 50px;
    position: fixed;
    border: none; -  ----------
    color: #fb7b12; ----------
    font-size: 96px;-----------
    cursor: pointer;--------------
    z-index: 1; ------------ */
}

@media screen and (max-width: 1050px) {
    /* burger menu */
    .icon {
        position: fixed;
        z-index: 20;
        right: 50px;
        top: 30px;
        max-width: 165px;
        display: block;
        color: #ffffff;
        /* cursor: pointer; */
        /* font-size: medium; */
        /* border: none; */
    }
    .sidenav {
        padding-top: 50px;
    }

    .sidenav a {
        font-size: 25px;
    }
    /* end burger menu */

    .links {
        display: none;
    }

    /* .icon {
        position: fixed;
        z-index: 20;
        right: 50px;
        top: 30px;
        max-width: 165px;
        display: block;
    } */
}

/* side nav */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 21;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 1s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-right 5s;
    padding: 16px;
}

/* @media screen and (max-height: 450px) {
        .icon {
        position: fixed;
        z-index: 20;
        right: 50px;
        top: 30px;
        max-width: 165px;
        display: block;
    }
    .sidenav {
        padding-top: 50px;
    }

    .sidenav a {
        font-size: 25px;
    }
} */

/* end side nav */

/* container2 .gift with ping pong */
.container2 {
    text-align: center;
    background-color: black;
    width: 100%;
    /* margin-top: ; */
}

/* start container_netflix */
.container_netflix {
    display: flex;
    margin-top: 300px;
    z-index: 17;
    width: auto;
    position: relative;
    background-color: #252a47;
}

.item_netflix {
    position: relative;
    display: block;
    flex: 1 1 0px;
    transition: transform 300ms;
}

.container_netflix:focus-within .item_netflix,
.container_netflix:hover .item_netflix {
    transform: translateX(-25%);
}

.item_netflix:focus ~ .item_netflix,
.item_netflix:hover ~ .item_netflix {
    transform: translateX(25%);
}

.container_netflix .item_netflix:focus,
.container_netflix .item_netflix:hover {
    transform: scale(1.5);
    z-index: 17;
}

.item_netflix img {
    display: block;
    max-width: 100%;
}

/* end container_netflix */

/* span {
    padding: 15px;
    border-radius: 10px;
} */

/* span:hover:not(.active) {
    background-color: rgb(255, 255, 255);
} */

.shrink {
    max-width: 100px;
    /* -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out; */
    animation: all 3s ease-out;
    transition: all 3s ease;
    z-index: 20;
}

.image {
    left: 10px;
    border-radius: 128px 25px 116px 20px;
    background-image: linear-gradient(to right, #ffd100, #ff6d00c4);
    position: fixed;
    /* padding: 0px 5px 0px 0px; */
    top: 2px;
    z-index: 20;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    animation: 3s cubic-bezier(0.4, 0, 1, 1) 4s;
    -webkit-animation: 3s cubic-bezier(0.4, 0, 1, 1) 4s;
    transition: 3s cubic-bezier(0.4, 0, 1, 1) 4s;
    -moz-transition: 3s cubic-bezier(0.4, 0, 1, 1) 4s;

    /* transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out ; */
}

@media screen and (max-width: 700px) {
    .navbar {
        /* width: 100%; */
        height: 52px;
    }

    .image {
        height: 50px;
    }

    .icon {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 30px;
    }
}

/* testing */

/*     }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 100%; /* Set width of the dropdown */
/*   background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        */
/*  display: block;	 Display the dropdown */
/*   }
    ul li ul.dropdown li{
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul class="dropdown">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul> */
/*  */

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* @media screen and (max-width: 800px) {
    .nav a:not(:first-child) {
        display: none;
    }

    .nav a:hover {
        position: relative;
        display: contents;
        background-color: #bb0000;
    }

    .nav a.icon {
        float: right;
        display: block;
    }
} */

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    /* .nav.navbar-nav.navbar-right.responsive {
        position: relative;
    } */

    /* this lines are to styles the footer */

    /* .links.responsive a.icon {
        position: s;
        right: 0;
        top: 0;
    } */

    .links.responsive a {
        float: right;
        display: block;
        text-align: center;
        position: sticky;
    }
}

/* end of the styles for the footer */

/* .navigation__button */
.logo {
    background-color: #fff;
    height: 7rem;
    width: 7rem;
    position: fixed;
    top: 6rem;
    right: 110rem;
    border-radius: 50%;
    z-index: 20;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
}

.logo::before {
    top: 10rem;
}

.logo::after {
    top: 40rem;
}

.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
}

/* nav ul { */
/* temporal */
/* background: #2f5f7a65;
    height: 145px;
    margin: 0px;
    top: 0px;
    padding: 0px;
    border-radius: 519em 78em 500em 19em; */

/* temporal */
/* background: transparent; */
/* height: 147px; */
/* margin:0; */
/* padding: 0; */
/* text-align: left; */
/* margin-left: 27rem; */
/* float: right; */
/* } */

/* nav li {
  display: inline; */
/* float: right; */
/* text-decoration: none;
  list-style-type: none; */
/* margin-right: 10px; */

/* } */

/* .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    background-color: darkred;

}

.one {
    grid-column: 1 /3;
    grid-row: 1;
    text-align: center;
    padding: 10px 20px;
}




div.container {
  text-align: right;
  /* padding: 10px 20px; 
}

.two {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    background-color: blue;

}
.three {
    grid-column: 1 ;
    grid-row: 2 / 5;
    background-color: burlywood;
}
.four {
    grid-column: 3;
    grid-row: 3;
    background-color: chocolate;
}
.five {
    grid-column: 2;
    grid-row: 4;
    background-color: darkgray;

}
.six {
    grid-column: 3;
    grid-row: 4;
    background-color: darkolivegreen; 

}

/* nav a {
  color: #16a085;
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
}

nav a:hover {
  background: #ffffff;
}

.space {
  background: #2c3e50;
  text-align: center;
  color: #d60f0f;
  margin: 20px;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #2c3e50;
  color: #444;
}

.grid .box {
  background-color: #444;
  color: #fff;
  border-radius: 25px;
  padding: 20px;
  font-size: 150%;
} */

/* New navbar styles */

/* ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}
*/

/* styles for menu nav start */

/* li a {
    display: grid;
    color: rgb(22, 22, 22);
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
} */

/* styles for menu nav end */

/* .active {
  background-color: #4CAF50;
}   */

/* .cd-hero {
    vertically align its content
    display: table;
    width: 100%;
    margin-top: 0;
    height: 144px;
    background: url(/A-GARBESTON2/img/xtable-tennis.jpg) no-repeat center center;
    background-size: cover;
} */

/* .cd-hero .cd-hero-content {
    vertically align inside parent element
    display: table-cell;
    vertical-align: middle;
    text-align: center;
} */

.rss {
    background-color: white;
    width: 100%;
    text-align: center;
}

.xx {
    /* make sure to cover the screen */
    /* min-height: 100vh; */

    /* need a solid bg to hide the footer */
    background: white;

    /* put on top */
    position: relative;
    z-index: 15;

    font: 16px/1.4 system-ui, sans-serif;
    /* padding: 2rem; */
    /* margin-top: ; */
}

footer {
    display: grid;
    grid-template-columns: auto auto auto;
    place-items: center;
    background: #252a47;

    /* place on the bottom */
    /* position: relative; */
    /* bottom: 0;
    left: 0; */
    /* width: 100%; */
    /* z-index: 1; */
    /* padding: 50px; */

    /* grid-gap: 10px; */
    /* padding: 10px; */
    /* column-gap: 10px; */
}

.info {
    /* width: 100%; */
    border: 1px solid #f5f1ef;
}

.info a {
    display: grid;
    font-size: 30px;
    text-align: left;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 30px;
    margin: 10px 10px;
    color: white;
    grid-auto-rows: auto auto auto;
}

/* i.fa.fa-bars {
    font-size: 75px;
    margin-right: 20px;
    position: sticky;
} */

/* social media buttons */
.fa {
    padding: 10px;
    font-size: 15px;
    width: 15px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3b5998;
    color: white;
}

.fa-twitter {
    background: #55acee;
    color: white;
}

.fa-youtube {
    background: #bb0000;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

.fa-rss {
    background: #ff6600;
    color: white;
}

/* Selectors not used */

/* Navbar container */
/* .navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
  } */

/* Links inside the navbar */
/* .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  } */

/* The dropdown container */
/* .dropdown {
    float: right;
    overflow: hidden;
    margin-right: 50px;
    margin-left: 10px;
} */

/* Dropdown button */
/* .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 0;
    background-color: inherit;
    font-family: inherit;
    Important for vertical align on mobile phones
    margin: 0;
    Important for vertical align on mobile phones
} */

/* Add a red background color to navbar links on hover */
/* .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
  } */

/* Dropdown content (hidden by default) */
/* .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
} */

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
#show:hover a {
    display: inline-block;
}

/* body {
    background: #001628;
    color: #777;
    padding: 4em;
    font-family: sans-serif;
    line-height: 1.15;
  } */

hr {
    /*dummy content*/
    height: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
}

hr:last-child {
    /*dummy content*/
    margin-right: 60%;
}

hr.image {
    /*dummy content*/
    padding-bottom: 50%;
}

.page {
    padding: 2em;
    background: #cecece;
    max-width: 100%;
}

.archive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 1em;
}

.article {
    padding: 1em;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
}

#imagen {
    display: none;
}