/* Imorting Differents fonts form google fonts */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Pacifico&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Great+Vibes&family=Pacifico&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Great+Vibes&family=Pacifico&family=Playfair+Display:ital@1&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Great+Vibes&family=Pacifico&family=Playfair+Display:ital@0;1&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Gochi+Hand&family=Great+Vibes&family=Pacifico&family=Playfair+Display:ital@0;1&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&family=Dancing+Script&family=Gochi+Hand&family=Great+Vibes&family=Pacifico&family=Playfair+Display:ital@0;1&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Cormorant+Garamond:ital,wght@1,300&family=Dancing+Script&family=Gochi+Hand&family=Great+Vibes&family=Pacifico&family=Playfair+Display:ital@0;1&family=Poppins:ital,wght@0,200;1,200&family=Roboto:wght@100&family=Rubik+Bubbles&family=Sofia&display=swap');

/* making body align with page by giving margin padding as 0 */

body{
margin: 0px;
padding: 0px;
background-image: url("./assets/3d-render-tree-landscape-against-fictional-planet-night-sky.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: white;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo{
    width: 9vw;
}

#userlogo{
    width: 3vw;
    background-color: black;
}

.navdivs{
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding-left: 2vw;
    padding-right: 2vw;
}

#name{
    font-size: 3vw;
    padding-left: 2vw;
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    color:  #D3D3D3;
}

nav a{
    color: white;
    text-decoration: none;
    padding: 1vw;
    font-size: 1.5vw;
    font-family: 'Dancing Script', cursive;
    font-weight: 500;
}

nav a:hover{
    color: rgb(16, 11, 6);
    background-color: white;
    transition-duration: 1.5s;
    transform: scale(1.1);
    border-radius: 8vw;
}

nav a:not(:hover){
    transition-duration: 1.2s;
}

#maincontent{
    display: grid;
    grid-template-columns: 45% 55%;
    text-align: center;
}
#searchdiv {
    color: #FFFACD ;
    font-family: 'Pacifico', cursive;
    padding-left: 6.3vw;
    padding-top: 0.4vw;
    font-weight: 500;
}

/* adding sliding keyframes */

@keyframes slideInAnimation {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
#mainContent{
    font-size: 5.5vw;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInAnimation 2s ease forwards;
}
#smallContent{
    margin-top: 2vw;
    font-size: 1.8vw;
    font-family: 'Amatic SC', cursive;
    color:   #D3D3D3;
    font-weight: 900;
    text-align: center;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInAnimation 2s ease forwards;
}

#searchbar{
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInAnimation 2s ease forwards;
}

#search{
    width: 20vw;
    height: 2vw;
    padding-right: 2vw;
    margin-right: 7vw;
    font-size: 2vw;
    background-color: white;
    border-radius: 20px;
    margin-top:2vw ;
    padding: 0.5vw;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    border: 2px solid white;
    font-weight: 700;
}

#randomimgdiv{
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInAnimation 2s ease forwards;
}

#innerone{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#randomimg{
    width: 23vw;
    height: 22vw;
    min-width: 210px;
    min-height: 190px;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

#randomimg:hover{
    padding: 1.2vw;
    background-color:  #D3D3D3;;
    transition-duration: 1.2s;
    transform: scale(1.1);
}
#randomimg:not(:hover){
    transition-duration: 1.2s;
}

#randomname{
    font-family: 'Playfair Display', serif;
    font-size: 2vw;
    font-weight: 500;
}

#randomname:hover{
    background-color: white;
    color: black;
    padding: 0.5vw;
    transition-duration: 1.5s;
    transform: scale(1.3);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
#randomname:not(:hover){
    transition-duration: 1.2s;
}

#changetaste{
    background-color: #111010;
    color:white;
    font-size: 1.4vw;
    padding: 0.4vw;
    margin-top: 1vw;
    border-radius: 15px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}

#changetaste:hover{
    background-color:white;
    color: black;
    transition-duration: 1.2s;
    transform: scale(1.1);
}
#changetaste:not(:hover){
    transition-duration: 1.2s;
}

#ingredients_box{
    display: none;
    position: fixed;
    top: 2vw;
    left: 12vw;
    width: 78vw;
    height: 43vw;
    background-color: rgb(15, 16, 16);
    z-index: 2;
    flex-direction: column;
}

#distype {
    overflow: hidden;
    color: bisque;
}

#distype p {
    animation: scroll 25s linear infinite;
}

/* making keyframe for our scroll transition */

@keyframes scroll {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

#youtube{
    margin: 1vw;
    border-radius: 40px;
}

#ingredients{
    height: 30vw;
    background-color: black;
     width: 20vw;
     overflow: scroll;
     display: inline-block;
     margin: 1vw;
    }

#ingredients div{
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#outcontent{
    display: flex;
    align-items: center;
    justify-content: center;
}

