:root {
    --bg-main: #CD1212;
    --text-main: #CD1212;
    --font-main: "Amatic SC", sans-serif;
}

body::-webkit-scrollbar {
  width: 10px;  
}


body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: #CD1212;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #e90a0a;
}


.bg-main {
    background-color: var(--bg-main);
}

.text-main {
    color: var(--text-main);
}

.font-main {
    font-family: var(--font-main);
}

body {
    background-color: #EDEDED;
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.title
{
    font-family: var(--font-main);
    color: black;
    font-size: 60px;
}


p {
    color: rgb(108, 117, 125);
}

.logo::after {
    content: ".";
    color: #CD1212;
    font-size: larger;
}

.nav-links .home::after {
    content: "";
    background-color: #CD1212;
    width: 46px;
    height: 1px;

    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    border-radius: 20px;
}
.nav-links a
{
    color: gray;
    transition: .2s;
}

nav .nav-links ul li a:hover
{
    color: black;
}

.caption h1 {
    font-size: 70px;
}

.header-img {
    filter: drop-shadow(1px 0px 10px black);
}

.header-img img:hover {
    transition: all 1s;
    animation-name: header-img;
    animation-duration: .1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
.video-icon
{
    position: relative;
    width: 5px;
    border: 20px white solid;
    border-radius: 50%;
    border-color: white white white #CD1212;
    display: inline-block;
    transition: all .5s;
}
.video-icon::after
{
    display: inline-block;
    width: 0;
    content: "";
    border: 7px solid black;
    border-color:transparent black black transparent ;
    position: absolute;
    right: 0;
    transform: rotate(-45deg) translateY(-1px) translatex(10px);
    transition: all .5s;
}

.caption-icon
{
    
    position: absolute;
    
    bottom: 15px;
    left: 43px;
}
.video-button a
{
    margin-bottom: 5px;
    color: black;
    text-decoration: none;
    transition: all .5s;
}

.video-button:hover a
{
    color: #CD1212;
}
.video-button:hover .video-icon::after
{
    border-color:transparent #CD1212 #CD1212 transparent ;
}
.video-button:hover .video-icon
{
   border-color: white white white black;
}

@keyframes header-img {
    0% {
        transform: translate(2px, 4px) rotate(0.3deg);
    }

    100% {
        transform: translate(-4px, -2px) rotate(-.5deg);
    }
}

.chefs-links {
    background-color: #ffffff4d;
    transform: translateX(200px);
    transition: all .6s;

}

.chefs-links img
{
    border-radius: 50%;
    transition: all 1s;
}

.chefs-links img:hover
{
    background-color: white;
}

.inner:hover .chefs-links {

    transform: translateX(0px);

}

.chef-item {
    transition: all .5s;
}

.chef-item:hover {

    transform: scale(1.06);

}

.btn:hover {
    background-color: #e90a0a;
}




input
{
    border: 1px #EDEDED solid;
    outline: none;
    cursor: pointer;

}
textarea
{
    border: 1px #EDEDED solid;
    outline: none;
    cursor: pointer;

}
label
{
        transition: all .5s;
        color: gray;

}
input:focus 
{
    border: 2px #CD1212 solid;
    border-radius: 10px;
}
 input:focus ~ label
{
    transform: translateY(-16px);
    color: #CD1212;
    background-color: white;
    padding: 1px;
}

.fotter-links img
{
    border-radius: 50%;
    transition: all 1s;
}

.fotter-links img:hover
{
    background-color: #CD1212;
}

footer
{
    background-image: url(../images/textured-metal-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery-imgs
{
    display: grid;
    gap: 20px;
    grid-template-rows: repeat(3,350px);
    grid-template-areas:
    "pizza pizza pizza pizza steak steak steak steak  burger burger burger burger"
    "pizzs pizzs pizzs pizzs steak steak steak steak  fried fried fried fried"
    "pizzs pizzs pizzs pizzs omelet omelet omelet omelet kofta kofta kofta kofta"
    
    ;
}

.gallery-imgs picture
{
    overflow: hidden;
    border-radius: 15px;
}
.gallery-imgs img
{
    width: 100%;
    height: 100%;
    transition: all 1s;
    
}
.pizza
{
    grid-area: pizza;
}
.burger
{
    grid-area: burger;
}
.steak
{
    grid-area: steak;
}
.pizza-slices
{
    grid-area: pizzs;
}
.omelette
{
    grid-area: omelet;
}
.fried
{
    grid-area: fried;
}
.kofta
{
    grid-area: kofta;
}

.gallery-imgs .layer
{
    background-color: rgba(0, 0, 0, 0.566);
    transform: translateY(1000px);
    transition: all .5s;
    
}
.gallery-imgs p
{
    color: white;
    
}
.gallery-imgs picture:hover .layer
{
    transform: translateY(0);

}
.gallery-imgs picture:hover img
{
    transform: scale(1.1);

}




@media (max-width: 991px) {
    
    .gallery-imgs
{
    display: grid;
    gap: 10px;
    grid-template-rows: repeat(4,180px);
    grid-template-areas:
    "pizza pizza pizza pizza  steak steak steak steak "
    "burger burger burger burger steak steak steak steak"
    "pizzs pizzs pizzs pizzs steak steak steak steak"
    "pizzs pizzs pizzs pizzs fried fried fried fried"
    "pizzs pizzs pizzs pizzs kofta kofta kofta kofta"
    "omelet omelet omelet omelet kofta kofta kofta kofta"
    
    ;
}
}
.home
{
    height: 100vh;
}
@media (max-width:640px) {
    
    .nav-links
    {
        display: none;
    }
    
    .gallery-imgs
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.gallery-imgs picture
{
    width: 100%;

}
.gallery-imgs picture img
{
    padding: 20px;
}
.home
{
    height: auto;
}
.chef-item:hover {

    transform: scale(1);

}

}