body{
    margin: 0;
    padding:0;
    width: 100%;
   background: url(images/bg1.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
}
body.night{
    background: rgb(33, 33, 41);
    color: white;
}

.container{
    padding: 0px;
    width: 100%;
    margin: 0px;
    height: auto;
    
}

#header{
    width: 100%;
    height: 80px;
    background-color: rgb(255, 255, 255);
    box-shadow: 5px 5px 5px 5px rgb(82, 84, 87);
    overflow:hidden ;
    
}

#header img{
    background-color: white;
    width: 120px;
    height: 80px;
     margin-left: 7%;
    
}

#nav{
    float: right;
    margin-right: 10%;

}

#nav ul{
    list-style-type: none;
    margin :5% 0%;
}

#nav ul li{
    display: inline-block;
    padding:7px 15px;
}

#nav ul li a{
    text-decoration: none;
    color:black !important;
    padding: 1% 1%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    color: rgb(14, 13, 13);
}

#nav ul li a.night{
    color: white;
}

#nav ul li:active, #nav ul li:hover{
    border-bottom:3px solid rgb(27, 31, 36);
    border-radius: 10px;
    transform: scale(1.25);
    transition: .1s;

}

.div1{
    height: 70px;
}

.tog{
    display:block;
    float: right; 
    cursor: pointer; 
    text-align:center;
    margin: 1.5%; 
}

.cart{
    position:fixed;
    display: block;
    float: right; 
    cursor: pointer; 
    text-align:center;
    margin: 1%;
}


#modal{
    display: none;
    width: 500px;
    height: auto;
    overflow: hidden;
    position: absolute;
    position: fixed;

    background: rgb(156, 156, 156);
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    box-shadow:0px 0px 20px 0px rgb(84, 122, 156);
    border-radius: 10px;
    animation: fall .2s ease;
}
@keyframes fall{
    from { 
        top:0px;
        opacity: 0;
    }
    to{
        top: 0px;
        
        opacity: 1;
    }
}
.close{
    text-align: center;
    font-size: 22px;
    margin :10px;
    margin-left: 220px;
    cursor: pointer;
    border:1px solid black;
    display: inline-block;
    padding :7px 20px;
    border-radius: 10px;
}

.check{
  margin-top :20px;
  margin-bottom: 0px;
  margin-left: 200px;
  margin-right: 200px;
  width: 100px;
  height: 80px;
}

#modal p{
    margin-top:20px;
    text-align: center;
    font-size :2.5rem;
    color:rgb(23, 68, 23)
}

#intro p{
    margin: 0px auto;
    text-align: center ;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    height: auto;
    margin-top: 2%;
    font-size: 4.5rem;
    font-family: 'Comic Sans MS';
    animation: typing 3s steps(20) infinite ;    

}

.lr{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    text-align: center;
    margin: -5px auto;
}

#latest-games{
    width: 550px;
    height: 90vh;
    background-image:url(ss.jpg); 
    margin: 20px auto;
    background-position:  center center;
    background-size: cover;
    background-repeat: no-repeat; 
    animation: bgchange;
    animation-delay: 1s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    -moz-animation-name: bgchange;
    -moz-animation-delay: 1s;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in;
}

#category{
      
    margin: 20px 0.5%;
    box-shadow: 5px 5px 5px 5px rgb(76, 79, 82);
    display: inline-block;

}
#category ul {
    list-style-type: none;
    margin: 0px ;
    
}

#ac{
    font-family: 'Georgia'; 
    text-align:center ;
    font-size: 3em;
}

#category ul li{
    box-shadow: 7px 7px 7px 7px rgb(85, 87, 88);
    display: inline-block;
    border-radius: 10px;
    width: 28%;
    height: auto;
    margin: 2% 2%;
    background: whitesmoke;
    padding:5px auto;
}
#category ul li img{
    width: 65%;
    height: 250px;
    margin:10% 17%;
}

#category ul li span{
    display: block;  
    font-family: 'guardians'; 
    font-size: small;
    text-align: center;
}
#category ul li span.night{
    color: black;
}

