@font-face {
    font-family: 'Daggersquare';
    src: url(Assets/WRLAfonts/DAGGERSQUARE.otf);
 }
 
 body{
     background-image: url(Assets/WRLAbg.webp);
     background-size:100%;
     background-repeat:repeat-y;
     padding: 0;
     margin:auto;
     font-size: 24px;
     overflow-x: hidden;
     box-sizing:border-box;
 }
 
 
 /* General ^^^^^, Navbar vvvv */
 
 header{
     height:90px;
     position: fixed;
     top:0; left:0; right:0;
     background-color: rgb(0, 0, 0);
     box-shadow: 0 8px 15px #FFB500;
     display:flex;
     align-items:center;
     justify-content: space-between;
     z-index: 1000;
     font-family: 'Daggersquare', sans-serif;
 }
 
 nav {
     position: fixed;
     z-index: 10;
     left: 0;
     right: 0;
     top: 0;
     padding: 0 1%;
     height: 100px;
     background-color: #000000;
 }
 
 nav .logo {
     float: left;
     width: 10%;
     height: 100%;
     display: flex;
     align-items: center;
     color: #fff;
 }
 
 .headerpic{
     width:100px;
 }
 
 nav .links {
     padding: 0;
     margin: 0;
     width: 75%;
     height: 100%;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
 
 .on{
     color:#FFB500;
 }
 
 .off{
     color:white;
 }
 
 nav .links li {
     list-style: none;
 }
 nav .links a {
     display: block;
     padding: 1.03em;
     font-size: 30px;
     text-decoration: none;
 }
 
 nav .links a:hover{
     color:#FFB500;
     background-color: #141414;
 }
 
 
 #nav-toggle {
     position: absolute;
     top: -100px;
 }
 nav .icon-burger {
     display: none;
     position: absolute;
     right: 5%;
     top: 50%;
     transform: translateY(-50%);
 }
 nav .icon-burger .line {
     width: 30px;
     height: 5px;
     background-color: #fff;
     margin: 5px;
     border-radius: 3px;
     transition: all .3s ease-in-out;
 }
 @media screen and (max-width: 1075px) {
     nav .logo {
         float: none;
         width: auto;
         justify-content: center;
     }
     nav .links {
         float: none;
         position: fixed;
         z-index: 9;
         left: 0;
         right: 0;
         top: 100px;
         bottom: 100%;
         width: auto;
         height: auto;
         flex-direction: column;
         justify-content: space-evenly;
         background-color: #141414;
         overflow: hidden;
         box-sizing: border-box;
         transition: all .5s ease-in-out;
     }
     nav .links a {
         font-size: 20px;
     }
     nav :checked ~ .links {
         bottom: 0;
     }
     nav .icon-burger {
         display: block;
     }
     nav :checked ~ .icon-burger .line:nth-child(1) {
         transform: translateY(10px) rotate(225deg);
     }
     nav :checked ~ .icon-burger .line:nth-child(3) {
         transform: translateY(-10px) rotate(-225deg);
     }
     nav :checked ~ .icon-burger .line:nth-child(2) {
         opacity: 0;
     }
     
 }
 
 
 .Cover{
     background-color: rgb(95, 95, 95);
     top:0px;
     left:0px;
     right:0px;
     height:92px;
 }
 
 
 /* Ensure the parent li is positioned relatively */
 nav .links .dropdown {
    position: relative;
    text-align: center;
 }
 
 /* Style the dropdown menu */
 nav .links .dropdown .dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Appear below the "About" link on desktop */
    left: 0;
    background-color: #000000;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    padding: 0;
    margin: 0;
    list-style: none;
 }
 
 /* Style dropdown items */
 nav .links .dropdown .dropdown-menu li {
    display: block;
    
 }
 
 nav .links .dropdown .dropdown-menu a {
    display: block;
    padding: 10px 15px;
    font-size: 24px;
    color: white;
    text-decoration: none;
 }
 
 nav .links .dropdown .dropdown-menu a:hover {
    color: #FFB500;
    background-color: #141414;
 }
 
 /* Desktop: Show dropdown on hover */
 @media screen and (min-width: 1076px) {
    nav .links .dropdown:hover .dropdown-menu {
        display: block;
    }
 }
 
 
 /* Nav bar ^^^^^,  image slider vvvvv* */
 
 .headering{
    color:#FFB500;
    margin-top: 150px;
    text-align: center;
    font-family: 'Daggersquare';
 }

 .Da_Rels{
    color:#FFFFFF;
    font-size:1.2rem;
    text-align: center;
    font-family: 'Daggersquare';
 }

 .cata{
    color:#FFB500;
    font-size:1.3rem;
 }
 
 .me{
    color:#FFB500;
 }

 .me:hover{
    font-size:1.301rem;
 }


 footer {
    background-color: #000000;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: 'Daggersquare', sans-serif;
    font-size: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px #FFB500;
}

.fc{
    width:82%;
    margin:auto;
}

.toppon{
height:9vw;
width:25vw;
margin-left:3vw;
margin-right:3vw;
background-image:url(Assets/Uno.png);
background-size: contain;
background-color: #18181800;
cursor: pointer;
border: none; 
}

.toppon2{
height:9vw;
width:25vw;
margin-left:3vw;
margin-right:3vw;
background-image:url(Assets/Uno2.png);
background-size: contain;
background-color: #05050500;
cursor: pointer;
border: none;  
}

.toppon3{
height:5vw;
width:4vw;
background-image:url(Assets/Uno3.png);
background-repeat: no-repeat;
background-size: contain;
background-color: #18181800;
border: none;  
}

.gg{
text-decoration: none;
}

.toppon:hover, .toppon2:hover{
transform:translate(2px) scale(1.03);
background-color: #050505;
border: 1px solid #FFFFFF;  
}

.line2{
width:30%;
margin-bottom: 20px;
border-color: #fff;
}