html {
    scroll-behavior: smooth !important;
  }

.col-centered
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                               supported by Chrome, Edge, Opera and Firefox */
}

.contact-me-inactive
{

    bottom:-100%;
}

.contact-me-active
{
    bottom:0px;
}

.custom-textarea
{
  height:210px;
}

.nav-top-hidden
{
    top: -160px;
}

.nav-top-visible
{
    top:0px;
}

.underline--magical {
    /*background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);*/
    background-image: linear-gradient(to right, #f5af19, #f12711);

    background-repeat: no-repeat;
    background-size: 100% 0.25em;
    background-position: 0 89%;
    transition: background-size 0.2s ease-in;
    padding-right: 7px;
    padding-left: 3px;

  }

  .underline--magical:hover
  {
    background-size: 100% 89%;
    padding-top: 3px;
  }

  .underline--magical-2 {
    /*background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);*/
    background-image: linear-gradient(120deg, #FDE68A 0%, #FDE68A 100%);
    
    background-repeat: no-repeat;
    background-size: 100% 0.25em;
    background-position: 0 89%;
    transition: background-size 0.2s ease-in;
    padding-right: 7px;
    padding-left: 3px;
    padding-top: -20px;

  }

  .underline--magical-2:hover
  {
    background-size: 100% 89%;
    padding-top: 3px;
  }

  .move-up-slightly
  {
    position: relative;
    top:0px;
    transition: all 0.3s ease-out;
  }

  .move-up-slightly:hover
  {
    top:-6px;
  }

  .project-picture
  {
      background-size: cover;
      background-repeat: no-repeat;
  }

  .offscreen-nav-hidden
  {
    right:-100% !important;
  }

  .offscreen-nav
  {
    position: fixed;
    right:0px;
    height:100%;
    width:100%;
  }

  .hover-padding:hover
  {
    padding: 1.5rem;
  }

  .delay1
  {
      animation-delay: 0.15s;
  }

  .delay2
  {
      animation-delay: 0.3s;
  }

  .delay3
  {
      animation-delay: 0.45s;
  }

  .delay4
  {
    animation-delay: 0.5s;
  }

  .tictactoe
  {
    background-image: url("../assets/tictactoe.png");
  }

  #space_shooter
  {
    background-image: url("../assets/arcade_spaceshooter.png");
  }

  .gameoflife
  {
    background-image: url("../assets/gameoflife.png");
  }

  a {
    color: inherit; 
    text-decoration: inherit; 
  }

  a:visited
  {
      color:inherit;
      text-decoration: inherit;
  }

  @media only screen 
  and (max-width: 413px)
  {
    .contact-me-inactive
    {
        bottom:-170%;
    }
  }

  @media only screen 
  and (max-height:500px)
  {
    .contact-me-inactive
    {
      bottom:-500%;
    }
  }

  /* ---------- FLARE THEME OVERRIDES (append to styles.css) ---------- */
/* Flare gradient: #f5af19 -> #f12711 (UIGradients "Flare") */
:root{
  --flare-start: #f5af19;
  --flare-end:   #f12711;
  --flare-solid: #f12711; /* used for text/borders when a solid color is desired */
}

/* Text */
.text-green-500,
.text-green-400 { color: var(--flare-solid) !important; }

/* Backgrounds (replace plain green backgrounds with Flare gradient) */
.bg-green-400,
.bg-green-500 { 
  background: linear-gradient(90deg, var(--flare-start) 0%, var(--flare-end) 100%) !important;
  color: #fff !important;
}

/* Tailwind gradient utilities — change gradient endpoints used by bg-gradient-to-r from...to... */
.from-green-300 { --tw-gradient-from: var(--flare-start) !important; }
.to-green-400   { --tw-gradient-to:   var(--flare-end)   !important; }

/* Borders */
.border-green-400,
.border-green-500 { border-color: var(--flare-solid) !important; }

/* Hover states used across your markup */
.hover\:bg-green-400:hover,
.hover\:bg-green-500:hover {
  background: linear-gradient(90deg, var(--flare-start) 0%, var(--flare-end) 100%) !important;
  color: #fff !important;
}
.hover\:border-green-500:hover { border-color: var(--flare-solid) !important; }

/* Cases where element has transparent bg but green border/text (Extras list etc.) */
.bg-transparent.border-green-400,
.border-4.border-green-400 { border-color: var(--flare-solid) !important; color: var(--flare-start) !important; }

/* Specific utility you used in .underline--magical already uses Flare,
   keep a consistent hover highlight if needed */
.underline--magical { /* already set in styles.css but ensure consistent fallback */
  background-image: linear-gradient(to right, var(--flare-start), var(--flare-end));
}

/* Small accessibility tweak: ensure links on flare background remain readable */
a .font-extrabold, .project-description, .move-up-slightly { color: inherit; }

/* End of Flare overrides */

#patreon {
  background: white;
}

#patreon:hover {
  background-color: white;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.btn-7 {
background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-7:before,
.btn-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7:before{
   height: 0%;
   width: 2px;
}
.btn-7:after {
  width: 0%;
  height: 2px;
}
.btn-7:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover:after {
  width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7 span:before {
  width: 2px;
  height: 0%;
}
.btn-7 span:after {
  height: 2px;
  width: 0%;
}
.btn-7 span:hover:before {
  height: 100%;
}
.btn-7 span:hover:after {
  width: 100%;
}