:root {

  --primary-color: #3d92c7;

  --secondary-color: #1f7ed6;

  --background-color: #071c38;

  --text-color: #ffffff;

  --card-background: #09111d;

  --hover-color: #0c6be7;

  --button-hover-color: #389dfc;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  font-family: 'Roboto', Arial, sans-serif;

  -webkit-user-drag: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -o-user-select: none;

  user-select: none;

}



html {

  scroll-behavior: smooth;

}



:target::before {

  content: "";

  display: block;

  height: 80px;

  margin: -80px 0 0;

}



body {

  background: radial-gradient(#184a8d, var(--background-color));

  background-attachment: fixed;

  color: var(--text-color);

  line-height: 1.6;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: 'Poppins', Arial, sans-serif;

  font-weight: 600;

}



new {

  background: linear-gradient(130deg, rgba(186, 148, 62, 1) 0%, rgba(236, 172, 32, 1) 20%, rgba(186, 148, 62, 1) 39%, rgba(249, 244, 180, 1) 50%, rgba(186, 148, 62, 1) 60%, rgba(236, 172, 32, 1) 80%, rgba(186, 148, 62, 1) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: shine 4s infinite;

  background-size: 300%;

  background-position: left;

  text-transform: uppercase;

  font-weight: bold;

}



@keyframes shine {

  to {

    background-position: right

  }

}



::-webkit-scrollbar {

  width: 10px;

}



::-webkit-scrollbar-track {

  background: #11427a;

}



::-webkit-scrollbar-thumb {

  background: var(--primary-color);

  border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--hover-color);

}



.tgs {

  color: #046ee7;

}



.tgs:hover {

  color: #046ee7;

  text-decoration: underline !important;

}



#consent-popup {

  z-index: 2;

  color: white;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 170px;

  backdrop-filter: blur(10px);

  background-color: #000000a1;

}



.status {

  background-color: #db4949;

  border-radius: 7px;

  padding: 5px;

}



.hidden {

  display: none;

}



blockquote {

  background: #ff00001e;

  border-left: 5px solid red;

  margin: 1.3em 1px;

  padding: 1.0em 10px 1px;

  border-radius: 4px;

  width: 80%;

  line-height: 1.0;

}



@keyframes smoothColorChange {

  0% {

    color: red;

  }



  14.3% {

    color: orange;

  }



  28.6% {

    color: yellow;

  }



  42.9% {

    color: green;

  }



  57.1% {

    color: blue;

  }



  71.4% {

    color: indigo;

  }



  85.7% {

    color: violet;

  }



  100% {

    color: red;

  }

}



.color-change {

  animation: smoothColorChange 10s linear infinite;

}



:disabled {

  cursor: not-allowed;

}



#button:disabled {

  color: #727272;

  background-color: #272727 !important;

  cursor: not-allowed;

}



.typing-text {

  /* border-right: 2px solid #ffffff; */

  white-space: nowrap;

  overflow: hidden;

  /* font-family: monospace; */

  font-size: 1rem;

}



#name:disabled, 

#title:disabled, 

#message:disabled,

#email:disabled {

  background-color: #2a2a2a !important;

  color: #666666 !important;

  border-color: #444444 !important;

  cursor: not-allowed;

}

/* Disabled input placeholder styling */
#name:disabled::placeholder,
#title:disabled::placeholder,
#message:disabled::placeholder,
#email:disabled::placeholder {
  color: #555555 !important;
  opacity: 1;
}

