/* Allows full-page scrolling and removes unwanted overflow */


/* Scrollable main background with content aligned to top */
.homepage {

    /*background: url("OIP.jpeg");
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;*/
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%); 
    margin: 0;
    min-height: 100vh;
    
}

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%); 
  min-height: 100vh;
}


/* Grid layout */
.grid {
  /*border: 2px solid rgb(61, 61, 61);*/
  width: 1900px; /* smaller overall width */
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: 40px; /* smaller row height */
  row-gap: 10px;
  column-gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%); 
  padding-left: 125px;
  padding-bottom: 100px;
  word-wrap: break-word;
  overflow-wrap: break-word;



}

p {
  overflow-wrap: break-word; /* Or use overflow-wrap: break-word; */
  white-space: normal;
}


/* Shared box style */
.box {
  color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 10px;
  word-wrap: break-word;       /* legacy */
  overflow-wrap: break-word;   /* modern */




 
}

/* Top heading box */
.titleheader {
    grid-column-start: 1;
    grid-column-end: span 15;
    grid-row-start: 1;
    grid-row-end: span 3;
   
    overflow-wrap: break-word; /* Or use overflow-wrap: break-word; */
    white-space: normal;
  
    
  align-items: center;
  justify-content: left;

    box-sizing: border-box;


    
}

.titleheader #heading {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.973);
  text-align: left;
  font-family: monospace;
  white-space: nowrap; /* or normal if you want wrapping */
  overflow: inherit;
  border-right: none;  /* Remove this static border */
  width: fit-content;
}

.typewriter-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid rgba(255, 255, 255, 0.973);

  /* Two animations: typing (runs immediately), blink-caret (starts after 6s) */
  animation-name: typing, blink-caret;
  animation-duration: 6s, 0.75s;
  animation-timing-function: steps(80, end), step-end;
  animation-fill-mode: forwards, forwards;
  animation-iteration-count: 1, infinite;
  animation-delay: 0s, 6s; /* blink-caret starts after typing ends */
}

/* Typing effect */
@keyframes typing {
  from { width: 0ch; }
  to { width: 196ch; } /* Adjust to your character count */
}

/* Blinking cursor */
@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: rgba(255, 255, 255, 0.973); }
}




.titleheader #description {
  font-size: 35px;
  color: rgb(185, 183, 183);
  text-align: left;
}

.titleheader #awards {
  color: rgb(173, 171, 171);
  text-align: left;
  font-size: 25px;
}

.titleheader #situation {
  font-size: 70px;
  color: rgb(255, 255, 255);
  text-align: left;
  position: absolute;
  bottom: 30px;

  right: 10px; /* Adjust as needed */
}

/* Line */


#line {
  border: none;
  height: 3px; /* Thickness */
  background-color: white; /* Color of the line */
  margin: 20px 0; /* Optional spacing */
  border-radius: 3px; /* Optional: rounded ends */

}

/* image1 */

.image1 {
    grid-column-start: 6;
    grid-column-end: span 2;
    grid-row-start: 6;
    grid-row-end: span 5;
    border-color: white;

    align-items: flex-start;
 
    transform: rotate(15deg);      /* Adjust angle as needed */
    transition: transform 0.3s ease;

    background-color: white;
    border-color: white;
    border-width: 4px;
    
}

.image1 img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Add tilt: */
  display: block;

}

/* Optional: Add hover effect to straighten on hover */
.image1:hover {
  transform: rotate(10deg);
}



.image1info {
    grid-column-start: 8;
    grid-column-end: span 7;
    grid-row-start: 4;
    grid-row-end: span 13;
 
  justify-content: center; /* Centers horizontally */
  align-items: center; 

}

.image1info p {

  padding-left: 0; 
  text-align: left;
  justify-content: center;
  font-family: Bradley Hand, cursive;
  color: white;
  font-size: 35px;
  padding-top: 110px;


}

.image1info #personal {


color: rgb(226, 225, 221);
font-size: 20px;
padding-left: 200px;




}

.image1 #Place {

align-items: flex-end;
color: black;
font-size: 30px;
font-weight: bold;
font-family: "Patrick Hand", "Comic Sans MS", "Lucida Handwriting", cursive;
}


.image1 #info {

align-items: flex-end;
text-align: right;
color: black;
font-size: 10px;
padding-top: 3px;
  overflow-wrap: break-word; /* Or use overflow-wrap: break-word; */
  white-space: normal;
   font-family: 'Patrick Hand', 'Comic Sans MS', 'Lucida Handwriting';
 
}

/* box test */

.computerscreen {

    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row-start: 2;
    grid-row-end: span 17;


}

.computerscreen img{
      width: 100%;
      height: 100%;
      display: block;
}

.computerinfo {

    grid-column-start: 4;
    grid-column-end: span 10;
    grid-row-start: 2;
    grid-row-end: span 12;

}

.computerinfo img {
      padding-top: 35px;
      padding-left: 61px;
      width: 78%;
      height: 95%;
      display: block;

}


/* image 2*/

.image2 {
    grid-column-start: 11;
    grid-column-end: span 4;
    grid-row-start: 19;
    grid-row-end: span 15;

    align-items: flex-start;
 
    transform: rotate(-15deg);      /* Adjust angle as needed */
    transition: transform 0.3s ease;

    background-color: white;
    border-color: white;
}

.image2:hover {
  transform: rotate(-10deg);
}

.image2 img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Add tilt: */
}

.image2 #Place {

align-items: flex-end;
color: black;
font-size: 30px;
font-weight: bold;
}


.image2 #info {

align-items: flex-end;
color: black;
font-size: 22px;
  overflow-wrap: break-word; /* Or use overflow-wrap: break-word; */
  white-space: normal;
}

.image2info {
    grid-column-start: 2;
    grid-column-end: span 7;
    grid-row-start: 20;
    grid-row-end: span 15;
 
  justify-content: center; /* Centers horizontally */
  align-items: center; 

}

.image2info p {

  padding-left: 0; 
  text-align: left;
  justify-content: center;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: none;
  color: white;
  font-size: 27px;
  padding-top: 100px;
 


}

.image2info #personal {


color: rgb(226, 225, 221);
font-size: 20px;
padding-left: 200px;




}




/*video 1*/

.phonetrans{
    grid-column-start: 11;
    grid-column-end: span 4;
    grid-row-start: 35;
    grid-row-end: span 15;
}

.phonetrans img{

      width: 100%;
      height: 100%;
      object-fit: cover; /* cover = fills box, crop if needed */
      display: block;

}

.video1 {

    grid-column-start: 11;
    grid-column-end: span 4;
    grid-row-start: 35;
    grid-row-end: span 15;
    overflow: hidden;
    
}

    .video1 video {
      padding-top: 40px;
      padding-left: 64px;
      width: 69%;
      height: 89%;
      border-top-left-radius: 27%;
      border-bottom-left-radius: 27%;
      border-top-right-radius: 15%;
      border-bottom-right-radius: 12%;
      object-fit: cover; /* cover = fills box, crop if needed */
      display: block;
    }