#Buy{   
    color:white ;
    display: inline-block;
    background:rgb(71, 42, 42);
    padding : 14px;
    font-family: sans-serif;
    text-align: center;
    margin: 15px 4%;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgb(123, 130, 136);
    
}

#addtocart{   
    color:white ;
    outline: none;
    border-radius: 20px;
    display: inline-block;
    background:rgba(26, 39, 116, 0.781);
    padding : 14px;
    font-family: sans-serif;
    cursor: pointer;
    text-align: center;
    margin: 15px 4%;
    box-shadow: 5px 5px 5px rgb(55, 55, 58);
}

#addtocart:focus, #Buy:focus{
transform: scale(1.15);
transition: .1s;
}

#About{
    text-align: center;
    width: 80%;
    padding: 10px 20px;
    margin: 10px 10%;
    height: auto;
    box-shadow: 5px 5px 5px 5px rgb(38, 39, 39);
    
}
#About h2{  
font-family: 'forte';
font-size: 50px;

}
#About p{
    font-family: sans-serif;
    line-height: 3rem;
    font-size: 2rem;
    font-stretch: expanded;
}
#About img {
    width:250px;
    display: block;
    height: 250px;
    border-radius: 50%;
    margin :0 auto;
  }

#contact{
    text-align: center;
    width: 60%;
    margin: 10px 20%;
    height: auto;
    box-shadow: 5px 5px 5px 5px rgb(46, 47, 48);
}
.contact {  
    font-family: 'forte';
    font-size: 50px;
    
    
    }

#contactp{
    font-family: sans-serif;
    font-size: 20px;
    padding: 2px 2%;
    margin-top: -50px;
}

  #contact ul{
        margin-top: -5px;
        display: flex;
        justify-content: space-evenly;
        align-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        padding: none;
        list-style-type: none;
    }

#contact ul li{
    display: inline-block;
    border-radius: 50px;
    margin-bottom: 5px;
    margin-left: -4%;
    margin-right: 2%;
   padding-left: 5px;
   padding-top: 4px;
   padding-right: 4px;
   padding-bottom: 2px;
    
}

#contact ul li:hover{
        transform: scale(1.18) translateY(-5px);
        background-color: rgb(19, 35, 59);

        transition: .2s;
}

#contact ul li img{
    width: 50px;
    height: 50px;
}

