html {
    scroll-behavior: smooth;
}
body {
    color: rgb(190, 59, 26);
    margin: 0;
    font-size: 20px;
    background-size: 155px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    cursor:url(graphics/cursors/cursor.cur),auto;
    position: relative;
    min-height: 100vh;
}
/**graphics/bg/Figures_on_the_shore_before_Rabat_Morocco.jpg background-color: beige;**/
/**grids**/
.grid-container {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(340px, 2fr) minmax(0px, 1fr);
    gap: 0px;
    padding-bottom: 4.2rem;
    min-height: 455px;
}
.grid-title {
    display: grid;
    grid-template-columns: 40px minmax(140px, 450px) 40px;
    gap: 0px;
    align-items: center;
    justify-content: center;
}
.grid-title:hover {
    transform: scale(1.1);
    animation: myAnim 2s ease 0s normal forwards;
    
}
.sides {
    
    border: 10px;
    border-radius: 10px;
}    
.grid-container > div.middle {
    text-align: left;
    padding: 0 20px 0 20px;
}
.middle {
    color: black;
    border: 2px;
    border-color: black;
}
header, #footer {
    text-align: center;
    font-size: 1em;
    width: 100%;
}
header { 
    border-bottom: 1px solid red;
    padding-bottom: 3px;
    padding-top: 3px; 
}
#footer {
    border-top: 1px solid red;
    padding-bottom: 10px;
    position: absolute;
    bottom: 0;
    height: 3.5rem;
}
.ingredients {
    display:grid;
    grid-template-columns: minmax(120px, 250px) minmax(120px, 250px) minmax(120px, 250px);
    gap: 0;
    margin-top: 0;
}
.recipe {
    display: grid;
    
    grid-template-columns: 100%;
    margin: 20px 0 20px 0;
    border: 2px solid rgb(15, 14, 8);
    border-radius: 5px;
    background-color: rgba(253, 234, 156, 0.212);
    padding: 5px;
}
.heading {
    text-align: center;
    font-size: 1.75em;
}
header.night, #footer.night {
    font-family: serif;
}

/**text and images**/
h1, h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(28, 28, 28);
    text-align: center;
    margin-top: 25px;
    margin-bottom: 5px;
}
h1 {
    font-size: 3.00em;
    
}
h2 {
    font-size: 2.0em;
}
h3 {
    margin-top: 0;
    color: rgb(116, 28, 2);
    margin-bottom: 0;
}
h4 {
    margin: 0;
    font-size: 0.75em;
}
p {
    line-height: 1.6;
    color: black;
    font-size: 0.85em;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: sans-serif;
}
p.ingrtitle {
    margin-bottom: 0;
    font-weight: bold;
    line-height: 1;
}
ul {
    margin: 0;
}
li {
    font-size: 1em;
}
a {
    text-decoration: none;
    color: rgb(190, 59, 26);
}
a:hover, a#active, .incr {
    cursor: url(graphics/cursors/cursorh.cur),auto;
}
a.active {speak-as: f;
}
img {
    max-width: 100%;
    
}
img:hover,
.button img:hover {
    transform: scale(1.1);
    animation: myAnim 2s ease 0s normal forwards;
    
}
@keyframes filter-animation {
    0% {
      filter: hue-rotate(0deg);
    } 
   
    
    100% {
        filter: hue-rotate(640deg);
    }
}



body.light-theme {
    --bkgimg: url(https://i.imgur.com/Wr2OJqo.png);
    /*background-image:
        url(graphics/gif/output2.png);*/
    background-size: 20%;
    background-repeat: repeat;
    --bkgclr: beige;
    --erbkgclr: rgb(238, 238, 218);
    --mbkgclr: rgba(202, 202, 169, 0.678);
    --aclr: rgb(119, 24, 0);
}



body {
    --bkgimg: url(https://i.imgur.com/Wr2OJqo.png), url(graphics/bg/16825.png);
    background-size: 20%, 10%;
    background-repeat: repeat;
    --bkgclr: rgb(124, 124, 111);
    --erbkgclr: rgb(37, 37, 31);
    --mbkgclr: rgba(184, 168, 144, 0.836);
    --aclr: rgb(223, 124, 100);
}

body.silly-theme {
    --bkgimg: url(https://i.imgur.com/Wr2OJqo.png), url(https://i.imgur.com/Wr2OJqo.png), url(https://i.imgur.com/Wr2OJqo.png), url(https://i.imgur.com/Wr2OJqo.png), url(https://i.imgur.com/Wr2OJqo.png)!important;
    background-size: 40%, 20%, 10%, 5%, 2.5%!important;
    background-repeat: repeat!important;
    --bkgclr: rgb(29, 41, 32)!important;
    --erbkgclr: rgb(238, 238, 218)!important;
    --mbkgclr: rgba(202, 202, 169, 0.678)!important;
    --aclr: rgb(119, 24, 0)!important;
}


body {
    background-image: var(--bkgimg);
    background-color: var(--bkgclr);
}
header, #footer {
    background-color: var(--erbkgclr);
}
.middle {
    background-color: var(--mbkgclr);
}
a:hover, a#active, .incr, a.active {
    color: var(--aclr);
}

@media only screen and (max-width:800px) {
    body {
        
        font-size: 13px;
    }
    
}
@media only screen and (max-width:1124px) {
    #footer {
        height: 5.0rem
    }
    .grid-container {
        padding-bottom: 5.7rem;
    }
}
@media only screen and (max-width:558px) {
    #footer {
        height: 7.0rem
    }
    .grid-container {
        padding-bottom: 7.7rem;
    }
}
@media only screen and (max-width:375px) {
    #footer {
        height: 9.0rem
    }
    .grid-container {
        padding-bottom: 9.7rem;
    }
    h1 {
        font-size: 3em;
    }
    h2 {
        font-size: 2.25em;
    }
}

  @keyframes myAnim {
	0% {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.recipe-maker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    grid-auto-rows: 100px;
    grid-template-areas:
      "a b"
      "a b"
      "a b"
      
      
      "c c "
      "c c "
      "c c "
      "c c "
      "c c ";
        align-items: center;
  }
  .item1 {
    grid-area: a;
  }
  .item2 {
    grid-area: b;
  }
  .item3 {
    grid-area: c;
  }
  .item4 {
    grid-area: d;
  }
  
  #myVideo {
  position: center;
  right: 0;
  bottom: 0;
  min-width: 80%;
  max-width: 100%;
}