@font-face {
    font-family: 'HeaderFont';
    src: url('../fonts/Decaydence.woff2') format('woff2'),
         url('../fonts/Decaydence.woff')  format('woff'),
         url('../fonts/Decaydence.otf')   format('opentype');
    font-weight: normal;
    font-style: normal;
  }

  :root {
    --themeColour: rgb(183, 0, 255);
  }

h1, h2, h3, h4, h5, h6 {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h3 {
    display: block;
    font-weight: normal;
    margin-top: 15px;
    margin-bottom: 15px;
}

h4 {
    display: block;
    font-weight: normal;
    margin-top: 15px;
    margin-bottom: 15px;
}

h5 {
    display: block;
    font-weight: normal;
    font-stretch: narrower;
    margin-top: 0px;
    margin-bottom: 0px;
}

h6 {
    display: block;
    font-size: 16px;
    font-weight: normal;
    font-stretch: narrower;
    margin-top: 0px;
    margin-bottom: 4px;
}

/* Set background color to black for the entire page */
body {
    background-color: black;
    color: white; /* Set default text color to white for readability */
    padding-bottom: 40px;
}

/* Header styling */
.header {
    display: flex;
    justify-content: center; /* Center the logo */
    align-items: center;
    padding: 10px;
    background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0) 100%);
    color: white;
    position: sticky; /* Allow positioning of the right-aligned content */
    top: 0;
    z-index: 100;
    height: 40px;
}

/* Logo styling */
.logo img {
    height: 50px; /* Adjust the height of the logo */
    position: absolute; /* Keep the logo centered */
    left: 50%; /* Move it to the center */
    transform: translateX(-50%); /* Offset it back to center */
    top: 10%;
}

.logo-text {
    font-family: 'HeaderFont', sans-serif;
    font-size: 2.5rem; /* example size */
    /* any additional styling */
    color: white;

    text-shadow: 
    0 0 10px  var(--themeColour),
    0 0 20px var(--themeColour);
  }

/* Style for controlling the color of the SVG */
.tile-menu-icon {
    position: absolute;
    left: 10px; /* Align the greeting and SVG to the right */
    display: flex;
    align-items: center;
    top: 10px;
    width: 48px;
    height: 48px;
    fill: rgb(255, 255, 255); /* Default color */
    cursor: pointer;
    transition: fill 0.3s ease, transform 0.2s ease;
}

/* Change color on hover */
.tile-menu-icon:hover {
    filter: 
    drop-shadow(0 0 5px var(--themeColour))
    drop-shadow(0 0 10px var(--themeColour));
    transform: scale(1.5); /* Slight zoom effect on hover */
}


/* Style for controlling the color of the SVG */
.iptv-icon {
    position: absolute;
    left: 100px; /* Align the greeting and SVG to the right */
    display: flex;
    align-items: center;
    top: 8px;
    width: 52px;
    height: 52px;
    fill: rgb(255, 255, 255); /* Default color */
    stroke: rgb(255, 255, 255);
    stroke-width: 1.5px;
    cursor: pointer;
    transition: fill 0.3s ease, transform 0.2s ease;
}

.feature-text {
    position: absolute;
    left: 150px; /* Align the greeting and SVG to the right */
    display: flex;
    align-items: center;
    top: 20px;
}

/* Change color on hover */
.iptv-icon:hover {
    filter: 
    drop-shadow(0 0 5px var(--themeColour))
    drop-shadow(0 0 10px var(--themeColour));
    transform: scale(1.5); /* Slight zoom effect on hover */
}

.custom {
    position: absolute;
    right: 75px;
    display: flex;
    align-items: center;
}