@media Screen and (min-width:482px) and (max-width:768px){
    
    body{
        margin: 0;
        padding:0;
        width: 100%;
       background: url(images/bg1.jpg) ;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body.night{
        background: rgb(33, 33, 41);
        color: white;
    }
    
    .container{
        padding: 0px;
        width: 100%;
        margin: 0px;
        height: auto;
        
    }
    
    #header{
        background-image: url(images/bg1.jpg);
        width:100%;
      
    }
    
    #header img{
        background: silver;
        display: block;
        width: 120px;
        height: 80px;
        margin :0 auto;
        
    }

    #nav{
        width: 100%;
        position: absolute;
    }
    
    #nav ul{
        display: flex;
        justify-content: space-evenly;
        align-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        padding: none;
        list-style-type: none;
    
     
    }
    
    #nav ul li:active, #nav ul li:hover{
        border-bottom:3px solid rgb(27, 31, 36);
        border-radius: 10px;
        transform: scale(1.25);
        transition: .1s;
    
    }

    .div1{
        height: 20px;
    }
    
    .tog{
        display:none;
        float: right; 
        cursor: pointer; 
        text-align:center;
        margin: 1.5%; 
    }
    
    .cart{
        top:0px;
        position:fixed;
        display: block;
        float: right; 
        cursor: pointer; 
        text-align:center;
        margin:0px 1%;
    }


    #intro{
        width:100%;
    }
    
    #intro p{
        
        overflow: hidden;
        white-space: nowrap;
        height: auto;
        margin-top: 20%;
        font-size: 3rem;
        font-family: 'Comic Sans MS';
        animation: typing 3s steps(20) infinite ;    
    
    }
    
    .lr{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2.5rem;
        text-align: center;
        margin: -5px auto;
    }
    
    #latest-games{
        width: 75%;
        height: 90vh;
        background-image:url(ss.jpg); 
        margin: 20px auto;
        background-position:  center center;
        background-size: cover;
        background-repeat: no-repeat; 
        animation: bgchange;
        animation-delay: 1s;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        -moz-animation-name: bgchange;
        -moz-animation-delay: 1s;
        -moz-animation-duration: 20s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: ease-in;
    }

    #category{
        width: 100%;
        margin: 20px 0px;
        box-shadow: 5px 5px 5px 5px rgb(129, 136, 143);
        display: inline-block;
    
    }
    #category ul {
        list-style-type: none;
        margin: 0px;
        
    }
    
    #ac{
        text-shadow: 5px 5px 5px 5px rgb(129, 136, 143);
        font-family: 'guardians'; 
        margin-right: 5px;
        font-size: 1.8rem;
    }
    
    #category ul li{
        box-shadow: 7px 7px 7px 7px rgb(129, 136, 143);
        display: inline-block;
        border-radius: 10px;
        width: 46.5%;
        height: auto;
        margin: 2% 1.5%;
        background: whitesmoke;
        padding:5px auto;
    }
    #category ul li img{
        width: 65%;
        height: 250px;
        margin:10% 17%;
    }
    
    #category ul li span{
        display: block;  
        font-family: 'guardians'; 
        font-size: small;
        text-align: center;
    }
    
    #Buy{   
        color:white ;
        width: 70%;
        display: inline-block;
        background:rgb(71, 42, 42);
        padding : 14px;
        font-family: sans-serif;
        text-align: center;
        margin: 15px 10%;
        cursor: pointer;
        box-shadow: 5px 5px 5px rgb(129, 136, 143);
        
    }
    
    #addtocart{   
        width: 80%;
        color:white ;
        outline: none;
        border-radius: 20px;
        display: inline-block;
        background:rgba(26, 39, 116, 0.781);
        padding : 14px;
        font-family: sans-serif;
        cursor: pointer;
        text-align: center;
        margin: 10px 10%;
        box-shadow: 5px 5px 5px rgb(129, 136, 143);
    }
    
    #addtocart:focus, #Buy:focus{
    transform: scale(1.07);
    transition: .1s;
    }
    
    #About{
        text-align: center;
        width: 80%;
        padding: 5px 2%;
        margin: 10px 10%;
        height: auto;
        box-shadow: 5px 5px 5px 5px rgb(129, 136, 143);
        
    }
    #About h2{  
    font-family: 'forte';
    font-size: 40px;
    
    }
    #About p{
        font-family: sans-serif;
        line-height: 2rem;
        font-size: 1.3rem;
        font-stretch: expanded;
    }
    #About img {
        width:250px;
        display: block;
        height: 250px;
        border-radius: 50%;
        margin :0 auto;
      }
    
      #contact{
        text-align: center;
        width: 80%;
        margin: 10px 12%;
        height: auto;
        box-shadow: 5px 5px 5px 5px rgb(129, 136, 143);
    }
    .contact {  
        font-family: 'forte';
        font-size: 50px;
        
        
        }
    
    #contactp{
        font-family: sans-serif;
        font-size: 20px;
        padding: 2px 2%;
        margin-top: -50px;
    }
    
      #contact ul{
            margin-top: -5px;
            display: flex;
            justify-content: space-evenly;
            align-content: space-between;
            flex-direction: row;
            flex-wrap: wrap;
            padding: none;
            list-style-type: none;
        }
    
    #contact ul li{
        display: inline-block;
        border-radius: 50px;
        margin-bottom: 5px;
        margin-left: -4%;
        margin-right: 2%;
       padding-left: 5px;
       padding-top: 4px;
       padding-right: 4px;
       padding-bottom: 2px;
        
    }
    
    #contact ul li:hover{
            transform: scale(1.2) translateY(-5px);
            background-color: rgb(19, 35, 59);
    
            transition: .2s;
    }
    
    #contact ul li img{
        width: 50px;
        height: 50px;
    }
    

}

