@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&display=swap');

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;   /* Viewport width */
  height: 100vh;  /* Viewport height */
  overflow: hidden; /* Prevent scrolling */
}





img {  left: 0; 
  right: 0; 
  margin-inline: auto; 
   top: 2%; height: 94%; width: 94%;z-index: -1;  position: absolute;
   display: block;}

#img_phone {display: none;}

a {text-decoration: none;
color: black;}

#italic{font-style: italic;}
#underline{text-decoration: underline;
text-decoration-color: black;
text-decoration-thickness: 1px;
}





#about { z-index: 0;font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 14px;
text-align: center;
top: 18%;
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
position: absolute;}


#pavadinimas{ z-index: 0;
 font-family: "EB Garamond", serif;
   font-optical-sizing: auto;
font-weight: 400;
font-style: italic; 
font-size: 70px;
text-align: center;
top:35%;
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
position: absolute;}


#linkai { z-index: 0; font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 24px;
text-align: center;
top: 67%;
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
position: absolute;}





 #container_ateitis {
            top: 0%;
            left: 18%;
            background-color: white;
            border: 1px gray solid;
            width: 20%;
            height: 100%;
            overflow: auto;
            position: absolute;
            padding-top: 54px;
            display: block;
        }

 #container_praeitis {
              top: 0%;
             left: 62%;
            background-color: white;
            border: 1px gray solid;
            width: 27%;
            height: 100%;
            overflow: auto;
            position: absolute;
            padding-top: 54px;
            display: block;
        }

#ateitis { ; font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 26px;

}

#praeitis { font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 26px;

}

#eventas {font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 22px;
text-align: left;
padding: 34px;
padding-top: 35px;
}

.break {
  display: none;
}


@media (max-width: 1440px) {
  #about { 
font-size: 16px;
line-height: 12px;
 }


#pavadinimas{ 
font-size: 56px;
top:33%;
}


#linkai { 
font-size: 14px;
line-height: 22px;
top: 62%;
  }


 #container_ateitis {
            padding-top: 25px;
        }

 #container_praeitis {
            padding-top: 25px;
        }

#ateitis { 
font-size: 24px;
}

#praeitis { 
font-size: 24px;
}

#eventas {
font-size: 16px;
line-height: 20px;
padding: 28px;
padding-top: 17px;
}
}


@media (max-width: 1300px) {
  .break {
    display: block;
  }
  #about {line-height: 18px; top: 16%}
   #container_ateitis {
            padding-top: 18px;
        }

 #container_praeitis {
            padding-top: 18px;
        }

  #eventas {
  padding-top: 15px;
  }
}


@media (max-width: 800px) {
  .break {
    display: block;
  }
  #about {line-height: 16px; top: 16%; font-size: 14px;}
  #pavadinimas {font-size: 48px; top: 34%;}
  #linkai {font-size: 12px;line-height: 20px; top: 65%}
  #ateitis {font-size: 20px;}
    #praeitis {font-size: 20px;}
  #eventas {font-size: 14px; line-height: 18px;}
}

@media (max-width: 600px) {
  #container_ateitis {
            left: 16%;
        }

 #container_praeitis {
            left: 64%
        }
  #eventas {padding: 20px;}


}




@media (max-width: 450px) {

  html, body {
  margin: 0;
  padding: 0;
  width: 100vw;   /* Viewport width */
  overflow-x: hidden; /* Prevent scrolling */
  overflow-y: visible;
}

  img {
    display: none;
  }

  /* Hide the container box but keep its text visible */
  #container_praeitis {
    background: none;
    border: none;
    position: static; /* reset position so content flows naturally */
    width: 100%;
    height: auto;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 80;
    margin: 0;
    overflow: visible;
  }


    #container_ateitis {
     background: none;
    border: none;
    position: static; /* reset position so content flows naturally */
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
  }



 
  #about {
    padding-top: 40px;
    line-height: 20px; font-size: 18px;
    position: static;
  }

     /* Wrapper for title + phone image */
  .pavadinimas-wrapper {
    position: relative;       /* Needed for stacking */
    width: 100%;
    max-width: 280px;         /* Limit phone width */
    margin: 100px auto 0 auto; /* Center horizontally with space above */
  }

  /* Phone background image */
  #img_phone {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0; /* stays behind the text */
  }

  /* Title centered on top of the image */
  #pavadinimas {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -43%);
    font-size: 56px;
    color: black; /* or another contrasting color */
    z-index: 1;   /* ensure it's above the image */
    text-align: center;
    margin: 0;
    width: 100%;
  }


    #ateitis{padding-top: 80px; font-size: 22px;}
     #praeitis{padding-top: 0px; font-size: 22px;}


    #eventas {font-size: 16px; line-height: 20px;
      padding: 40px;}

  #linkai {font-size: 20px;line-height: 35px;padding-top: 80px;  
    position: static; padding-bottom: 0px;}
}