:root { 
  --bg: #202020;
  --fg: #c5c6c7;
  --accent: #90c4ff;
  --dark-accent: #5c89bd;
  --clear-accent: #ffab4a;
  --card-bg: #1f2833;

  --lightBg: #1a2b3d;
  --lightFg: #000000;
  --lightAccent: #3B82F6;
 /* --Text: #1E293B */
}

body {
  margin: 0;
  font-family: "Inter", sans-serif; 
  color: var(--fg);
  line-height: 1.6; 
  background: linear-gradient(90deg, #883f00 0%, #181818 20%, #202020 80%, #005885 100%); 
  background-size: 122% 100%;
  animation: moveBg 20s ease-in-out infinite;
}

@keyframes moveBg {
  0% { background-position: 50% 0%; }
  25% { background-position: 10% 0%; }
  45% { background-position: 50% 0%; } 
 
  55% { background-position: 50% 0%; }
  75% { background-position: 90% 0%; }
  100% { background-position: 50% 0%; }
}

@keyframes moveBg2 {
  0% { background-position: 0% 50%; }
  50% { background-position: 80% 0%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow-blue {
  0% {box-shadow: 0 0 20px 0px rgba(0, 162, 255, 0.637); }
  50% {box-shadow: 0 0 20px 5px rgba(110, 202, 255, 0.637); }
  100% {box-shadow: 0 0 20px 0px rgb(0, 162, 255, 0.637); }
}

@keyframes glow-button {
  0% {box-shadow: 0 0 10px 2px rgba(56, 136, 255, 0.637); }
  50% {box-shadow: 0 0 10px 5px rgb(56, 159, 255); }
  100% {box-shadow: 0 0 10px 2px rgba(56, 136, 255, 0.637); }
}

.glow-box-banner 
{ 
  font-size: 20px;   
  font-style: italic;
  font-weight: lighter;
  text-align: center;    
  margin: 0 auto 0;  
  width: min-content;
  padding-left:15px;
  padding-right:15px;
  z-index: 1;
  border-radius: 2rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  background: linear-gradient(90deg, #813c00 0%, #1e2433 40%, #1e2433 60%, #00537c 100%); 
  background-size: 175% 100%; 
  animation:  moveBg 20s ease-in-out infinite,
  glow-blue 5s ease-in-out infinite;  
}

.glow-box-title
{  
  margin: 0 20 0;
  font-size: 20px;    
  text-align: center;     
  z-index: 1;
  width: auto;
  border-radius: 20rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  background: linear-gradient(90deg, #853e007e 0%, #1e2433 40%, #1e2433 60%, #00aaff7a 100%); 
  background-size: 175% 100%;
  animation:  moveBg 20s ease-in-out infinite,
              glow-blue 5s ease-in-out infinite;  
}

.glow-box-space
{   
  font-size: 30px;  
  text-align: center;   
  alignment-baseline: central;
  align-items: central;   
  z-index: 1;
  margin: 2rem auto 2rem;
  width: 320px;
  border-radius: 20rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  background: linear-gradient(90deg, #853e007e 0%, #1e2433 40%, #1e2433 60%, #00aaff7a 100%); 
  background-size: 175% 100%;
  animation:  moveBg 20s ease-in-out infinite,
              glow-blue 5s ease-in-out infinite;  
}

.glow-box
{ 
  font-size: 30px;  
  text-align: center;   
  alignment-baseline: central;
  align-items: central;   
  z-index: 1;
  margin: 0 auto 0;
  width: 320px;
  border-radius: 20rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  background: linear-gradient(90deg, #853e007e 0%, #1e2433 40%, #1e2433 60%, #00aaff7a 100%); 
  background-size: 175% 100%;
  animation:  moveBg 20s ease-in-out infinite,
              glow-blue 5s ease-in-out infinite;  
}

.glow-box-button { 
  font-size: 30px;  
  text-align: center; 
  alignment-baseline: central;
  margin-top:1rem;
  border-radius: 20rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  animation: glow-button 5s ease-in-out infinite;  
}

.highlight
{
  font-size: 20px;   
  text-align: center;    
  text-shadow: 0 0px 50px rgb(0, 0, 0);
  color: #b3b3b3;  
}

.subtitle
{
  font-size: 25px;    
  text-decoration: solid; 
  text-decoration-thickness: 0rem;
  text-decoration-color: rgb(0, 162, 255, 0.637);
  alignment-baseline: central;
  text-shadow: 0 0px 10px rgb(0, 204, 255);
  color: #b3b3b3;  
}

.nicer
{
  font-size: 25px;    
  text-shadow: 0 0 20px rgb(0, 162, 255, 0.637);
  text-decoration: solid;
  text-decoration-style: double;  
  margin: 0 0 0;  
}

.nicer::after 
{
  content: "";
  display: block; 
  height: 4px;
  margin: 0rem 0 0;
  box-shadow: 0 0 15px var(--accent);
  border-radius: 2px;
  background: linear-gradient(90deg, #ff7700 0%, #ff77007e 30%, #1e2433 50%,  #00aaff7a 70%,#00aaff 100%); 
  background-size: 150% 100%;
  animation:  moveBg 20s ease-in-out infinite;
}

.vid-card 
{ 
  position: relative;
  top: 10px;
  margin: 0 auto 0;
  display: block;
  max-width:90%;
  z-index: -1;
  height: 150px;
  overflow: hidden;
  border-radius: 25rem; 
  box-shadow: 0 0 15px var(--accent);
}

.vid-card video
{      
  position: absolute;      
  left: 0%;
  offset-anchor: 0% 0%;
  width: 100%;
  height: 100%;  
  object-position: 0% 60%;    
  object-fit:cover;  
}

.video-wrapper {
  position: relative;
  margin: 15px auto 15px;
  width: 90%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px var(--accent);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


.text
{
  font-size: 15px;
}

h1{ 
  text-align: center;   
}

h2 {
  color: var(--accent);  
  margin-top: 2rem;
}

header {
  text-align: center;
  padding: 2rem 1rem;
}

.logo {
  position: relative;
  align-content: center;     
  z-index: 1;  
  margin-top: 5px;
  margin-right:  15px;
  width: 60px; 
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(255, 166, 0, 0.829); 
}

nav {
  margin-top: 0;
}

nav a {
  margin: 0 0.5rem;
  color: var(--dark-accent);
  width: 90px;
  font-weight: bold;
  text-align: center;
}

nav.bar {
  display: flex;  
  justify-content: center;
  align-items: center;
  gap: 0rem;
  background: none;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit , minmax(200px, 1fr)); 
  gap: 1.5rem;  
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.asset-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  align-content: center;
  height: 100%;  
  line-clamp: 3; 
  
  background: var(--card-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
  
}
.asset-card:hover {   
  transform: scale(105%);      
}
.asset-card img {
  display: block;
  width: 100%;  
  height: 150px;
  object-fit: cover;
}
.asset-card h3 {
  margin: 0.5rem 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;  
}
.asset-card p {
  margin: 0 1rem 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-align: justify;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.project-column
{
  display: grid;  
  grid-template-columns: repeat(none, minmax(250px, 1fr));
  gap: 5rem;
  margin-top: 1rem;
}

.project-box 
{
  background: var(--card-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease; 
}

.image-array
{
  margin: 1rem 1rem 1rem ;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
  grid-auto-flow: row;
  gap: 10px; 
}

.project-box img 
{     
  box-shadow: 0 0 10px #000000;
  display:block;
  overflow: hidden;
  border-radius: 1rem;
  width: 100%;
  height: 200px;    
  object-fit: cover;
  object-position: 0% 50%;
}

.project-box video 
{    
  box-shadow: 0 0 10px #000000;
  display:block;
  overflow: hidden;
  border-radius: 1rem;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.project-box h3 
{
  margin: 1rem;
}

.project-box p 
{
  margin: 1rem 1rem 1rem;
  text-align: justify;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  align-content: center;
  height: 100%; 

  background: var(--card-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.project-card:hover {
  transform: translateY(-5px);    
}

.project-card img {
  width: 100%;  
  height: 150px;
  object-fit: cover;
  display: block;
}

.project-card h3 {
  margin: 0.5rem 1rem;
}

.project-card p {
  margin: 0 1rem 1rem;
  text-align: justify;
}

.btn {
  display: block;
  background: var(--accent);
  color: #000;
  text-align: center;
  padding: 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 1rem 1rem;
  font-weight: 600;
}

.btnb
{
  background: linear-gradient(90deg, #ff7700 0%, #ff77007e 30%, #4f66a0 50%,  #00aaff7a 70%,#00aaff 100%);  
  background-size: 300%;
  color: var(--bg);
  text-decoration: none;
  padding: 0rem 1rem;
  border-radius: 1rem;
  font-weight: 1000;
  font-size: 1rem;
  animation: moveBg2 20s ease-in-out infinite;
  transition: background 0.2s ease, transform 0.1s ease;
}

.btn-nav {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  font-weight: 1000;
  font-size: 1rem;
  transition: background 0.2s ease, transform 0.1s ease;
}

.btn-nav:hover {
  background: var(--dark-accent);
  color: white;
  transform: translateY(-2px);
  border-radius: 10rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  animation: glow-button 2.5s ease-in-out infinite;   
}

.btn:hover {
  background: var(--dark-accent);
}

.btnb:hover {
  background: var(--dark-accent);
  color: white;
  transform: translateY(-2px);
  border-radius: 10rem;   
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.637);
  animation: glow-button 2.5s ease-in-out infinite; 
}
footer {
  text-align: center;
  margin: 2rem 0;
  color: #777;
  font-size: 0.9rem;
}