@font-face
{
    font-family: 'theboldfont';
    src: url('THEBOLDFONT-FREEVERSION.otf');
}

html, body {
 margin: 0;
 padding: 0;
 }
body {
 background-color: black; 
 font-family: 'theboldfont'; 
 font-size: 100%;
 background-image:   url("img/BG5.png"),
 url("img/BG1.png"),
 url("img/BG2.png"),
 url("img/BG3.png"),
 url("img/BG4.png");
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: center;
background-size: cover ;
  animation: 10s para infinite linear;
  }

@keyframes para {
  100% {
    background-position: 
	0px ,
      -3840px ,
      -1920px,
      1920px ,
      1920px;
    }
  }


h1 {
 font-size: 300%; 
 color: white; 
 text-align: center;
 
 }

h2 {
 font-size: 150%; 
 color: white; 
 }
 
h3 {
 font-size: 100%; 
 color: rgb(98, 98, 98); 
 }

 h4 {
 font-size: 80%; 
 color: rgb(97, 95, 95); 
 }
p,ul,li,td {
 color: white; 
 }

 img {
	box-shadow: 
        0 6px 20px rgba(0, 0, 0, 1),
        0 3px 10px rgba(0, 0, 0, 0.6);
 }
 iframe {
	 box-shadow: 
        0 6px 20px rgba(0, 0, 0, 1),
        0 3px 10px rgba(0, 0, 0, 0.6);
 }
a:link {
 color: cyan;
 text-decoration: underline;
 }
a:visited {
 color: gray;
 }
a:hover {
 color: blue;
 text-decoration: none;
}
a:active, a:focus {
 color: red;
}
.profile-section {
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    gap: 20px;
    pointer-events: auto;
    position: relative;
    animation: slideUp 0.4s ease-out forwards;
}

.profile-section a {
	width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 115, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #f8fafc;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(0, 0, 0, 0.4);
}
	

.profile-section a:hover {
	transform: translateY(-2px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.5);
    background: rgba(0, 219, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
}



/* TOP BAR*/
/* Add a black background color to the top navigation */
.topnav {
  background-color: #000000;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #00d9ff;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.scrollingzone {
    background-color: #000000;
    overflow:scroll; 
    height:500px;
    border-radius: 15px;
    border: 2px solid #25c3f3;
    padding: 5px;
    width: 900px;
    overflow-x:hidden;

}