/* Disabled form overall styling */
form[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

form[disabled] .elem-group label {
  color: #666666 !important;
}

.title-warning,

.fa-triangle-exclamation {

  color: red;

  font-size: large;

  padding: 0.2em 1px;

}



p:first-letter,

h1:first-letter,

h2:first-letter,

h3:first-letter {

  text-transform: uppercase;

}



.atname:first-letter {

  text-transform: lowercase !important;

}



.profile-handle:first-letter {

  text-transform: lowercase !important;

}



.scrollFade {

  opacity: 1;

  pointer-events: all;

}



.scrollFade--hidden {

  opacity: 0;

  pointer-events: none;

}



.scrollFade--visible {

  opacity: 1;

  pointer-events: all;

}



.scrollFade--animate {

  transition: opacity 0.4s ease-in-out;

}



.textToHide {

  display: none;

}



.fa-spotify {

  color: #1DB954;

}



.ydo {

  padding: 7px;

}



.fa-briefcase {

  color: brown;

}



.fa-heart-crack {

  color: red;

}



.fa-graduation-cap {

  color: grey;

}



.error-message {

  color: red;

  font-size: 13px;

  margin: 10px 0;

  text-align: left;

  bottom: 20px;

  position: relative;

}



.blacklisturl {

  font-size: 13px;

  color: red;

  text-decoration: underline !important;

  bottom: 20px;

  position: relative;

}



.blacklisturl:hover {

  color: darkred;

}



.role#color {

  background: #1e66c5;

}



.skills {

  padding: 8px;

}



.role {

  font-size: 18px;

  border-radius: 15px;

  margin-right: 1px;

  margin-left: 5px;

  display: inline-block;

  padding: 1px 18px;

  transition: 0.125s;

  color: #f2f2f2;

  background-color: #f2f2f280;

  outline: 0;

  text-decoration: none;

  width: auto;

  border: none;

  backdrop-filter: blur(15px);

}



.space {

  padding: 200px;

}



.spacex {

  padding: 100px;

}



.spacexx {

  padding: 50px;

}



.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 10; /* Increase z-index to ensure it's above other elements */

  top: 0;

  left: 0;

  background: linear-gradient(145deg, #101e33, #071c38);

  overflow-x: hidden;

  transition: 0.3s ease-in-out;

  padding-top: 20px;

  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);

}



.sidenav .profile-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 20px 0;

  margin-bottom: 10px;

  border-bottom: 1px solid rgba(61, 146, 199, 0.2);

}



.sidenav .site-logo {

  width: 150px;

  height: auto;

  margin-bottom: 15px;

  transition: transform 0.3s ease;

}



.sidenav .site-logo:hover {

  transform: scale(1.05);

}



.sidenav .profile-name {

  color: var(--text-color);

  font-weight: bold;

  margin: 5px 0 0;

}



.sidenav .profile-image {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  border: 2px solid var(--primary-color);

  margin-bottom: 10px;

  background-size: cover;

  background-position: center;

}



.sidenav .profile-name {

  color: var(--text-color);

  font-weight: bold;

  margin: 5px 0 0;

}



.sidenav .profile-handle {

  color: #888;

  font-size: 14px;

  margin: 2px 0 0;

}



.sidenav a {

  padding: 15px 25px;

  text-decoration: none;

  font-size: 18px;

  color: var(--text-color);

  display: flex;

  align-items: center;

  transition: all 0.2s ease;

}



.sidenav a i {

  margin-right: 15px;

  font-size: 20px;

  width: 25px;

  text-align: center;

  color: var(--primary-color);

}



.sidenav a:hover, .sidenav a:focus, .sidenav a.active {

  background-color: rgba(61, 146, 199, 0.15);

  color: var(--primary-color);

  transform: translateX(5px);

}



.sidenav .closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  font-size: 30px;

  padding: 5px 10px;

  background: rgba(0, 0, 0, 0.2);

  border-radius: 50%;

  height: 40px;

  width: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

  transform: none;

}



.sidenav .closebtn:hover {

  background: rgba(255, 255, 255, 0.1);

  color: white;

}



.ght {

  position: fixed;

  top: 5px;

  left: 5px;

  text-align: left;

  font-size: 30px;

  cursor: pointer;

  margin-left: 30px;

  margin-top: 20px;

  z-index: 0;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: rgba(9, 17, 29, 0.8);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  transition: all 0.3s ease;

}



.ght:hover {

  background: var(--primary-color);

}



