@font-face {
  font-family: 'steelFont'; /* set name */
  src: url('https://rayepierre335.neocities.org/assets/Kings-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'mainFont'; /* set name */
  src: url('https://rayepierre335.neocities.org/assets/NewRocker-Regular.ttf') format('truetype');
}
 
  body{
  background-color: #1c1c1c;
  display:flex;
  flex-direction: column;
  background-image: url('https://rayepierre335.neocities.org/assets/obeliskInsides.png');
  background-size:100%;
  }

h1{
  margin: 0 25% 0 25%;
  font-size: 400%;
  color: #174ad0;
  font-family: steelFont;
  text-align: center;
  text-shadow: 3px 3px 6px black;
}

h2, h3, h4{
  margin: 0 20% 0 20%;
  color: #174ad0;
  font-family: steelFont;
  text-align: center;
  text-shadow: 3px 3px 6px black;
}

img{
max-height:100%;
width:100%;
}

#core{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-height:100%;
  width:25%;
  padding:3%;
}

#emphasis{
  padding: 5% 0 0 0;
  font-size: 200%;
}

.neighbors{
  margin-left: auto;
  margin-right: auto;
display: grid;
width:auto;
text-align:center;
margin-top:2%;
grid-template-columns: repeat(10, auto);
grid-template-rows: repeat(10, 27%);
grid-gap: 10px;
}

#Gator{
cursor: pointer;
}

.PWA{
z-index:4;
  position: fixed;
  bottom: 8px;
  right: -25px;
}

#Navi{
transition: all 0.3s ease-in-out;
filter: opacity(100%) blur(0px) brightness(100%) contrast(100%) saturate(100%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

#Navi:hover{
transform: scale(1.2);
filter: brightness(75%) contrast(100%) saturate(150%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

#naVI{
width:50%;
transition: all 0.3s ease-in-out;
filter: opacity(100%) blur(0px) brightness(100%) contrast(100%) saturate(100%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

#naVI:hover{
transform: scale(1.2);
filter: brightness(75%) contrast(100%) saturate(150%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

.navContent{
display: grid;
position:relative;
width:auto;
text-align:center;
margin-top:2%;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(3, 30%);
grid-gap: 5px;
}

.PDA{
height:0;
width:35%;
z-index:4;
position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
overflow-x:hidden;
transition:0.3s;
background-color:#9c1c00;
  background-image: url('https://rayepierre335.neocities.org/assets/navi.png');
  border: 0px solid #9c1c00;
  border-radius: 5px;
opacity:0.8;
}

.PDA a{
  padding: 8px;
  text-decoration: none;
  font-size: 125%;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

  
  /* customizable snowflake styling */

  @-webkit-keyframes snowflakes-fall {
    0% {
      top: 100%
    }

    100% {
      top: -10%
    }
  }

  @-webkit-keyframes snowflakes-shake {

    0%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0)
    }

    50% {
      -webkit-transform: translateX(80px);
      transform: translateX(80px)
    }
  }

  @keyframes snowflakes-fall {
    0% {
      top: 100%
    }

    100% {
      top: -10%
    }
  }

  @keyframes snowflakes-shake {

    0%,
    100% {
      transform: translateX(0)
    }

    50% {
      transform: translateX(80px)
    }
  }

  .snowflake {
    position: fixed;
    top: -100%;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 30s, 9s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 30s, 9s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
  }

.snowflake img{
max-height:100%;
width:15%;
}

  .snowflake:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
  }

  .snowflake:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 3s, 3s;
    animation-delay: 3s, 3s
  }

  .snowflake:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 18s, .15s;
    animation-delay: 18s, .15s
  }

  .snowflake:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 12s, 6s;
    animation-delay: 12s, 6s
  }

  .snowflake:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 6s, 6s;
    animation-delay: 6s, 6s
  }

  .snowflake:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 24s, 9s;
    animation-delay: 24s, 9s
  }

  .snowflake:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 18s, 6s;
    animation-delay: 18s, 6s
  }

  .snowflake:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 7.5s, 3s;
    animation-delay: 7.5s, 3s
  }

  .snowflake:nth-of-type(8) {
    left: 80%;
    -webkit-animation-delay: 3s, 0s;
    animation-delay: 3s, 0s
  }

  .snowflake:nth-of-type(9) {
    left: 90%;
    -webkit-animation-delay: 9s, 1.5s;
    animation-delay: 9s, 4.5s
  }

  .snowflake:nth-of-type(10) {
    left: 25%;
    -webkit-animation-delay: 6s, 0s;
    animation-delay: 6s, 0s
  }

  .snowflake:nth-of-type(11) {
    left: 65%;
    -webkit-animation-delay: 12s, 7.5s;
    animation-delay: 12s, 7.5s
  }

@media (max-width: 80rem) {
}