*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}

.whole{
    background-color: aliceblue;
}


html{
    scroll-behavior: smooth;
}
.whole *::selection {
  color: white;
  background-color: #fa6533;
}

html {scroll-behavior: smooth;}



.logo{
    
    justify-content: center;
    padding: 10px;
    padding-top: 12px;
}

header{
    background-color: #020a1d;
    height: 390px;
    max-height: auto;
    display: block;
}


.wd{
    text-align: center;
    color: #fa6533;
    font-size:30px; 
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px  1px 0 black, 2px  2px 0 black;
}

.yd{
    font-size:40px; 
    text-align: center;
    color: yellow;
     text-shadow: 1px 1px 3px #f97e54;
}


.headp{
    border: 1px solid #000;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    background-color: #fa6533;
    text-align: center;
}


hr{
    background-color:#fa6533;
    height: 7px;
}




.menu{
    
    display: flex;
    flex-wrap: wrap;
    height: 25px;
    
}


.menu p{
    background-color: antiquewhite;
    flex: 1 0 100px;
    display: flex;
    text-align: center;
    font-size: 15px;
    
}


.menu p a{
    background-color: #f4cba7;
    color: black;
    text-decoration: none;
    flex: 1 1 100%;
    padding: 20px,
}



.menu p a:hover,
.menu p a:focus,
.menu p a:active{    
    background-color:#fa6533 ;
}





.footcol {
    display: inline-block;
    padding: .08rem 0.08rem;
    margin: 3px;
    margin-top: 2px;
    text-decoration: none;
    font-weight: bold;
    color: #140201;
    background-color: #f4cba7;
    border: .25rem solid #f4cba7;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
}
.footcol:hover{
    background-color: #fa6533;
    padding: 5px;
}



.btn{margin-top: 15px ;}
.btnc{margin-top: 7px ;}
.btnm{margin-top: 8px ;}
.btnq{margin-top: 9px ;}



footer{
    background-color: #020a1d;
    height: 180px;
    padding: 0.9rem;
}
.navfoot{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


img{
    width: 100%;
    max-width: 300px;
    height: 180px;
    margin: 10px;
    border: solid 2px black;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.photo{
    background-color: #ffffff;
    /*
    width: 100%;
    max-width: 390px; 
    */
    max-width: 100%;
    width: 390px;
    height: auto;
    /*height: 480px;*/
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    
    }



.custom,
.merch,
.fast
{
    background-color: #ffffff;
    max-width: 100%;
    width: 390px; 
    /*height: 280px;*/
    height: auto;
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    
    }

h1{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

p {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  
  font-style: 2px;
  font-variation-settings:
    "wdth" 100;
}





/*_______________________________________________________________________________________________________________*/
/*medium screen*/


@media (min-width: 601px) and (max-width: 1024px) {
    header{
    background-color: #020a1d;
    /*height: 350px;*/
    height: auto;
    }
    
img{
    max-width: 100%;
    width: 300px;
    height: 180px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.photo{
    background-color: #ffffff;
    max-width: 100%;
    width: 600px; 
    /*height: 380px;*/
    height: auto;
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    
    }
    
.custom{
    background-color: #ffffff;
    max-width: 100%;
    width: 600px; 
    /*height: 180px;*/
    height: auto;
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 0.9rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    
    }
    
.merch, .fast{
    background-color: #ffffff;
    max-width: 100%;
    width: 310px; 
    height: auto;
    /*height: 270px;*/
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    
    }

    
    
.merch-fast-container
{
    
    max-width: 100%; 
    width: 700px;
    /*height: 330px;*/
    height: auto;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 10px;
    }
    
    
    header{ height: 330px;}
    
    .headp{
    border: 1px solid #000;
    width: 700px;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    background-color: #fa6533;
    display: block;
    margin-right: auto;
    margin-left: auto;
        text-align: center;
}
    
    .wd{
    text-align: center;
    color: azure;
    font-size:30px; 
}
    .yd{
    text-align: center;
    color: yellow;
    font-size:35px; 
    
    }
    
    p{
        font-size: 13px;
    }
    .btn{margin-top:20px }
    .btnc{margin-top: 15px;}
    .btnm{margin-top: 30px;}
    .btnq{margin-top: 13px;}
    
    
    footer{
        height: 60px;
    }
    
    .navfoot{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    }
    
}




/*_______________________________________________________________________________________________________________*/
@media  (min-width: 1025px){
    header{
    background-color: #020a1d;
    /*height: 350px;*/
    height: auto;
    }
    
    .photo-custom-container{ 
    max-width: 100%;
    /*height: 330px;*/
    height: auto;
    margin-bottom: 1.5rem;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 10px;   
    }
    
    
    .large{
    padding: 0.5rem;
    margin: 1.5rem auto;
    display: flex;
    flex-direction: row;      
    justify-content: space-between;
    flex-wrap: wrap;
    height: 200px;
    margin-bottom: 5px;
    
    
    
}

.large img{
    width: 210px;
    height: 135px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    margin-left: 10px;       
    object-fit: cover;
}

.large p{
    flex: 1;                 
    margin-right: 10px;
}
        
    

    
    .photo{
    background-color: #ffffff;
    width: 550px; 
    max-width: 100%;
    /*height: 310px;*/
    height: auto; 
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    display: inline-block;
    }
    
    .custom{
    background-color: #ffffff;
    width: 310px; 
    max-width: 100%;
    height: 310px;
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    }
    
    
    
    .merch-fast-container{
    max-width: 100%;
    width: 1000px;
    height: 330px;
    max-height: auto;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 10px;
    }
    
    
    
    .merch{
    background-color: #ffffff;
    width: 310px; 
    max-width: 100%;
    /*height: 270px;*/
    height: auto;
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
    }
    
    
    .fast{
    background-color: #ffffff;
    width: 550px; 
    max-width: 100%;
    /*height: 270px;*/
    height: auto;
    border: 1px solid #000;
    padding-top: 1px;
    padding: 0.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #300805;
        
    }
    
    header{ height: 280px;}
    
    
    .wdyd {
    text-align: center;   
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
    .wd{
        display: inline-block; 
        font-size: 35px;
    }
    .yd{
        display: inline-block; 
        font-size: 45px;
    }
    
    .headp{
    border: 1px solid #000;
    width: 1000px;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    background-color: #fa6533;
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
    
    p{
        font-size: 14px;
    }
    
    .btn{margin-top:10px }
    .btnc{margin-top: 20px;}
    .btnm{margin-top: 5px;}
    .btnq{margin-top: 65px;}
    
    
    footer{
        height: 70px;
    }
    
    .navfoot{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    }
    
    
    .pc{
        margin-top: 20px;
    }
    
    .pq{
        margin-top: 15px;
    }
    
    
    
    
    
}