@charset "utf-8";
/* CSS Document */
*
{
	box-sizing: border-box;
	--redColor: rgba(235,12,16,1.00);
	--yellowColor:  rgba(220,224,20,1.00);
	--orangeColor: rgba(221,142,0,1.00);
	--etherialBlue:  rgba(9,72,64,0.65);
	--greenColor: green;
	--shadowOutline:  1px 1px 1px rgb(0, 0, 0),-1px -1px 1px rgb(0, 0, 0),-1px 1px 1px rgb(0, 0, 0),1px -1px 1px rgb(0, 0, 0), -2px -2px 2px rgb(0, 0, 0), 2px 2px 2px rgb(0, 0, 0), 2px -2px 2px rgb(0, 0, 0), -2px 2px 2px rgb(0, 0, 0);

}
html
{
	scroll-behavior: smooth;
	
box-sizing: border-box;
	 margin:auto;
}

body {
 
	
  font-family: Arial, Helvetica, sans-serif;
	background-color: black;
	margin-left: auto;
	margin-right: auto;
}
a img:hover
{
	transform: scale(1.1);
}
img
{
	max-width: 100%;

    height : auto;
}
.linkto
{
	color: #228dff;
	font-size: 1em;
	text-decoration: underline;
}
.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", serif;
  font-weight: 400;
  font-style: normal;
}
.topnav {
	z-index: 20;
    overflow: hidden;
    position: fixed;
    background-color:var(--redColor);
    display: block;
	width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: .5em  .8em;
  text-decoration: none;
  font-size: 1.3rem;
font-weight: bold;
	/*border: 1px solid #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: var(--yellowColor);
  color: darkblue; 	

}

.topnav .icon {
  display: none;
}
.marginVerticle
{
	margin-top: auto;
	margin-bottom: auto;
}
.marginHorizontal
{
	margin-left: auto;
	margin-right: auto;
}

.backgroundB {
		margin-left: .5vw; margin-right: .5vw; text-align: center ;
		/*margin-left: auto; margin-right: auto; text-align: center ;*/
		object-fit:none;
		background-size :cover;
		background-position:top;
		background-repeat: no-repeat;
	}
.backgroundBSmall
{
	height: 4vh;
    min-height: 40px;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.addMargin
{
	min-height: 50px;
	margin-top: 9vh;
}
.addMarginSm
{
	min-height: 30px;
	max-height: 5%;
	margin-top: 6vh;
}
.addPdding
{
	padding-top: .04vh;
}
.background-tint
{
	/*position: relative;
	background-size: cover;
	background-position: center;*/
	background-color: rgba(0,0,0,0.4);z-index:1;
}
.titleText {
	    font-size: 15vw;
        font-size: clamp(35px, -1.211rem + 4vw, 2.7rem);
		color: var(--orangeColor);
		text-align: center;
		width: 100%;
		text-shadow: 4px 4px  black;
		border-style: solid none solid none;
border-width: 5px;
border-image: linear-gradient(45deg, black,var(--yellowColor), black) 1;
		
		
		margin-left: .5vw; margin-right: .5vw; text-align: center ;
	}
.bodyText
{
	text-align: center;
	/*object-position: center;*/
	color: var(--yellowColor);
	/*padding: 10%;*/
	text-shadow: var(--shadowOutline);
    font-size: 1.125rem;
    font-size: clamp(0.9375rem, 1.125rem + 0.546448087431694vw, 3rem);
}

/* Etherial section begin*/
.gridbody-container
{
			display: flex  ;
            flex-direction:row;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
}
	


.gridItem
{
	flex: 0 1 500px ; 
	height: 90%;
	margin-left: auto;
	margin-right: auto;
	grid-gap:  20px; 
	margin-top: 20px;
	margin-bottom: 0px;
}
.gridItem div
{
	overflow-wrap: break-word;
}
.gridItemLarger
{
	flex: 1 2 700px;
	margin-bottom: auto;
	margin-top: auto;
}
.gridItemSmaller
{
	flex: 0 2 300px;
	align-items: center;
	margin: auto 5% ;
	
}
.gridItemEvenSmaller
{
	flex: .1 1 40px;
	margin-bottom: auto;
	margin-top: auto;
	margin-left: 4vw;
	margin-right: 4vw;

}

.roundedFrame
{
	place-self:center;
	margin: 10% 5%;
	padding: 8%;
	border: 5px solid white; 
	border-radius: 5px;
	justify-content: space-evenly;
}
/* Removed empty ruleset for .circle */


.circle a img
{
	
background-color:var(--etherialBlue);
	/* margin-right: 300px;
	margin-left:300px;  */
	/* background-color: rgba(9,72,64,0.65); */
	border-radius: 15%;
	object-fit:contain;
	max-height: 50vh;;

}
.etherial-background
{
		background-color:var(--etherialBlue);
}
.etherialText
{
	text-align:center;
	word-wrap: break-word;
    place-self:center;
	font-size: 1.5em;
	color: white;
	font-weight: 400;
	text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228dff,0 0 35px #228dff,0 0 40px #228dff;
/*	text-shadow: 3px 3px linear-gradient(white, transparent);
*/}
/* Etherial section end*/
.text-body-container {
  position: relative; max-height: 200px; /* Initial height of the text block */ 
	overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent); /* Webkit for better compatibility */ mask-image: linear-gradient(to bottom, black 70%, transparent); /* Mask effect */
}

.text-content {
  transition: max-height 0.5s ease;
}


button {
  display: block;
  margin: 20px auto;
}


.body-container 
{
	justify-content: center;
}

.section 
{
  margin-left:auto;
	margin-right: auto;
}


/* .readmore-button
{

	background: 
		radial-gradient(darkred,red);
		color: black;
	position: relative;
	object-position: bottom center;
}
.readmore-button:hover
{
	background: radial-gradient(black,darkred);
	background-image: image(" ")
} */
.fade-in-image 
{ 
	animation: fadeIn 5s; 
}
@media screen and (max-width: 600px) 
{
.gridItemLarger
	{
		margin-top: 0;
		margin-bottom: 0;
	}
.gridItem
	{
		flex: 0 1 300px ; 
	}
.gridItemSmaller
{
	flex: 0 1 300px;
	margin-bottom: auto;
	margin-top: auto;
}
.gridItemEvenSmaller
{
	flex: 0 1 50px;
	margin-bottom: auto;
	margin-top: auto;
}
	.readmore-link.expand:after
	{
		bottom: 2px;
	}
	
}

@media screen and (max-width: 1498px) 
{
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon 
	{
    float: right;
    display: block;
	  position: fixed;
	  right:0;
  }
}

@media screen and (max-width: 1498px) 
{
	
  .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
	  top:0;
  }
  .topnav.responsive a 
	{
    float: none;
    display: block;
    text-align: left;
	  position: left;
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes growFontSize {
  from {
    font-size: 16px;
  }
  to {
    font-size: 32px;
  }
}

/* Apply the animation to the desired element */
.grow-text {
 font-size: 3em; 
  text-align: center;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
	from {top:-100px;opacity: 0;}
	to {top:0px;opacity:1;}
  }
  
  /* Add animation (Standard syntax) */
  @keyframes example {
	from {top:-100px;opacity: 0;}
	to {top:0px;opacity:1;}
  }