.sidenav .line {

  border: none;

  height: 1px;

  background-image: linear-gradient(to right, rgba(61, 146, 199, 0), rgba(61, 146, 199, 0.5), rgba(61, 146, 199, 0));

  margin: 10px 25px;

}



.sidenav .sidenav-footer {

  position: absolute;

  bottom: 20px;

  width: 100%;

  text-align: center;

  color: #6c757d;

  font-size: 12px;

  padding: 0 25px;

}



body.menu-open {

  overflow: hidden;

}



.overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 8; /* Below sidenav but above burger icon */

  backdrop-filter: blur(3px);

}



.sidenav a {

  padding: 26px;

  text-decoration: none;

  font-size: 25px;

  color: #1f7ed6;

  display: block;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #f1f1f1;

  background-color: #071c384f;

}



.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

}



.ght {

  position: fixed;

  top: 5px;

  left: 5px;

  text-align: left;

  font-size: 30px;

  cursor: pointer;

  margin-left: 30px;

  margin-top: 20px;

}



a {

  color: var(--primary-color);

  text-decoration: none;

  transition: color 0.3s ease, text-decoration 0.3s ease;

}



a:hover,

a:focus {

  color: var(--hover-color);

}



.nav_links {

  list-style: none;

  padding: 0;

  margin: 20px 0;

}



.nav_links li {

  margin-bottom: 10px;

}



.nav_links a {

  display: flex;

  align-items: center;

  padding: 12px 20px;

  color: var(--text-color);

  font-size: 16px;

  font-weight: 500;

  text-decoration: none;

  border-radius: 8px;

  transition: background-color 0.3s ease, color 0.3s ease;

}



.nav_links a:hover,

.nav_links a:focus {

  background-color: rgba(61, 146, 199, 0.1);

  color: var(--primary-color);

}



.nav_links i {

  margin-right: 12px;

  font-size: 18px;

  width: 24px;

  text-align: center;

}



.nav_links a.active {

  background-color: var(--primary-color);

  color: white;

}



.line {

  border: none;

  height: 1px;

  background-color: rgba(61, 146, 199, 0.2);

  margin: 15px 30px;

  opacity: 0.5;

}



.line {

  border: none;

  height: 1px;

  background-image: linear-gradient(to right, rgba(61, 146, 199, 0), rgba(61, 146, 199, 0.5), rgba(61, 146, 199, 0));

  margin: 15px 30px;

}



.imgs {

  padding: 10px;

  max-width: 100%;

}



#urls {

  text-decoration: underline;

  color: #046ee7;

}



#urls:hover {

  color: #104480;

}



#legal {

  color: #0853a8;

}



#legal:hover {

  text-decoration: underline;

}



.bg-text {

  background-color: rgba(9, 17, 29, 0.8);

  backdrop-filter: blur(10px);

  border-radius: 15px;

  color: var(--text-color);

  font-weight: bold;

  border: 2px solid var(--primary-color);

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;

  width: 80%;

  max-width: 600px;

  padding: 30px;

  text-align: center;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  min-height: 200px; 

}



.bg-text h1 {

  font-size: 2.5rem;

  margin-bottom: 15px;

  color: var(--primary-color);

}



.typing-text {

  font-size: 1rem;

  min-height: 1.2em; 

  margin: 0;

  padding: 0;

  position: relative;

}



.typing-text::after {

  content: '|';

  position: absolute;

  right: -5px;

  top: 0;

  animation: blink 0.7s infinite;

}

.bg-text h1 {

  font-size: 2.5rem;

  margin-bottom: 15px;

  color: var(--primary-color);

}



.bg-text p {

  font-size: 1.2rem;

  line-height: 1.6;

}



.bg-text img {

  width: 90px;

  height: auto;

  vertical-align: middle;

  margin-left: 10px;

}



@keyframes blink {

  0%, 100% { opacity: 1; }

  50% { opacity: 0; }

}



#header-image {

  width: 100%;

  height: 100vh;

  background: url("https://www.droot.me/home/imgs/background.jpg") top center;

  backdrop-filter: blur(10px);

  background-size: cover;

}