@media Screen and (max-width:480px){

     
    body{
        margin: 0;
        padding:0;
        width: 100%;
       background: url(images/bg1.jpg) ;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .container{
      margin:0px;
      padding:0px;
    }
    
    #header{
      width: 100%;
      padding:0px;
      margin :0px;
      height:60px
    }
    
    #header img{
        display: block;
        height:60px;
        margin : 0 auto;
        
    }
    .burger-nav{
        top:0px;
        display: block;
        position: absolute;
        position:fixed;
        height: 60px;
        width: 100%;
        background:url(images/burger4.gif) no-repeat 98% center ;
        background-color: rgba(28, 28, 31, 0.493);
        cursor: pointer;
    }

    #nav{
      
       width: 100%;
    }
    #nav ul{
        display: none;
        position:absolute;
        overflow: hidden;
        list-style-type: none;
        background-color: rgb(255, 255, 255);
        margin: 0px;
        width: 100%;
        height: 0px;
       
    }
    #nav ul li{
        display:block;
        border-bottom: 2px solid rgb(98, 97, 100);
        color: white;
        text-align: left;
        width: 100%;
        
    }
    #nav ul.open{
        width:100%;
        top: 0px;
        position: fixed;
        overflow: hidden;
        height: auto;
        display: block;
        margin-top:60px;
        animation: move .25s linear;
    
        
    }
    #nav ul li:active, #nav ul li:hover{
        border-bottom:3px solid rgb(27, 31, 36);
        border-radius: 10px;
        transform: scale(1.05);
        transition: .1s;
    
    }

    
    
    .tog{
        display:block;
        float: right; 
        cursor: pointer; 
        text-align:center;
        margin: 1.5%; 
    }
    
    .cart{
        top:0px;
        position:fixed;
        display: block;
        float: right; 
        cursor: pointer; 
        text-align:center;
        margin:0px 1%;
    }

    #modal{
        display: none;
        width: 90%;
        height: auto;
        overflow: hidden;
        position: absolute;
        position: fixed;
        background: rgb(156, 156, 156);
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        box-shadow:0px 0px 20px 0px rgb(84, 122, 156);
        border-radius: 10px;
        animation: fall .2s ease;
    }

    
.check{
    width: 100px;
    height: 80px;
    margin-top :20px;
    margin-bottom: 0px;
    margin-left: 34%;

  }

  .close{
    text-align: center;
    font-size: 22px;
    margin :10px;
    margin-left: 33%;
    cursor: pointer;
    border:1px solid black;
    display: inline-block;
    padding :7px 20px;
    border-radius: 10px;
}


