@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Quicksand:wght@400;600&display=swap');

/*we can use root variables to define colors and other styles that can be reused throughout the CSS*/
:root{
  --textColor:#5e4b47;
  --logoColor:#cc6f7c;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*except the logo text we will use the noraml font family*/
body {
  font-family: 'Quicksand', sans-serif;
  background: linear-gradient(to right, #ffe6e6, #e6fff5);
  color: var(--textColor);
  width:100vw;
  overflow:hidden;
  height:100vh;
}

.hero {
  min-height: 10vh;
  display: flex;
  align-items:center;
  justify-content:space-between;
  padding: 40px 120px;
}
.icons{
  width:30%;
  height:10vh;
  display: flex;
  justify-content: space-around;
}


.logo {
  font-family: 'Dancing Script', cursive;
  font-size: 3rem;
  color: var(--logoColor);
  animation:moveLogo 2s ease-in-out infinite alternate;
}
@keyframes moveLogo {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0px);
  }
}
main{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:80vh;
}
.hero-content h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 3.5rem;
  color: #d46a92;
  margin-bottom: 10px;
  margin-left:-50px;
}

.hero-content p {
  font-size: 1.2rem;
  color: #665252;
  margin-bottom: 20px;
}
li{
  list-style: none;
  font-size: 1.2rem;
  color: #665252;
  margin-bottom: 10px;
}
.cta {
  background-color: #fcd5ce;
  color: #8b4e5b;
  border: none;
  padding: 12px 28px;
  font-size: 1rem;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.cta:hover {
  background-color: #fcbfbe;
}

.cake-images {
  display: flex;
  justify-content: center;
  margin-top: 0px;
  gap: 30px;
  height:600px;
}
/*for tablet sized media query*/
@media(max-width:1200px){
  body{
    overflow:hidden;
    height:100%;
    width:300px;
  }
  main img{
    position:absolute;
    top: 30%;
    left: 65%;
    width: 300px;
    height:60%;
  }
  .hero-content h1{
    font-size: 2rem;
    margin-left:0px;
  }
  .hero{
    margin:0;
    padding: 20px;
  }
  .logo{
    margin-left:0;
    font-size:1.5rem
  }
  .icons{
    width:30px;
    height:10vh;
  }
  .icons img{
    width:25px;
    height:30px;
  }
}