#youtube img{
    width: 18vw;
    height: 13vw;
}

#makingprocess{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:flex-start;
    padding: 3vw;
    font-size: 1vw;
    overflow: scroll;
    height: 25vw;
}

/* designing our scroll bar for makingprocessbox */

#makingprocess::-webkit-scrollbar {
    width: 12px;
    border-radius: 30px;
}

#makingprocess::-webkit-scrollbar-track {
    background-color: #0d0b0b;
}

#makingprocess::-webkit-scrollbar-thumb {
    background-color: #ffffff; 
    border-radius: 10px;
    border: 3px solid #0c0c0c;
}

#makingprocess::-webkit-scrollbar-thumb:hover {
    background-color: #000000; 
}
#makingprocess{
    overflow-x: hidden; 
    overflow-y: auto;  
    border-radius: 30px 0px 0px 30px;
}

#youtube{
    font-size: 1.6vw;
}

iframe{
    width: 30vw;
    height: 15vw;
    max-width: 100%;
    max-height: 100%;
}

#inghead{
    font-size: 2.3vw;
}
#ingredients{
    font-size: 1vw;
}

#ingredients img{
    padding: 0.2vw;
    margin: 1vw;
}

#youtube img{
    margin-bottom: 1vw;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
#youtube img:hover{
    transition-duration: 1.5s;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}
#youtube img:not(:hover){
    transition-duration: 1.2s;
}

#youtube iframe{
    margin-top: 1vw;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

#youtube iframe:hover{
    transition-duration: 1.5s;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}
#youtube iframe:not(:hover){
    transition-duration: 1.2s;
}

#dishname{
    display: flex;
    font-size: 1.1vw;
    align-items: center;
    justify-content: center;
}
#cross{
    font-size: 1.5vw;
    font-weight: 700;
    position: absolute;
    margin-top: 2vw;
    margin-left: 2vw;
}

#para{
    font-size: 0.9vw;
    font-family: 'Pacifico', cursive;
    font-weight:100;
    animation: glow 1s ease-in-out infinite alternate;
    
}

#makingprocess h2{
    color: rgb(245, 226, 54);

}

/* Adding Glowing keyframe from w3 school but its properties are changed */

@keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
  }

#youtube{
    margin-top: 1.1vw;
}

#dishname{
    font-family: 'Gochi Hand', cursive;
    color:   #ffffff;
    animation: glow 1s ease-in-out infinite alternate;
    font-size: 1.5vw;
}

#cross{
    font-family: 'Cormorant Garamond', serif;
    padding:0.5vw ;
    border-radius: 20px;
    background-color: white;
    color: #111010;
}
#cross:hover{
    transition-duration: 1.5s;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

#cross:not(:hover){
    transition-duration: 1.2s;
}

#ingredients div{
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

#ingredients{
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    border-radius: 40px;
}

#ingredients div:hover{
    transition-duration: 1.2s;
    transform: scale(1.2);
    background-color: white;
    color: black;
}
#ingredients div:not(:hover){
    transition-duration: 0.5s;
}


/* Styling scrollbar for ingredients and also for body */

#ingredients::-webkit-scrollbar {
    width: 12px;
    border-radius: 30px;
}

#ingredients::-webkit-scrollbar-track {
    background-color: #0d0b0b;
}

#ingredients::-webkit-scrollbar-thumb {
    background-color: #ffffff; 
    border-radius: 10px;
    border: 3px solid #0c0c0c;
}

#ingredients::-webkit-scrollbar-thumb:hover {
    background-color: #6f6e6e; 
}
#ingredients{
    overflow-x: hidden; 
    overflow-y: auto;  
    border-radius: 30px 0px 0px 30px;
}

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

body::-webkit-scrollbar-thumb {
    background-color: #fefcfc; 
    border-radius: 6px; 
}

body::-webkit-scrollbar-track {
    background-color: #090909; 
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #807d7d; 
}


#ingredients_box{
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    background-color: rgb(4, 3, 3);
}

#ingredients_box:hover{
    transition-duration: 1.5s;
    transform: scale(0.9);
}

#ingredients_box:not(:hover){
    transition-duration: 1.2s;
}

#youtube {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.4vw;
}

#inghead{
    font-family: 'Playfair Display', serif;
}

#makingprocess h2{
    font-family: 'Dancing Script', cursive;
    animation: floating2 3s ease-in-out infinite;
    padding-bottom: 1vw;
    font-size: 1.8vw;
}

#makingprocess {
    text-align: center;
    font-family: 'Caveat', cursive;
    animation: floating1 2s ease-in-out infinite;
    font-size: 0.9vw;
    color: #ebeae0;
}
#distype p{
    font-family: 'Playfair Display', serif;
}
#dishname{
    font-family: 'Dancing Script', cursive;
}

#distype{
    padding: 20px 0px;
}

