@import url('Style.css');
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}



/*
    Bootstrap 5 modals use a CSS variable for this. 
    The modal-backdrop is dynamically added to the body element when a modal is shown.

    Here's how to make the modal backdrop lightly transparent:

    Method 1: 
	Override Bootstrap's CSS Variable (Recommended for consistency)
	Bootstrap 5 uses a CSS custom property (variable) named --bs-backdrop-opacity to control the opacity of the backdrop. 
	You can override this variable.

    Add this CSS to your site.css file or within a <style> block in your _Layout.cshtml (preferably site.css):
*/

/* In site.css or a global <style> tag */
/* Adjust this value (0.1 to 0.9) to get the desired level of transparency.*/
/* --bs-backdrop-opacity: 0.25;*/ /* Default is 0.5. Change this value for lighter transparency */

/*:root {
    --bs-backdrop-opacity: 0.01;  
}*/


/* In site.css or a global <style> tag */
/*.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.25);*/ /* Black with 25% opacity */
/*}*/
/* --- 1. Make the Modal Backdrop Lightly Transparent --- */
:root {
    --bs-backdrop-opacity: 0.25; /* Adjust this value (0.1 to 0.9) for desired transparency */
    --bs-backdrop-opacity: 0.9;
}

/* CSS Animated Text Generator -https://www.cssportal.com/css-animated-text-generator/*/
@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

svg {
    font-family: "Russo One", sans-serif;
    font-family: Georgia;
    width: 100%;
    height: 100%;
}

    svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #365FA0;
        font-size: 100px;
    }

@keyframes stroke {
    0% {
        fill: rgba(72,138,204,0);
        stroke: rgba(54,95,160,1);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
    }

    70% {
        fill: rgba(72,138,204,0);
        stroke: rgba(54,95,160,1);
    }

    80% {
        fill: rgba(72,138,204,0);
        stroke: rgba(54,95,160,1);
        stroke-width: 3;
    }

    100% {
        fill: rgba(72,138,204,1);
        stroke: rgba(54,95,160,0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}

.wrapper {
    background-color: #FFFFFF;
}

/*
    What this does
    fill: 
	    transparent removes the interior color of the text

	    stroke draws an outline so the text is still visible

	    Works perfectly on forms, overlays, or backgrounds

	    Variations you might like
	    Use a gradient stroke

	    Make the stroke thicker for bold outline text

	    Apply a drop shadow for contrast

    If  you want the text to be invisible but still take up space (for layout), 
    or if you want it to “cut out” the background, I can show those techniques too.
*/
.transparent-text {
    fill: transparent; /* Makes the inside of the text transparent */
    stroke: black;     /* Outline color */
    stroke-width: 1px; /* Thickness of the outline */
    font-size: 40px;   /* Adjust as needed */
    font-family: sans-serif;
    border-radius:15px;
}