/**
 * index.css CSS file
 *
 * Author: Brandon Wright <Brandon.Antony.Wright@outlook.com>
 * Date: Aug 04, 2025
 * License: MIT
 *
 * Note: This is heavily plaigarised from https://ysap.sh/ with my own modifications using code from multiple online sources
 */

* {
	margin: 0;
	padding: 0;
}

:root {
	--BG: #0A192F;
	--HIGHLIGHT: yellow;
	--IMPORTANT: #61DAFB;
	--NAV-ACTIVE: #333;
	--TEXT: #CCD6F6;
}

#container {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	max-width: 800px;
	padding: 0 6px;
}

#top-nav {
	text-align: left;
	border-bottom: 1px solid #CCD6F6; 
	margin-bottom: 21px;
}

#top-nav > ul {
	list-style: none;
	overflow: hidden;
}

#top-nav > ul > li {
	float: left;
}

#top-nav > ul > li.right {
	float: right;
}

#top-nav > ul > li > a {
	display: block;
	text-align: center;
	padding: 14px 13px;
	text-decoration: none;
}

#top-nav > ul > li .active {
	color: var(--IMPORTANT);
}

#top-nav > ul > li a:hover {
	background-color: var(--NAV-ACTIVE);
}

.title{

    font-size: 24px;
}

/* CURSOR FROM: https://jeelh.itch.io/retro-cursor */

html{
	cursor: url("../Images/Cursors/Cursor.png"), auto;
}

body {
	background-color: var(--BG);
	font-size: 13px;
    color: #CCD6F6;
    font-family: "Google Sans Code", monospace;
    font-optical-sizing: auto;
	
}

ul {
	list-style-type: none;
}

a, a:visited {
	color: var(--TEXT);
	text-decoration: none;
	cursor: url("../Images/Cursors/Move.png"), auto;
}

.footer {
    text-align: center;
    font-size: 12px;
}

/* Typewriter https://css-tricks.com/snippets/css/typewriter-effect/ */


.line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

#contents{

    font-size: medium;
	max-width: 600px;
    margin-top: 10px;
}

/* Left right container alignment */
.container {
  display: flex;
  justify-content: space-between; 
  gap: 20px;
}

.box {
  flex: 1; /* equal width */
  padding: 20px;
  text-align: center;
}

.box-left {
 text-align: left;
}

/* .box-right {
 
}  */

/* Left right container alignment */

/* Pfp css */


.avatar {
  width: 200px;
  height: auto;
  
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--IMPORTANT);
  
}

.avatar:hover {
  width: 200px;
  height: auto;
  
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--HIGHLIGHT);
  
}


#avatarContainer {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

/* Pfp css */


/* Misc */

#hidden{

  opacity: 1;
  transition: opacity 2s ease-out;

}

#hidden:hover{

  opacity: 0;

}

.marginText{

	margin-top: 50px;
}


/* Misc */



/* Typewriter https://css-tricks.com/snippets/css/typewriter-effect/ */


/* Animated glitch */


.center-text {
	margin: auto;
	font-size: 24px;
}

.glitch {
	position: relative;
	mix-blend-mode: lighten;
}

.glitch:before,
.glitch:after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: black;
	clip: rect(0, 0, 0, 0);
}

.glitch:before {
	left: -1px;
	text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
}

.glitch:after {
	left: 1px;
	text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
}

.glitch:hover:before {
	animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
}

.glitch:hover:after {
	animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
}


/* Hover over text CSS */

.hover-wrapper {
  position: relative; 
  display: inline-block;
}

.hover-card {
  position: fixed;
  display: none;
  background: white;
  color: black;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  pointer-events: none; 
  z-index: 1000;
  font-size: 14px;
  white-space: nowrap;
}

.hover-target:hover + .hover-card {
  display: block; 
  
}

/* Hover over text CSS */


/* Highlighting */
a.highlight{
    color:var(--HIGHLIGHT);
}

a.highlight:visited{

    color:var(--HIGHLIGHT);

}

.hover-text{

    color:var(--HIGHLIGHT);

}

.hover-text:hover{

	cursor: url("../Images/Cursors/Help\ Select.png"), auto;

}

/* Highlighting */

/* Cards */

.grid-container {

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

.card {
	background-color: #1a2739;
	border: 1px solid #2a3f55;
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.card h3 {
	margin-top: 0;
	color: var(--IMPORTANT);
}

.card p {
	color: var(--TEXT);
}

/* Cards */


/* Icon carousel */

.slider {
  background: transparent;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right,var(--BG) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}

.slideImg{

	width:100px;
	height: auto;

}

/* Icon carousel */

/* Animations */

@keyframes glitch-loop-1 {
	0% {
		clip: rect(5px, 9999px, 10px, 0);
	}
	25% {
		clip: rect(8px, 9999px, 20px, 0);
	}
	50% {
		clip: rect(15px, 9999px, 25px, 0);
	}
	75% {
		clip: rect(12px, 9999px, 22px, 0);
	}
	100% {
		clip: rect(10px, 9999px, 28px, 0);
	}
}

@keyframes glitch-loop-2 {
	0% {
		top: -1px;
		left: 1px;
		clip: rect(10px, 9999px, 25px, 0);
	}
	25% {
		top: -2px;
		left: 2px;
		clip: rect(15px, 9999px, 18px, 0);
	}
	50% {
		top: -1px;
		left: 1px;
		clip: rect(8px, 9999px, 14px, 0);
	}
	75% {
		top: 0px;
		left: -2px;
		clip: rect(12px, 9999px, 19px, 0);
	}
	100% {
		top: -1px;
		left: -1px;
		clip: rect(14px, 9999px, 24px, 0);
	}
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

/* Animations */