/* SVG Icon styling */
.user-menu-icon {
    position: absolute;
    right: 14px; /* Align the greeting and SVG to the right */
    display: flex;
    align-items: center;
    top: 10px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.user-menu-icon:hover {
    filter: 
        drop-shadow(0 0 5px var(--themeColour))
        drop-shadow(0 0 10px var(--themeColour));
    transform: scale(1.5); /* Slight zoom effect on hover */
}

/* Default arrow pointing horizontally */
.customUrl {
    width: 200px;
    height: 28px;
    margin-left: 10px;
}


/* Default arrow pointing horizontally */
.go-icon {
    width: 36px;
    height: 36px;
    transform: rotate(-90deg); /* Default rotation */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transitions */
    cursor: pointer;
}

.go-icon:hover {
    transform: rotate(-90deg) scale(1.5); /* Only scale, no rotation */
    filter: 
    drop-shadow(0 0 5px var(--themeColour))
    drop-shadow(0 0 10px var(--themeColour));
}

.fullscreen-link {
    color: inherit; /* Inherit color so the SVG retains its original color */
    text-decoration: none; /* Remove underline */
    display: inline-flex; /* Aligns SVG inside anchor */
}

/* SVG Icon styling */
.fullscreen-icon {
    position: fixed;
    bottom: 10px; /* Adjust as needed */
    right: 20px;  /* Align the greeting and SVG to the right */
    display: flex;
    align-items: center;
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.fullscreen-icon:hover {
    filter: 
        drop-shadow(0 0 5px var(--themeColour))
        drop-shadow(0 0 10px rgb(201, 174, 211));
    transform: scale(1.5); /* Slight zoom effect on hover */
}

.links {
    position: fixed;
    bottom: 10px;
    gap: 10px;
    right: 165px;
    display: flex;
    align-items: center;
    z-index: 300;
    color: grey;
    
}

.facebook-icon {
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.facebook-icon:hover {
    color: white;
    filter: 
        drop-shadow(0 0 5px var(--themeColour))
        drop-shadow(0 0 10px rgb(201, 174, 211));
    transform: scale(1.5); /* Slight zoom effect on hover */
}

.github-icon {
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.github-icon:hover {
    color: white;
    filter: 
        drop-shadow(0 0 5px var(--themeColour))
        drop-shadow(0 0 10px rgb(201, 174, 211));
    transform: scale(1.5); /* Slight zoom effect on hover */
}

.footer {
    position: fixed; /* Ensures the footer stays at the bottom */
    bottom: 0;
    z-index: 100; /* Ensures it stays on top of other elements */
    background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 100%);
    height: 40px; /* Adjust to the desired footer height */
    width: 100%; /* Ensures it spans the entire width of the viewport */
    display: flex; /* Allows alignment of child elements */
    align-items: center; /* Vertically centers content */
    justify-content: flex-end; /* Aligns content to the right */
    padding: 10px;
}

/* Overlay for dimming the background */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 50% opacity black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200; /* Higher than most elements but below the sidebar */
    display: none; /* Hidden by default */
}

/* When the sidebar is open, display the overlay */
.overlay.visible {
    display: block;
}

.loading-spinner {
    border: 5px solid rgb(255, 255, 255);
    border-top: 5px solid var(--themeColour);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Style for the tile containers and sections */
.tile-container {
    display: flex;
    flex-wrap: nowrap; /* Prevents tiles from wrapping to the next line */
    overflow-x: auto;  /* Enables horizontal scrolling */
    scroll-behavior: smooth; /* Enables smooth scrolling */
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.tile-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/* Ensure that the image inside the tile retains its aspect ratio and takes up a percentage of the tile */
.tile {
    text-decoration: none;
    position: relative;
    width: 200px;  /* Adjust as per your design */
    height: 135px; /* Adjust as per your design */
    display: flex;
    flex-direction: column; /* Change direction to column to stack content */
    justify-content: flex-start; /* Align content to the top */
    align-items: center; /* Center horizontally */
    overflow: hidden;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 15px; /* Add rounded corners */
    box-shadow: 0 0 10px var(--themeColour); /* Add shadow */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
    margin: 5px;
    flex: 0 0 auto;
    scroll-snap-align: start; /* Snaps each tile to the start */
}

.tile img {
    max-width: 75%;  /* Image will take up 35% of the tile's width */
    height: 40%; /* Image will take up 35% of the tile's height */
    object-fit: contain; /* Maintains aspect ratio */
    margin-top: 10%;  /* Move the image down slightly to be within the top 25% */
}

.tile-name {
    position: relative;
    margin-top: 1%;  /* Adjust spacing from the image */
    font-size: 0.9rem;
    color: #ffffff;  /* Text color */
    text-align: center;
}

.tile-divider {
    position: relative;
    width: 90%; /* Adjust the width of the horizontal line */
    border: none; /* Remove the default border */
    border-top: 1px solid #ffffff; /* Add a custom border to create the line */
    margin-top: 10%;
}

.tile-icon {
    color: #ffffff;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

.tile:hover .tile-icon svg {
    filter: 
    drop-shadow(0 0 5px var(--themeColour))
    drop-shadow(0 0 10px var(--themeColour));
    transform: scale(1.5); /* Slight zoom effect on hover */
}

.section {
    margin-bottom: 30px;
}

.section h2 {
    margin-bottom: 10px;
}

/* Style for the logout button */
form {
    margin-top: 20px;
}