.fade-in {

  animation: fadeIn 2s;

  opacity: 1;

}



@keyframes fadeIn {

  from {

    opacity: 0;

  }



  to {

    opacity: 1;

  }

}



.play-on-hover {

  width: 150px;

  height: 150px;

  background-image: url("../imgs/pfp.png");

  background-size: cover;

}



.play-on-hover:hover {

  background-image: url("../gifs/pfp.gif");

  cursor: grab;

}



[data-title] {

  position: relative;

  cursor: default;

}



[data-title]:hover::before {

  content: attr(data-title);

  position: absolute;

  bottom: -22px;

  display: inline-block;

  padding: 3px 6px;

  border-radius: 2px;

  background: #333333;

  color: #fff;

  font-size: 12px;

  font-family: sans-serif;

  white-space: nowrap;

  border-radius: 3px;

}



[data-title]:hover::after {

  content: '';

  position: absolute;

  bottom: -3px;

  left: 15px;

  display: inline-block;

  color: #fff;

  border: 8px solid transparent;

  border-bottom: 8px solid #333333;

}



#header {

  background: var(--card-background);

}



footer {

  color: #1d375e;

  font-family: arial;

  font-size: 10px;

  position: absolute;

  bottom: 0;

  width: 80%;

  height: 2.5rem;

}



.line {

  border: 1px solid #2f63c45b;

}



#profile-pic {

  border-radius: 50%;

  display: block;

  margin-left: auto;

  margin-right: auto;

  width: 150px;

  padding: 10px;

  -webkit-user-drag: none;

}



.atname {

  color: grey;

  font-size: larger;

  font-family: Arial;

  text-align: center;

  margin-left: auto;

  margin-right: auto;

  margin-top: -10px;

}



.atname:first-letter {

  text-transform: lowercase;

}



.name {

  font-size: larger;

  font-family: Arial;

  font-weight: bold;

  padding: 10px;

  text-align: center;

  margin-left: auto;

  margin-right: auto;

}



.nav_links {

  text-align: start;

  transition-duration: 0.4s;

  font-family: Arial, sans-serif;

  color: var(--primary-color);

  list-style: none;

  font-size: 20px;

}



.nav_links li {

  padding: 5px 0;

  margin-left: 0;

  margin-right: 0;

}



.nav_links li a {

  display: block;

  padding: 10px 30px 10px 60px;

  text-decoration: none;

  color: inherit;

  transition: color 0.3s ease, background-color 0.3s ease;

}



.nav_links li a:hover {

  color: var(--text-color);

  opacity: 1;

  background-color: rgba(255, 255, 255, 0.1);

}



.nav_links li a i {

  margin-right: 15px;

  width: 20px;

  text-align: center;

}



.wrap {

  max-width: 1140px;

  margin: 0 auto;

  padding: 1em;

}



.wrap:after {

  content: "";

  display: table;

  clear: both;

}



.socials {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  margin-top: 20px;

}



.socials a {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 40px;

  height: 40px;

  border-radius: 30%;

  background-color: var(--card-background);

  transition: transform 0.3s ease, background-color 0.3s ease;

}



.socials img {

  width: 24px;

  height: 24px;

  transition: filter 0.3s ease;

}



.socials a:hover {

  transform: translateY(-3px);

}



.socials a[title="Bluesky"] img {

  width: 45px;

  height: 45px;

  bottom: 1px;

  position: relative;

}



.socials a:not([title="VRChat"]) img {

  filter: brightness(0) invert(1);

}



.socials a[title="Discord"] {

  background-color: #5865F2;

}



socials a[title="Discord"]:hover {

  background-color: #7289DA;

}



.socials a[title="Bluesky"] {

  background-color: #0085ff;

}



socials a[title="Bluesky"]:hover {

  background-color: #4ca2ff;

}



.socials a[title="Twitter/X"] {

  background-color: #000000;

}



socials a[title="Twitter/X"]:hover {

  background-color: #2c2c2c;

}