/*  adding floating anminated transitions for visual effects */
@keyframes floating2{
    0% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(15px);
    }
    100%{
        transform: translateY(0);
    }
  }

  @keyframes floating1{
    0% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(8px);
    }
    100%{
        transform: translateY(0);
    }
  }

#inghead{
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 1.9;
}

#searchbar img{
    width: 2vw;
    height: 2vw;
    border-radius: 20px;
    padding: 10px;
    background-color: #000000;
}
#searchbar{
    display: flex;
    align-items: center;
    justify-content: center;
}
#searchbar div{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2vw;
}

#canvasone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Send the canvas to the background */
    z-index: -1; 
}

#trial{
    display: none;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 3vw ;
}

#trial div img{
    width: 18vw;
    min-width: 180px;
    height: 16vw;
    min-height: 160px;
}

#trial div{
    padding: 1.4vw;
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    margin: 3vw;
    background-color: black;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(255, 197, 197, 0.8);
    animation: floating2 3s ease-in-out infinite;
}
#trial div img{
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

#trial div img:hover{
    transition-duration: 1.2s;
    transform: scale(1.1);
}
#trial div img:not(:hover){
    transition-duration: 1.2s;
}

#trial h3:hover{
    transition-duration: 1.2s;
    transform: scale(1.1);
    padding: 10px 0px;
    border-radius: 20px;
    background-color: white;
    color: #000000;
    box-shadow: 0 0 20px rgba(252, 251, 251, 0.8);
}

#trial h3:not(:hover){
    transition-duration: 1.2s;
}

#trial h3{
    width: 18vw;
    text-align: center;
}

#trial{
    font-size: 1.8vw;
    font-family: 'Cormorant Garamond', serif;
}

#dishheading{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4vw;
    font-size: 4vw;
    animation: glow 1s ease-in-out infinite alternate;
    font-family: 'Gochi Hand', cursive;
}

/* Adding media query below 500px because above that its already responsive */

@media (max-width:500px){
    #maincontent{
        grid-template-columns: 1fr   
     }
     nav a{
        font-size: 3vw;
     }
    #name{
        font-size: 5vw;
    }
    #mainContent{
        font-size: 11vw;
    }
    #smallContent{
        font-size: 4vw;
    }
    #searchbar img{
        width: 4vw;
        height: 4vw;
    }
    #searchbar input{
        width: 25vw;
        height: 6vw;
        font-size: 2.5vw;
    }
   #youtube img{
    width: 35vw;
    height: 25vw;
   }
   #youtube iframe{
    height: 25vw;
    width: 35vw;
   }
   #outcontent{
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
   }
   #ingredients{
    border-radius: 5px;
   }
   #ingredients{
    width: 30vw;
    height: 30vw;
   }
   #ingredients_box{
    height: 190vw;
   }
   #ingredients_box h2{
    font-size: 5.5vw;
   }
   #cross{
    top: 4.4vw;
    left: 2.5vw;
    font-size: 3.3vw;
   }
   #para{
    font-size: 2.8vw;
   }
   #makingprocess{
    font-size: 2.5vw;
    height: 40vw;
   }
   #ingredients div{
    font-size: 2.8vw;
    text-align: center;
   }
   #ingredients{
    margin: 8vw;
    width: 40vw;
    height: 40vw;
   }
   #randomimg{
    width: 45vw;
    height: 35vw;
   }
   #changetaste{
    margin-top: 5vw;
    padding: 2vw;
    font-size: 5vw;
   }
   #randomname{
    font-size: 7vw;
   }
   #dishname h2{
    font-size: 6vw;
   }
   #changetaste{
    margin-bottom: 10vw;
   }
   #smallContent{
    margin-right: 5vw;
   }
   #back{
    font-size: 3vw;
   }
   #dishname h2{
    text-align: center;
   }
}


@media (max-width:800px) and (min-width:500px){
    #maincontent{
        grid-template-columns: 1fr   
     }
     #ingredients_box{
        height: 55vw;
        margin-top: 10vw;
     }
}


#mainContent{
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer{
    background-color:rgb(0, 0, 0,0.8);
    border-radius: 10vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2vw;
}

#mydetails img{
    width: 10vw;
    height: 10vw;
}

#mydetails{
    display: flex;
    align-items: center;
    justify-content: center;
}

#divcredits{
    display: flex;
    align-items:center ;
    justify-content: flex-end;
    margin-right: 5vw;
}

#outerfooter{
    width: 100%;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInAnimation 2s ease forwards;
}

.foo{
    color: beige;
    font-family: 'Cormorant Garamond', serif;
}

/* adding mediaquery to let our footer attached to the bottom */

@media (max-width:1300px){
    #outerfooter{
        position:fixed;
        bottom: 0;
        left: 0;
    }
}

#para{
    text-align: center;
}