/*-----------body-------------*/
body{
    background-image        : url(images/background.jpeg);
    background-size         : cover;
    background-repeat       : no-repeat;
    margin: 0;
}
a{
    text-decoration         : none;
}
/*----------- Menu-bar-------------*/
#menu{
    width                   :100%;
    height                  :40px;
    background-color        :rgb(53, 114, 228);
    padding-top             : 16px;
    display                 : flex;
    align-items             : center;
}

#menu a{
    color                   :whitesmoke;
    font-family             : Helvetica, sans-serif;
    font-size               : 18px;
    text-decoration         :none;
    font-weight             : bolder;
    padding-bottom          : 10px;
    padding-left            : 20px;
    padding-right           : 20px;
}

#menu a:hover{
     color                  :aqua;
     
}

button {
    background-color        : darkblue;
    color                   : aliceblue;
    cursor                  : pointer;
    font-weight             : bolder;
    font-size               : larger;
    padding                 : 5px 10px;
    border-radius           : 10px;
    width                   : 115px;
    height                  : 45px;
    margin-left             : 10px; 
}
button:hover{
    color                   : darkblue;
    background-color        : aquamarine;
}

/*----------- header-------------*/
#header{
    display                 : block;
    margin                  : auto;
    padding-top             : 0px;
    
}


/*-----------Product item-------------*/
.product {
    display                 : flex;
    flex-wrap               : wrap;
    justify-content         : center;
}

.product a {
    flex                    : 0 0 auto; 
    margin                  : 10px; 
}

.product img {
    max-width               : 100%;
    height                  : auto;
    border                  : 5px solid darkblue;
    border-style            : groove;
    border-radius           : 30px;
    padding                 : 0px;
    margin-bottom           : 20px;
    display                 : inline-block;
    max-height              : 230px;
}
/*---------store-info------*/
#store-info{
    display                 : flex;
}
/*----------logo----*/
    #logo {
        width               : 108px; 
        height              : 100%; 
        padding             : 0px;
        margin-top          : 120px;
        margin-left         : 60px ;
        border              : 5px solid;
        border-color        : darkblue;
        border-style        : groove;
        display             : block;
        overflow            : hidden; 
    }
    #logo img {
        max-width           : 100%; 
        max-height          : 100%;
        display             : block; 
        object-fit          : contain;
    }
    
    
/*---------------about-store------------*/

#store-about{
    text-decoration         : none;
    background              : rgba(255, 255, 255, 0.8);
    border                  : 5px solid darkblue;
    border-style            : groove;
    width                   : 45%;
    height                  : auto;
    display                 : inline-block;
    margin-left             :160px;
    margin-top              : 120px;
    padding                 : 10px; 
    
}

h1{
    text-align              : center;
    font-family             : Arial, Helvetica, sans-serif;
    margin                  : 0px;
    color                   : darkblue;
}
p{
    text-align              : center;
    margin                  : 5px;
    font-family             : Arial, Helvetica, sans-serif;
    font-size               : 16px;
}


#image-container {
    max-width               : 100%;
    margin-top              : 100px;
    margin-left             : 10px;
    display                 : flex;
    justify-content         : center;
    flex-wrap               :wrap;
    
}

#image-container img {
    border                  : 5px solid; 
    border-style            : groove;
    border-color            : darkblue;
    margin                  : 5px;
    max-height              : 140px; 

}

/*---------------about-page----------*/
#about{
    background              : rgba(255, 255, 255, 0.8);
    border                  : 5px solid darkblue;
    border-style            : groove;
    width                   : 45%;
    height                  : auto;
    display                 : inline-block;
    margin-left             :280px;
    margin-top              : 90px;
    margin-right            : 20px;
}

#scroll-container {
    background-color        : darkblue;
    overflow                : auto;
    white-space             : nowrap;
    padding                 : 10px;
    margin-top              : 40px;
  }
  
 #scroll-container img {
    padding                 : 10px;
  }

/*------------Contact-info----------*/
#contact {
    background-color        : rgba(255, 255, 255, .8);
    border                  : 5px solid black;
    border-radius           : 2%;
    border-style            : groove;
    width                   : 45%;
    height                  : auto;
    margin                  : 100px auto;
    padding                 : 10px;
}

#contact img {
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    width                   : 100%;
    height                  : auto;
    margin                  : 0 auto; 
}

input {
    width                   : 100%; 
    height                  : 25px;
    margin                  : 12px 0;
    border                  : 1px solid darkblue;
}

textarea {
    width                   : 100%; 
    height                  : 50px;
    margin                  : 12px 0;
    border                  : 1px solid darkblue;
}

.submit {
    background-color        : darkblue;
    color                   : white;
    padding                 : 10px 20px;
    border                  : none;
    border-radius           : 5px;
    cursor                  : pointer;
    font-size               : 16px;
    margin-top              : 20px; 
    margin-left             : calc(50% - 50px); 
}

/*--------------store-page----------------------*/
.shop {
    margin-bottom           : 20px;
}

.shop h2 {
    text-align              : center;
    margin-bottom           : 10px;
    background-color        : white; 
    padding                 : 10px; 
    border-radius           : 5px; 
    border-style            : groove;
    border-color            : darkblue;
    width                   : 45%;
    margin-left             : 25%;
}

.image-container {
    display                 : flex;
    justify-content         : space-around;
}

.image-container a {
    text-decoration         : none;
    position                : relative;
    background              : rgba(255, 255, 255, 0.8);
    width                   : 45%; 
    height                  : 150px; 
    display                 : inline-block;
    padding                 : 1px; 
    border-radius           : 5px; 
    border-style            : groove;
    border-color            : darkblue;

}

.image-container img {
    max-width               : 100%;
    max-height              : 100%;
    display                 : block;
    margin                  : 0 auto;
}


/*-----------Movie-page---------------*/
#movie-container {
    background-color        : rgba(255, 255, 255, .8) ;
    border                  : 5px solid darkblue;
    border-radius           : 2%;
    border-style            : groove;
    width                   : 80%;
    height                  : auto;
    margin                  : 100px auto;
    margin-top              : 100px;
    padding                 : 10px;
    display                 : block;
}
.movie{
    color                   : darkblue;
    margin                  : 0;
    text-decoration         :underline;
}

#movie-box {
    display                 : flex;
    align-items             : center;
    margin                  : 20px;
}

#movie-box img {
    width                   : 200px;
    height                  : auto;
    margin-right            : 20px;
}

.movie-info {
    flex                    : 1;
}
.movie-info a {
    text-decoration         : none;
}
.movie-info h2 {
    margin                  : 0;
    color                   : darkblue;
}

.movie-info p {
    margin                  : 0;
    color                   :darkblue;
}

#box{
    display                 : flex;
    justify-content         : center; 
    align-items             : center; 
    margin-top              : 20px;
}
#info{
    text-align              : left;
    margin: 0;
}
#info p{
    text-align              : left;
}