socials a[title="Twitch"] {

  background-color: #9146FF;

}



socials a[title="Twitch"]:hover {

  background-color: #B27AFF;

}



socials a[title="GitHub"] {

  background-color: #333;

}



socials a[title="GitHub"]:hover {

  background-color: #555;

}



socials a[title="VRChat"] {

  background-color: #024da8;

}



socials a[title="VRChat"]:hover {

  background-color: #2c7cdf;

}



.fcf-body {

  font-family: -apple-system, Arial, sans-serif;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: white;

  text-align: left;

  padding: 30px;

  border: 1px solid var(--card-background);

  border-radius: 0.65rem;

  max-width: 100%;

  width: 45pc;

  margin: 10px auto;

  background: var(--card-background);

}



#blog {

  font-family: -apple-system, Arial, sans-serif;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: white;

  text-align: left;

  width: 45pc;

  max-width: 800px;

  margin: 0 auto;

}



.blog-container {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



.blog-post {

  background: #101e33;

  border-radius: 0.65rem;

  padding: 20px;

  transition: transform 0.3s ease;

}



.blog-post:hover {

  transform: translateY(-5px);

}



.post-header {

  display: flex;

  align-items: center;

  margin-bottom: 15px;

}



.author-image {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  margin-right: 15px;

}



.post-meta {

  flex-grow: 1;

}



.post-title {

  margin: 0;

  font-size: 1.5rem;

  color: var(--primary-color);

}



.post-date {

  margin: 5px 0 0;

  font-size: 0.9rem;

  color: #888;

}



.post-content p {

  margin-bottom: 15px;

}



.read-more {

  display: inline-block;

  padding: 5px 10px;

  background-color: var(--secondary-color);

  color: white;

  text-decoration: none;

  border-radius: 5px;

  transition: background-color 0.3s ease;

}



.read-more:hover {

  background-color: var(--button-hover-color);

  color: #ffffff;

}



@media (max-width: 768px) {

  #blog {

    padding: 20px;

  }

}



input[type=text],

select,

textarea {

  display: block;

  height: calc(1.5em + 0.75rem + 2px);

  padding: 0.115rem .45rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #e6e6e6;

  background-color: #152642;

  background-clip: padding-box;

  border: 1px solid #1f7ed6;

  outline: none;

  border-radius: 5px;

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



input[type=text]:focus,

select:focus,

textarea:focus {

  border-color: var(--primary-color);

  box-shadow: 0 0 0 2px rgba(61, 146, 199, 0.25);

}



input[type=text]::placeholder,

select::placeholder,

textarea::placeholder {

  color: #a0a0a0;

}



input[type=text]:hover,

select:hover,

textarea:hover {

  border-color: var(--primary-color);

}



textarea {

  resize: vertical;

  height: 250px;

}



div.elem-group {

  margin: 20px 0;

}



label {

  display: block;

  font-family: "Montserrat", sans-serif;

  padding-bottom: 8px;

  color: var(--primary-color);

  font-weight: 500;

}



input,

select,

textarea {

  box-sizing: border-box;

  font-family: "Montserrat", sans-serif;

  width: 100%;

  padding: 10px 12px;

}



input[type="email"] {

  color: #e6e6e6;

  background-color: #152642;

  border: 1px solid #1f7ed6;

  border-radius: 5px;

}



input[type="email"]:focus {

  border-color: var(--primary-color);

  box-shadow: 0 0 0 2px rgba(61, 146, 199, 0.25);

}



input[type="email"]:hover {

  border-color: var(--primary-color);

}



input[type="email"]::placeholder {

  color: #a0a0a0;

}



.modal {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.4);

}



.modal-content {

  background-color: #fefefe;

  color: black;

  margin: auto;

  padding: 20px;

  border: 1px solid #888;

  width: 80%;

  border-radius: 0.65rem;

  text-align: left;

}



.modal-content li:hover {

  color: black;

}



.content-wrapper {

  text-align: left;

}



.modal-content ul,

