@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


.ultra-regular {
  font-family: "Ultra", serif;
  font-weight: 700;
  font-style: normal;
}

.dm-sans-<uniquifier> {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {

body {
  background: #fff;
}

#Fon {
  width: 50vw;
  height: 62vw;
  background: #E7D4BE70;
  position: absolute;
  top: 13.6vw;
  left: 0vw;
}

#Background {
  position: absolute;
  top: 13.6vw;
  left: 45vw;
}

#Logo {
  font-family: "Ultra", serif;
  font-size: 7vw;
  position: relative; 
  left: 10vw;
  top: 2vw;
}

#Fot {
  font-size: 3vw;
  font-family: "DM Sans", sans-serif;
  list-style: none;
  display: flex;
  gap: 15px;
  white-space: nowrap;
  position: absolute;
  top: 5vw;
  margin-left: 34vw;
}

#Contact {
  font-size: 2.8vw;
  width: 18vw;
  height: 7vw;
  background: #000;
  text-align: center;
  line-height: 6.5vw;
  position: absolute;
  left: 80vw;
  top: 3.5vw;
  color: #fff;
  border-radius: 2px;
  border: 1px solid #4B4B4B;
  font-family: "Oswald", sans-serif;
}

#Wheat {
  z-index: -100;
  position: absolute;
  top: 15vw;
  width:15vw;
}

#Sience {
  font-family: Oswald;
  position: absolute; 
  top: 25vw;
  font-size: 2vw;
  left: 10vw;
  letter-spacing: 0.3vw;
}
  
#Fresh{ 
  font-family: "Ultra";
  position: absolute;
  font-size: 5vw;
  left: 10vw;
  top: 29vw;
}
  
#Combined {
  position: absolute;
  top: 25vw;
  left: 28vw;
  width: 4vw;
}
  
#Even {
  font-size: 2vw;
  font-family: DM Sans;
  position: absolute;
  top: 50vw;
  left: 10vw;
}  
  
#Shape {
  z-index: -100;
  width: 35vw;
  position: absolute;
  top: 93vw;
  left: 8vw;
}
  
#Bitmap {
  z-index: -50;
  width: 25vw;
  position: absolute;
  top: 85vw;
  left: 5vw;
}
  
#Bitmap1 {
  width: 27vw;
  position: absolute;
  top: 100vw;
  left: 13vw;
}
  
#Combined1 {
  width: 13vw;
  position: absolute;
  top: 87vw;
  left: 30vw;
  transform: rotate(260deg);
}  
  
#Combined2 {
  width: 10vw;
  position: absolute;
  top: 110vw;
  left: 1vw;
  transform: rotate(180deg);
}
  
#About {
  font-family: "Oswald";
  font-size: 2vw;
  position: absolute;
  top: 84vw;
  left: 46vw;
  letter-spacing: 0.5vw;
}  
  
#Baking {
  font-family: "Ultra";
  font-size: 5vw;
  position: absolute;
  top: 88vw;
  left: 46vw;
}  
  
#n1 {
  font-family: "Oswald";
  font-size: 2vw;
  position: absolute;
  top: 105vw;
  left: 55vw;
}
  
#St1 {
  text-align: center;
  border-radius: 100vw;
  color: #F5D3AB;
  background: black;
  width: 5vw;
  height: 5vw;
  position: absolute;
  left: 46vw;
  top: 110vw;
  transform: rotate(-90deg);
  line-height: 4.9vw;
}  
  
#St2 {
  text-align: center;
  border-radius: 100vw;
  color: #F5D3AB;
  background: black;
  width: 5vw;
  height: 5vw;
  position: absolute;
  left: 46vw;
  top: 116vw;
  transform: rotate(90deg);
  line-height: 4.9vw;
}    
  
#Last {
  font-family: "Oswald";
  font-size: 3vw;
  position: absolute;
  left: 55vw;
  top: 109vw;
}  
  
#She {
  font-family: "DM Sans";
  font-size: 2vw;
  color: #3333337F;
  position: absolute;
  left: 55vw;
  top: 115vw;
}  
  
  #Our {
    font-family: "Oswald";
    font-size: 2vw;
    color: #171B1B;
    position: absolute;
    top: 140vw;
    left: 40vw;
    letter-spacing: 0.8vw;
  }
  
  #Baked {
    font-family: 'Ultra';
    font-size: 5vw;
    position: absolute;
    left: 25vw;
    top: 144vw;
  }
  
  #Combinedsss {
    position: absolute;
    width: 8vw;
    left: 10vw;
    top:160vw;
  }
  
  #Shape2 {
    position: absolute;
    width: 8vw;
    left: 45vw;
    top:160vw;
  }
  
  #Shape3 {
    position: absolute;
    width: 8vw;
    left: 78vw;
    top:160vw;
  }
  
  #Pod {
    width: 25vw;
    height: 35vw;
    z-index: -100;
    background: #F9BF77;
    position: absolute;
    left: 75vw;
    top:155vw;
  }
  
  #Bitmap2 {
    width: 13vw;
    z-index: -50;
    position: absolute;
    left: 87vw;
    top:155vw;
  }
  
  .Fonts-U {
    list-style: none;
    font-family: "Ultra";
    font-size: 3vw;
    white-space: nowrap;
    display: flex;
    gap: 21vw;
    position: absolute;
    left: 10vw;
    top: 170vw;
  }
  
  .Fonts-D {
    list-style: none;
    font-family: "DM Sans";
    font-size: 2vw;
    white-space: nowrap;
    display: flex;
    gap: 10vw;
    position: absolute;
    left: 10vw;
    top: 177vw;
  }
  
  #f2 {
    position: absolute;
    left: 30vw;
  }
  
  #f3 {
    position: absolute;
    left: 66vw;
  }
  
  #Fo1:hover {
    color: #3333337F;
    border-bottom: 2px solid black;
    transition-duration: 1s;
     -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
  }
  
   #Fo2:hover {
    color: #3333337F;
     border-bottom: 2px solid black;
     transition-duration: 1s;
     -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
  }
  
   #Fo3:hover {
    color: #3333337F;
    border-bottom: 2px solid black;
     transition-duration: 1s;
     -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
  }
  
  #Contact:active {
    font-size: 2vw;
    transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 0.5s;
  }
  
  #Our {
    animation: tada 1.6s infinite;
  }
  
  #fo1 {
    animation: heartBeat 3s infinite;
  }
  
  #fo2 {
    animation: heartBeat 3s infinite;
  }
  
  #fo3 {
    animation: heartBeat 3s infinite;
  }
  
  #Sience {
    animation: heartBeat 5s infinite;
  }