:root { /* Shares variables amongs all CSS functions*/
  --vw-font-size: 3vw;  /* Mobile horizontal (start from low resolution and work up)*/  /* Variable for the viewport-based size */ 
  --vh-font-size: 3vh;
  --rem-font-size: 1.9rem; /* Desktop */  /* Variable for the rem-based size */ 

  --font-alternative1: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  /* --font-2:; */
  /* --font-3: ; */


  --fs-xl:clamp(0.1rem, 1vw + 1.6rem, 4rem); /* Welcome Guardian txt*/
  --fs-400: 1.0rem; /* Main size of most txt*/
  --fs-300: 0.85rem; /* small disclaimer text on /link page*/
  --fs-author: 0.9rem;
}





html {
  height: 100%;
  font-family: 'MyCustomFont6'; /* Applies text size + style across all webpages. I like so far: 11,20,6,2,4,5, (11 for regular text)(13 for 'WELCOME GUARDIAN') (19/20 for small text)*/
  overflow: hidden;
  font-size: var(--fs-400);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

*{
	margin: 0;
	padding: 0;
  box-sizing: border-box; /*allows to shrink div childs relative to parents, even if margin/padding present*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}



/* Define the keyframes for the gradient animation */
@keyframes gradientAnimation {
    0% { background-position: 0% 0%;}
    50% { background-position: 100% 100%;}
    100% { background-position: 0% 0%; }
  }
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color:white;
    background: linear-gradient(45deg, #141113 60%, #103688 85%, #308cb1 95%);       /* Original, approved to be super cool looking by Poole */
    /* background: linear-gradient(45deg, #b8097e 60%, #103688 85%, #922859 95%);  */
    background-size: 200% 100%; /* Ensure the gradient covers the element and can be animated */
    animation: gradientAnimation 20s ease infinite;
	  justify-content: center;
    flex-direction: column;
	  align-items: center;
    z-index: 0; /* Put gradient in front of gun images */
}




.two-background-images{
  display:flex;
  position: relative;
  width: 100vw;
  height: 100vh;
}
  /*---Background Cougar Logo--*/
.overlay2 {
	flex: 1;
  /* margin-top: 0%;   /* move cougar img up/down*/
  /*margin-left: 55%; */

  overflow: hidden; /* Makes it so images are cutoff if hit website vertical/horizontal edge, and prevent creating empty space that you have to scroll through */
  z-index: -1;  
}
  
  .overlay2 img { /* Cougar img*/
    position: fixed;
    width: 50vw;
    height: auto; /* Maintain aspect ratio with width above*/
    opacity: 0.08; /* Adjust the opacity to make the image more or less transparent */   
    object-fit: cover;
  }

  


/* Background gun image container */
.background-container {
  flex: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* Ensure it is behind other content */
}

/* Background image inside container above */
.background-container img {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%; /* Zoom effect */
  max-height: 100vh;
  opacity: 30%;
  transform: translate(-50%, -50%) scaleX(-1);
  object-fit: cover;
}




.all-paragraphs{
    flex: 1;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center;

  }
  
  



  
  .main-paragraph {
    font-size:  var(--fs-400); /*min(var(--vw-font-size), var(--vh-font-size) ,var(--rem-font-size));Take minimum of either 3vw or 12px for text size */
    line-height: 1.5; /* Adjust line height as needed */
    text-align: center; /* Center align the text */
    max-width: 100%; /* same as 100vw, looks like its locked to the container of the box */
    padding-bottom: 20px; /* Add padding as needed */
    }
  
  
  

.additional-content{
  font-family: 'MyCustomFont20';
  font-size: var(--fs-300);
	color: rgb(235, 228, 237);
	padding-top: 5px;
	line-height: 1.5; /* Adjust line height as needed */
	text-align: center; /* Center align the text */
	max-width: 100%; /* Adjust maximum width as needed */
	margin-top: 20px; /* Add margin-top as needed */
  margin: 0 auto;
  }
  
  
  
  
  


  @media (min-width: 0px){ /*For screen 0px-601px, dont show gun img */
    :root{
      --fs-400: 1.1rem;
      --fs-300: 0.9rem;
      --fs-author: 0.8rem;
    }
    .background-container img {
      display: none;
    }
    .background-container{
      display: none;
    }
    .overlay2 img { /* Cougar img*/
      transform: scale(0.6) translate(80%,90%);  
    }
  }
  
  @media (min-width: 1050px){ /*For screens at least 601px or bigger, show gun img */
    :root{
      --fs-400: 1.4rem;
      --fs-300: 0.95rem;
      --fs-author: 0.8rem;
    }
    .background-container img{
      display: block;
    }

    .background-container{
      display: block;
    }
    .overlay2 img { /* Cougar img*/
      transform: scale(2.2) translate(15%,17%);   /*Make img bigger + move to the right/left*/  /* 2  ; 1 with no margin-left*/
    }

  }