.modal-content ol {

  padding-left: 20px;

}



.modal-content h2 {

  padding: 10px;

}



.modal-content li,

.modal-content p {

  padding-left: 20px;

}



.close {

  color: #aaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

  cursor: pointer;

}



.close:hover,

.close:focus {

  color: black;

  text-decoration: none;

}



#button {

  margin: 10px 0;

  height: 50px;

  width: 100px;

  transition: all 0.3s ease;

  background: var(--secondary-color);

  color: white;

  border: none;

  font-size: 18px;

  font-weight: 500;

  font-family: 'Roboto', arial;

  border-radius: 5px;

  cursor: pointer;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



#button:hover {

  background-color: var(--primary-color);

  transform: translateY(-2px);

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);

}



section#skills {

  font-family: -apple-system, Arial, sans-serif;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: white;

  text-align: left;

  padding: 30px;

  border: 1px solid var(--card-background);

  border-radius: 0.65rem;

  max-width: 100%;

  width: 45pc;

  margin: 10px auto;

  background: var(--card-background);

}



.info-box {

  background: linear-gradient(135deg, #152642 0%, #101e33 100%);

  /* background-color: #101e33; */

  border-radius: 15px;

  padding: 20px;

  margin-bottom: 20px;

  transition: transform 0.3s ease;

}



.info-box:hover {

  transform: translateY(-5px);

}



#skills h2 {

  color: white;

  padding: 15px;

}



footer {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 10px 20px;

  z-index: 100;

}



footer p {

  color: #1d375e;

  font-family: Arial, sans-serif;

  font-size: 12px;

  margin: 0;

  text-align: left;

}



@media screen and (min-width: 1700px) {

  #page {

    right: 0;

  }



  #header {

    top: 0;

    bottom: 0;

    left: 0;

    width: 380px;

    position: fixed;

    background-color: var(--card-background);

  }



  #header-right {

    top: 0;

    bottom: 0;

    right: 0;

    width: 350px;

    position: fixed;

    background-color: var(--card-background);

  }



  body {

    text-align: center;

  }



  #header-image {

    background-attachment: fixed;

  }

}



@media (max-width: 768px) {

  .socials {

    gap: 15px;

  }



  .socials a {

    width: 35px;

    height: 35px;

  }



  .socials img {

    width: 20px;

    height: 20px;

  }

}



@media only screen and (max-width: 1700px) {

  * {

    margin-left: 0;

    margin-right: 0;

  }



  html {

    overflow-y: scroll;

  }



  #skills ul {

    position: relative;

    left: auto;

    width: auto;

  }



  #header {

    margin-left: 0;

  }



  footer {

    display: none;

  }



  #header-image {

    display: none;

  }



  .bg-text {

    display: none;

  }



  nav {

    display: none;

  }



  #consent-popup {

    padding: 180px 40px;

  }



  .announcement {

    background: #0762ad;

    color: #ffffff !important;

    text-align: center;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    padding: 3px 12px;

    top: 0;

    bottom: 0;

    width: 100%;

    margin-bottom: 0;

  }



  #header-right {

    display: none;

  }



  #ggs {

    text-align: center;

  }



  .content {

    max-width: 100%;

  }



  .space {

    padding: 100px;

  }



  .spacex {

    padding: 50px;

  }



  .spacexx {

    padding: 30px;

  }



  .line {

    border: 1px solid #3131315b;

  }



  .space,

  .spacex {

    display: none;

  }

}



@media screen and (min-width: 1670px) {

  mobile {

    display: none;

  }



  #primary {

    text-align: left;

    float: center;

    width: 100%;

    padding-right: 1em;

  }


  #footer {

    clear: both;

  }

}



#page {

  min-height: calc(100vh - 40px);

}



footer.show {

  display: block;

}



/* About Section Improvements */

#about-section {

  width: 45pc;

  max-width: 100%;

  margin: 10px auto;

  /* Using the site's existing card style by adding fcf-body class to the section in HTML */

}



.about-container {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}



