body{
    margin: 0;
    background-color: #CFBB99;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}


h1{
font-family:Carter One;
font-size: 55px;
color: #000000;
text-align: center;
background-color:#889063;
padding: 20px;
font-style: italic;
}


#t1{
   color: #000000;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 30px;
font-weight: bolder;
background-color: #889063;


display:inline-block;
border: 3px;
border-color: #889063;
padding: 20px;
border-radius: 25px;
}


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


/* NAPIT */
#b1, .btn{
font-size: 40px;
font-family: Story Script;
text-transform: uppercase;
padding: 20px;
background-color: black;
color: azure;
border-radius: 30px;
text-decoration: none;


display: inline-block;
margin: 20px auto;
position: relative;
overflow: hidden;
z-index: 1;
}


#b1::before, .btn::before{
   content: "";
    position:absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background-color: #889063;
    z-index: -1;
    transition: all 0.5s ease;
}


#b1:hover,
#b1:focus,
.btn:hover,
.btn:focus{
color:rgb(0, 0, 0);
}


#b1:hover::before,
#b1:focus::before,
.btn:hover::before,
.btn:focus::before{
transition: 0.5s;
left: 0;
width: 100%;
}


#b1:active,
.btn:active {
    transform: scale(0.9);
}


/* ---------- KUPLAT ---------- */


.bubble {
    display: flex;
    align-items: center;
    gap: 40px;


    background: #889063;
    padding: 30px 40px;


    border-radius: 100px;


    max-width: 800px;
    width: 100%;
    margin: 40px auto;
}


.bubble.reverse {
    flex-direction: row-reverse;
}


.profile-pic {
    width: 100%;
    max-width: 400px;
    height: 400px;
    object-fit: cover;


    border-radius: 50%;
}


.text {
    max-width: 500px;
    font-size: 20px;
}


.bubble-text {
    background: #889063;
    padding: 30px 40px;
    margin: 40px 0;
    border-radius: 80px;
}


.bubble-texts {
    background: #889063;
    padding: 30px 40px;
    margin: 40px 0;
    border-radius: 80px;
    text-align: center;
}


.bubble-text, .bubble-texts {
    max-width: 800px;
    margin: 40px auto;
}



/* ---------- FOOTER ---------- */


.site-footer {
  background: #111;
  color: white;
  padding: 20px;
  text-align: center;
}


.site-footer a {
  color: #ddd;
  margin: 0 10px;
  text-decoration: none;
}


.site-footer a:hover {
  color: white;
}


.footer-content {
  max-width: 1000px;
  margin: auto;
}


html, body {
    overflow-x: hidden;
}

/* ---------- MOBIILI ---------- */


@media (max-width: 768px) {

  .bubble {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 95%;
    margin: 20px auto;
    padding: 20px;

    gap: 20px;
    border-radius: 40px;
  }

  .bubble.reverse {
    flex-direction: row-reverse;
  }

  .profile-pic {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
  }

  .text {
    flex: 1;
    width: 100%;
    max-width: none;
    font-size: 16px;
    text-align: left;
  }

  .text h2 {
    margin-top: 0;
  }

  .btn {
    display: block;
    width: 80%;
    text-align: center;
    font-size: 20px;
  }

}