#modal p{
    margin-top:20px;
    text-align: center;
    font-size :2.2rem;
    color:rgb(23, 68, 23)
}

    @keyframes fall{
        from { 
            top:0px;
            opacity: 0;
        }
        to{
            top: 0px;
            
            opacity: 1;
        }
    }
    
    #intro p{
        
        overflow: hidden;
        white-space: nowrap;
        height: auto;
        margin-top: 20%;
        font-size: 1.5rem;
        font-family: 'Comic Sans MS';
        animation: typing 3s steps(20) infinite ;    
    
    }
    
    .lr{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2.5rem;
        text-align: center;
        margin: -5px auto;
    }
    
    #latest-games{
        width: 90%;
        height: 90vh;
        background-image:url(ss.jpg); 
        margin: 20px auto;
        background-position:  center center;
        background-size: cover;
        background-repeat: no-repeat; 
        animation: bgchange;
        animation-delay: 1s;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
        -moz-animation-name: bgchange;
        -moz-animation-delay: 1s;
        -moz-animation-duration: 20s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: ease-in;
    }
    
    #category{
        width: 100%;
        margin: 20px 0px;
        box-shadow: 5px 5px 5px 5px rgb(11, 16, 22);
        display: inline-block;
    
    }
    #category ul {
        list-style-type: none;
        margin: 0px;
    }
    
    #ac{
        font-family: 'guardians'; 
        width: 80%;
        text-align: center;
        font-size: 1.3rem;
    }
    
    #category ul li{
        box-shadow: 7px 7px 7px 7px rgb(21, 36, 51);
        display: inline-block;
        border-radius: 10px;
        width: 90%;
        height: auto;
        margin: 5% -0.5%;
        background: whitesmoke;
        padding:5px auto;
    }
    #category ul li img{
        width: 65%;
        height: 220px;
        margin:10px 17%;
    }
    
    #category ul li span{
        display: block;  
        font-family: 'guardians'; 
        font-size: small;
        text-align: center;
    }
    
    #Buy{   
        color:white ;
        width: 70%;
        display: inline-block;
        background:rgb(71, 42, 42);
        padding : 14px;
        font-family: sans-serif;
        text-align: center;
        margin: 15px 10%;
        cursor: pointer;
        box-shadow: 5px 5px 5px rgb(129, 136, 143);
        
    }
    
    #addtocart{   
        width: 80%;
        color:white ;
        outline: none;
        border-radius: 20px;
        display: inline-block;
        background:rgba(26, 39, 116, 0.781);
        padding : 14px;
        font-family: sans-serif;
        cursor: pointer;
        text-align: center;
        margin: 5px 10%;
        box-shadow: 5px 5px 5px rgb(129, 136, 143);
    }
    
    #addtocart:focus, #buy:focus{
    transform: scale(1.07);
    transition: .1s;
    }
    
    #About{
        text-align: center;
        width: 92%;
        margin: 10px 2%;
        padding: 5px 2%;
        height: auto;
        box-shadow: 5px 5px 5px 5px rgb(36, 49, 61);
        
    }
    #About h2{  
    font-family: 'forte';
    font-size: 40px;
    
    }
    #About p{
        font-family: sans-serif;
        line-height: 2rem;
        font-size: 1.1rem;
        font-stretch: expanded;
    }
    #About img {
        width:250px;
        display: block;
        height: 250px;
        border-radius: 50%;
        margin :0 auto;
      }
    
      #contact{
        text-align: center;
        width: 95%;
        margin: 10px 2.5%;
        height: auto;
        box-shadow: 5px 5px 5px 5px rgb(23, 34, 44);
    }
    .contact {  
        font-family: 'forte';
        font-size: 40px;
        
        
        }
    
    #contactp{
        font-family: sans-serif;
        font-size: 18px;
        padding: 2px 2%;
        margin-top: -50px;
    }
    
      #contact ul{
            margin-top: -5px;
            display: flex;
            justify-content: space-evenly;
            align-content: space-between;
            flex-direction: row;
            flex-wrap: wrap;
            padding: none;
            list-style-type: none;
        }
    
    #contact ul li{
        display: inline-block;
        border-radius: 50px;
        margin-bottom: 5px;
        margin-left: -4%;
        margin-right: 2%;
       padding-left: 5px;
       padding-top: 4px;
       padding-right: 4px;
       padding-bottom: 2px;
        
    }
    
    #contact ul li:hover{
            transform: scale(1.2) translateY(-5px);
            transition: .2s;
    }
    
    #contact ul li img{
        margin-right:20px;
        width: 50px;
        height: 50px;
    }
    

}

@keyframes move{
    0%{
        opacity:0;
        transform:translateX(-20px)
    }
    50%{
        
        opacity:0.5;
    }
    100%{
        opacity:1;
        
    }
}


@keyframes typing {
    from{
        width: 0%;
    }
    to{
        width: 100%;
    }
}
@-moz-keyframes bgchange{
    0%{ -moz-background-image: url(images/sd.jpeg);
    }
20%{ -moz-background-image: url(images/tlou.jpeg);
    }
40%{ -moz-background-image: url(images/lostp.jpeg);
       }
60%{ -moz-background-image: url(images/infamous.jpeg);
    }
80%{ -moz-background-image: url(images/fifa.jpeg);
    }
100%{ -moz-background-image: url(images/watchdogs.jpeg);
    }
}
@keyframes bgchange{
    0%{ background-image: url(images/sd.jpeg);
          }
      20%{ background-image: url(images/tlou.jpeg);
          }
      40%{ background-image: url(images/lostp.jpeg);
             }
      60%{ background-image: url(images/infamous.jpeg);
          }
      80%{ background-image: url(images/fifa.jpeg);
          }
      100%{ background-image: url(images/watchdogs.jpeg);
          }
   }