.about-column {

  flex: 1 1 400px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.info-box {

  background: linear-gradient(135deg, #152642 0%, #101e33 100%);

  border-radius: 15px;

  padding: 20px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  flex: 1;

}



.info-box:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}



.info-box h2 {

  color: var(--primary-color);

  margin-bottom: 15px;

  padding-bottom: 10px;

  border-bottom: 1px solid rgba(61, 146, 199, 0.2);

  font-size: 1.4rem;

  display: flex;

  align-items: center;

  gap: 10px;

}



.info-box h2 i {

  color: var(--primary-color);

}



.info-box ul {

  list-style-type: none;

  padding: 0;

}



.info-box ul li {

  margin-bottom: 12px;

  padding-left: 5px;

  display: flex;

  align-items: center;

  gap: 10px;

}



.info-box ul li i {

  width: 20px;

  text-align: center;

}



/* Updated Games Section */

.games-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.game-row {

  display: flex;

  background: rgba(29, 59, 100, 0.5);

  border-radius: 8px;

  padding: 10px;

  align-items: center;

}



.game-row.favorite {

  background: linear-gradient(90deg, rgba(61, 146, 199, 0.2) 0%, rgba(29, 59, 100, 0.5) 100%);

  border-left: 3px solid var(--primary-color);

}



.game-icon {

  width: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.game-icon i.fas.fa-crown {

  color: gold;

}



.game-info {

  flex: 1;

}



.game-since {

  display: block;

  font-size: 0.85rem;

  color: #aaa;

  margin-top: 3px;

}



.more-games {

  margin-top: 15px;

  text-align: right;

  display: block;

  font-size: 0.9rem;

  color: var(--secondary-color);

  text-decoration: none;

  padding: 5px;

}



.more-games i {

  font-size: 0.8rem;

  margin-left: 3px;

}



/* Updated Characters Section */

.character-items {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.character-row {

  display: flex;

  background: rgba(29, 59, 100, 0.5);

  border-radius: 8px;

  padding: 10px;

  align-items: center;

}



.character-number {

  width: 25px;

  font-weight: bold;

  color: var(--primary-color);

}



.character-info {

  flex: 1;

}



.character-from {

  display: block;

  font-size: 0.85rem;

  color: #aaa;

  margin-top: 3px;

}



/* Updated Skills Section - Using tags instead of progress bars */

.skills-container {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.skill-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: rgba(29, 59, 100, 0.5);

  border-radius: 8px;

  padding: 10px 15px;

}



.skill-name {

  font-weight: 500;

}



.skill-tag {

  padding: 4px 10px;

  border-radius: 30px;

  font-size: 0.85rem;

  font-weight: 600;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}



.skill-tag.experienced {

  background: linear-gradient(90deg, #1f7ed6, #3d92c7);

  color: white;

}



.skill-tag.intermediate {

  background: linear-gradient(90deg, #2d9ad5, #5db6e5);

  color: white;

}



.skill-tag.beginner {

  background: rgba(61, 146, 199, 0.3);

  border: 1px solid rgba(61, 146, 199, 0.5);

  color: #78b8e4;

}



/* Remove old skill progress bar styles */

.skill-label,

.skill-level,

.skill-bar,

.skill-progress,

.skill-indicator {

  /* These styles are being replaced by the tag system */

}



/* Updated Skills Section - Using tags without levels */

.skill-category {

  margin-bottom: 20px;

}



.skill-category h3 {

  color: var(--secondary-color);

  font-size: 1.1rem;

  margin-bottom: 10px;

  padding-bottom: 5px;

  border-bottom: 1px solid rgba(61, 146, 199, 0.2);

}



.skill-category:last-child {

  margin-bottom: 0;

}



.skill-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.skill-tag {

  background: rgba(31, 126, 214, 0.2);

  border: 1px solid rgba(61, 146, 199, 0.5);

  color: var(--text-color);

  padding: 6px 12px;

  border-radius: 30px;

  font-size: 0.9rem;

  font-weight: 500;

  transition: all 0.3s ease;

}



.skill-tag:hover {

  background: rgba(31, 126, 214, 0.4);

  transform: translateY(-2px);

}



/* Remove old skill item styles that are no longer needed */

.skill-item,

.skill-name,

.skill-tag.experienced,

.skill-tag.intermediate,

.skill-tag.beginner {

  /* These styles are being replaced by the unified tag system */

}



.social-link {

  background-color: rgba(29, 185, 84, 0.1);

  padding: 2px 8px;

  border-radius: 5px;

  margin-left: 5px;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  transition: background-color 0.3s ease;

}



.social-link:hover {

  background-color: rgba(29, 185, 84, 0.2);

}



/* Responsive adjustments for the about section */

@media (max-width: 850px) {

  .about-container {

    flex-direction: column;

  }

  

  .about-column {

    width: 100%;

  }

  

  #about-section {

    width: 90%;

    padding: 15px;

  }

}



/* Skill Categories */

.skill-category {

  margin-bottom: 20px;

}



.skill-category h3 {

  color: var(--secondary-color);

  font-size: 1.1rem;

  margin-bottom: 10px;

  padding-bottom: 5px;

  border-bottom: 1px solid rgba(61, 146, 199, 0.2);

}



.skill-category:last-child {

  margin-bottom: 0;

}



.skill-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: rgba(29, 59, 100, 0.5);

  border-radius: 8px;

  padding: 10px 15px;

  margin-bottom: 8px;

}



.skill-item:last-child {

  margin-bottom: 0;

}



/* Enhanced Blog Section Styles */

.blog-section {

  height: auto;

  max-height: 1000px;

  overflow: auto;

  padding-right: 15px;

  scrollbar-width: thin;

  scrollbar-color: var(--primary-color) rgba(17, 66, 122, 0.3);

}



.section-title {

  margin-bottom: 20px;

  padding-bottom: 10px;

  border-bottom: 1px solid rgba(61, 146, 199, 0.2);

  color: var(--primary-color);

  font-size: 1.4rem;

  display: flex;

  align-items: center;

  gap: 10px;

}



.section-title i {

  color: var(--primary-color);

}



.featured-post-container {

  margin-bottom: 30px;

}



.featured-post {

  border-left: 4px solid var(--primary-color);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.featured-post:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.posts-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));

  gap: 20px;

}



.post-details {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-top: 5px;

  color: #888;

  font-size: 0.9rem;

}



.post-date, .reading-time {

  display: flex;

  align-items: center;

  gap: 5px;

}



.reading-time i {

  color: var(--primary-color);

}



.post-date i {

  color: #888;

}



.read-more {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  margin-top: 15px;

  padding: 8px 16px;

  background-color: var(--secondary-color);

  color: white;

  border-radius: 5px;

  transition: all 0.3s ease;

  text-decoration: none;

}



.read-more:hover {

  background-color: var(--button-hover-color);

  transform: translateX(5px);

}



.read-more i {

  transition: transform 0.3s ease;

}



.read-more:hover i {

  transform: translateX(3px);

}



.no-posts {

  text-align: center;

  padding: 50px 20px;

  color: #888;

}



.no-posts i {

  margin-bottom: 20px;

  color: var(--primary-color);

  opacity: 0.6;

}



/* Responsive improvements for blog section */

@media (max-width: 768px) {

  .blog-section {

    padding-right: 10px;

    max-height: 800px;

  }

  

  .posts-grid {

    grid-template-columns: 1fr;

  }

  

  .post-details {

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

  }

}



/* Fix for excessive mobile zoom by preventing horizontal scroll */

@media (max-width: 768px) {

  body {

    overflow-x: hidden;

    width: 100%;

    position: relative;

  }

  

  /* Ensure these containers don't cause overflow */

  .fcf-body, 

  #blog, 

  #about-section,

  section#skills {

    width: 100%;

    box-sizing: border-box;

    padding-left: 15px;

    padding-right: 15px;

  }

}