@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    height: 100vh;
    margin: 0;
    font-family: 'Calibri', sans-serif; /* Set the font to Calibri */
    background: url('../stars-space.gif') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.text-container, .image-container, .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: 0 5px; Add some margin between the containers */
    margin-top: 20px;
}
.text-container {
  margin-left: 5%;
  padding-left: 25px; 
  /* margin-right: -100px; */
}

p, a {
    font-size: 14px; /* Increase the font size */
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 40px;
    margin-right: 25px;
}
img {
    margin: 5px;
    margin-top: 20px;
}

.card {
    border: 1px solid #000; /* Add a border */
    padding: 10px; /* Add some padding */
    margin-bottom: 10px; /* Add some margin at the bottom */
    /* width: 60%; 
    height: auto; */
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }
  
  @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }
  
  h3, h5{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typewriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
/*     margin-right: 0.2em; */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
    max-width: 100%; /* Limit the width of the text container */
    font-size: 18px; /* Adjust the font size to fit the screen */
    margin-left: 40px;
    margin-right: 0px;
    margin-bottom: 5px;
    
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }
  h1, p {
    font-family: 'Roboto', sans-serif;
    /* text-shadow: 1px 1px slategray; */
    font-weight: bolder;
    margin-bottom: 20px;
  }
  h1 {
    text-shadow: 1px 1px black;
  }
  /* h1 {
    background: -webkit-linear-gradient(black, darkgreen);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  p {
    background: -webkit-linear-gradient(darkgreen, darkblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  } */

  .card:hover {
    transform: scale(1.05); /* Increase the size of the card */
    transition: transform .2s; /* Animation */
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Add a shadow effect */
    transition: 0.3s; /* Add a transition effect */
}
.card {
    border: 3px solid #000;
    animation: border-flicker 3s infinite;
}

@keyframes border-flicker {
  0% { border-color: #000; }
  50% { border-color: #ff0000; }
  100% { border-color: #000; }
}
.card {
    background-color: #fff; /* Set the initial background color */
    transition: background-color .5s ease; /* Add a transition effect */
}

.card:hover {
    background-color: black; /* Change the background color on hover */
    color: white; /* Change the text color to black on hover */
    font-weight: bold; /* Make the text bold on hover */
    
}

.card-img {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Add a shadow effect */
  padding: 10px; /* Add some padding */
  transition: transform .2s; /* Animation */
  background-color: darkblue;
  color: red;
  border: 3px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* width: 50%;
  height: auto; */
}

.card-img:hover {
  transform: scale(1.05); /* Increase the size of the card */
  background-color: darkgreen;
  color: lightcyan;
  border: 3px solid black;
}
.button-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px; /* Adjust this value to change the space between buttons */
  padding: 20px;
  border: 3px solid #000; /* Add a border */
  margin-bottom: 10px; /* Add some margin at the bottom */
  width: 25%; /* Set the width of the card. Adjust this value to your liking */
  /* Add any other styles you want for this card */
}

.button-card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Add a shadow effect */
  transition: 0.3s; /* Add a transition effect */
  border: 3px solid #000;
  animation: border-flicker 3s infinite;
  background-color: lightgrey; /* Set the initial background color */
  transition: background-color .5s ease; /* Add a transition effect */
  margin-top: 20px;
}

.button-card:hover {
  transform: scale(1.05); /* Increase the size of the card */
  transition: transform .2s; /* Animation */
  background-color: darkcyan; /* Change the background color on hover */
  color: white; /* Change the text color to black on hover */
  font-weight: bold; /* Make the text bold on hover */
}

@keyframes border-flicker {
0% { border-color: #000; }
50% { border-color: red; }
100% { border-color: #000; }
}
.text-container {
   margin-right: 5px;  
  /* Reduce the margin on the right */
  margin-left: 15%;
}

.button-container {
  margin-right: 0px; /* Reduce the margin on the left */
  /* width: 50%;
  height: auto; */
}
.button-card {
  margin-right: 20%;
}
.image-container {
  margin-right: 2%;
  margin-left: 2%;
}

/* BOOTSTRAP START: 3D effect for buttons */
/* 3D effect for buttons */
.button-card button {
  box-shadow: 0 5px 0 0 #0062cc;
  transition: all 0.3s ease 0s;
  background-color: #000;
  color: yellow;
  border: 2px solid green;
}

.button-card button:hover {
  transform: translateY(5px);
  box-shadow: none;
}

/* 3D effect for cards */
.button-card {
  box-shadow: 0 4px 8px 0 lightgreen;
  transition: 0.3s;
}

.button-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.text-container {
  text-align: center;
  /* box-shadow: 0 1px 0 0 yellow;
  transition: 0.3s; */

}
.img-fluid {
  max-width: 100%;
  height: auto;
}

.btn-custom {
    font-size: 18px; /* Increase the font size */
    font-weight: bold; /* Make the text bold */
    padding: 10px 20px; /* Increase the size of the button */
    background-color: black; /* Set the background color to black */
    color: yellow; /* Set the text color to white */
    transition: all 0.3s ease; /* Add a transition effect */
    margin: 5px 0; /* Add some margin at the top */
    border: 3px solid blue; /* Add a blue border */

}
.btn-custom:hover {
    background-color: white; /* Change the background color to white on hover */
    color: black; /* Change the text color to black on hover */
    border: 3px solid black; /* Add a blue border */
}

.image-container {
    box-shadow: 0 4px 8px 0 lightblue;
    transition: 0.3s;
}