/* applied to entire page */
    :root {
        --overlay-opacity: 0.66;
        --text-color: white;
        --transparent-background-red: 0;
        --transparent-background-green: 0;
        --transparent-background-blue: 0;
        --redBrightness: 20;
        --greenBrightness: 40;
        --blueBrightness: 90;
        --brightness:1;
    }

    * {
        margin: 0;
        padding: 0;
    }    
    body {
        
        font-family: 'Yu Gothic Light', 'Yu Gothic', sans-serif;

        text-align: left;

        font-weight: bold;
		font-size: 16px;
        transition: color 0.3s;
    }
    

    html, body {
        height: 100%;
        padding-top: 0%;     /* Padding for the left */
        padding-left: 0%;     /* Padding for the left */
        padding-right: 0%;
    }
    .content {
		margin-left: 20px; /* Adjust this value to increase the spacing */
		margin-right: 20px;

		flex-grow: 1; /* Allows the content area to take up remaining space */
    }
    
/* button stuff */
    /* conventional button */
        button {
            /* transition: color 0.5s; *//*, outline .5s; this actually works */
            color: var(--text-color);

            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 15px;
            font-weight: bold;
            background-color: transparent;

            font-family: 'Yu Gothic Light', 'Yu Gothic', sans-serif; /* Apply the desired font to all buttons */
            
            outline: 1px solid var(--text-color);
        }
        button:hover {
            background-color: transparent;
            color: red;
            outline: 1px solid red;
        }
    /* side bar */
        .switchPageButton {
            margin-bottom: 2px;
		    margin-top: 2px;
            padding: 3px 20px;
            /* height: 50px; */
           
            
            font-size: 14px;
            
        }
        
        .switchPageButton:hover {
           
            font-size: 16px;
        }
        .switchPageButton:hover svg {
            fill: red !important; /* Ensures hover color takes precedence */
          }
        .innactiveSwitchPageButton {
            outline: 1px solid white;
            margin-bottom: 2px;
		    margin-top: 2px;
            padding: 3px 20px;

            /* height: 50px;*/
            background-color: white;
            color: red;
            border-radius: 15px;
            font-size: 16px;
        }
        .innactiveSwitchPageButton:hover {
            outline: 1px solid white;
            background-color: white;
            color: red;
            cursor: default; /* Prevents the pointer from changing */
        }
        .innactiveSwitchPageButton svg {
            fill: red !important; /* Ensures hover color takes precedence */
          }
    /* toggle side bar button */
        .toggle-sidebar-button {
            position: fixed; /* Position it on the edge of the sidebar */
            top: 50%; /* Adjust as needed */
            left: 290px; /* Position it to the right of the sidebar */
            transform: translateX(-100%); /* Shift the button to overlap the sidebar */
            z-index: 1; /* Ensure it is above other content */
            cursor: pointer; /* Show a pointer on hover */

            font-weight: bold;
		    font-size: 25px;
            padding: 0px 10px;
        }

        .toggle-sidebar-button.moreLeft {
            transform: rotate(180deg);
            position: fixed;
            left: 15px;
        }

        .toggle-sidebar-button {
            background-color: white;
            color: red;
        }
        .toggle-sidebar-button:hover {
            background-color: red;
            color: white;
        }
    
    
    

    /* heart button */
        .heart-button {
            filter: brightness(var(--brightness));
            
            outline: 1px solid ;
            border-radius: 10px;
            padding: 5px 10px;
            margin-bottom: 5px;
            margin-top: 20px;
        }
        .heart-button:hover {
            color: red;
            
            outline: 1px solid red;
        }
        .heart-button:hover .broken-heart {
            filter: brightness(0) saturate(100%) invert(19%) sepia(97%) saturate(7488%) hue-rotate(-10deg) brightness(90%) contrast(105%);
        }
    /* prohibition circle to unprefer domain*/
        .prohibition-circle, .prohibition-line {
            stroke: white;
            
            padding: 1px 1px;
            margin-bottom: 1px;
            margin-top: 1px;
        }
        .prohibition-circle:hover, .prohibition-line:hover {
            stroke: red;
        }

    /* language button */
        .languageButton {
            transition: background-color 0.5s;
            background-color: rgba(var(--transparent-background-red), var(--transparent-background-green), var(--transparent-background-blue), .2); /*0.2);*/ /* Optional: Adds a semi-transparent background */
            
            backdrop-filter: blur(6px);
        }
    /* blured button */
        .blurButton {
            transition: background-color 0.5s;
            background-color: rgba(var(--transparent-background-red), var(--transparent-background-green), var(--transparent-background-blue), .2); /*0.2);*/ /* Optional: Adds a semi-transparent background */
            
            backdrop-filter: blur(6px);
            outline: none;

            font-size: 18px;

            margin-top:6px;
            padding-top:7px;
        }
       
/* search bar */
	.searchBarInput {
        margin-left: 50px;

		width: 400px;            /* Increase width to make it larger */
		height: 40px;           /* Increase height for a larger appearance */
		font-size: 26px;        /* Set a larger font size */
		border-radius: 10px;    /* Add rounded corners */
        background-color: transparent; 
        color:white;
        border: 3px solid white; 
        height: 50px;
        vertical-align: top;

        box-sizing: border-box; /* Include padding and borders in total size */
        padding-left: 10px; /* Adjust the value to your desired space */
    }
    .searchBarInput:focus{
        
        font-size: 16px; 
        border: 3px solid red; /* Change outline to red */
        color: red; /* Change text color to red */
        outline: none; /* Ensure no browser default outline */
    }
    
    
    .searchBarInput::placeholder {
        color: white; /* Makes the placeholder text white */
        opacity: 1;   /* Ensures full opacity (some browsers reduce opacity by default) */
    }
    /* When clicked into the text box */
    
    .searchBarInput:focus::placeholder{
        color: red; /* Change text color to red */
    }

/* setting up columns */
    .containerz3 {
        display: flex;
        gap: 0px;
        align-items: flex-start;
    }
    .left-columnz3, .right-columnz3 {
        padding: 10px;
        flex: 1;
    }

    /*.vertical-divider {
        width: 4px; 
        background-color: white;
        height: 500px;
    }*/

/* results style */
    /* general results */
        .result {
            
            
            
            margin: 10px 0; /* Spacing between results */
            padding: 15px; /* Padding inside the box */
            
            position: relative;
            overflow: hidden; /* To avoid overlap of the border with rounded corners */
            font-weight: bold; /* Equivalent to 'bold' */
        }
        .result p {
            font-size: 16px;
            
        }
        .resultSnippet {
            margin-bottom: 0px;
        }
    /* header */
        .resultHeader {
            font-size: 25px; 
            text-decoration: none; /* Removes underline */
            transition: color 0.5s;
            color: var(--text-color);
        }
        .index-circle {
            display: inline-block;
            width: 30px; /* Circle diameter */
            height: 30px; /* Circle diameter */
            
            /* background-color: #007bff;*/ /* Circle background color */
            /* color: white; */ /* Text color */
    
            outline: 1px solid ;
    
            border-radius: 50%; /* Make it round */
            text-align: center;
            line-height: 30px; /* Vertically center the text */
            margin-right: 10px; /* Space between the circle and the image */
            font-size: 16px; /* Text size */
            font-weight: bold;
        }
        .favicon {
            margin-right: 8px; /* Space between favicon and text */
        }
        
    /* linkss */
        .domain-header {
            font-size: 1.25em; /* Adjust font size as desired */
            font-weight: bold;
        }
        .smallLink {
            text-decoration: none; /* Removes underline */
            margin-bottom: 10px;
            color: rgb(5, 0, 100);
        }
        .smallLink:active, .smallLink:visited {
            color: rgb(100, 0, 100);
        }
        .result-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between header and title */
        }
        .url-container {
            display: inline-block;
        }
    /* opposition politics results */
        .oppositionPoliticsTitle {
            text-align: center;

            font-size: 1.25em; /* Adjust font size as desired */
            font-weight: bold;
        }
    /* ai overview */
        .aioverview {
            padding: 10px;
            margin: 10px 10px 0 10px;
        }    
/* side bar - only in layout.html*/
    /* the actual sidebar */
        .sidebar {
			text-align: center;

            width: 250px;
            /* background-color: #f4f4f4;*/
            padding: 20px 10px 10px 10px;

            height: 140vh;
			/*outline: 3px solid white;*/
            margin:10px;
            flex-shrink: 0;
            
        }
       
        
        /* Collapsed sidebar */
        .sidebar.collapsed {
            width: 50px;
            overflow: hidden;
            display: none;
        }
    /* the container */
        .container {
            height: 100%;
            display: flex;
        }
        
    /* slider */
        .moreCompactSlider {
            width: 60px;
        }
    /* greying out slider */
        .politicalBiasSliderRigermerole_grey {
            color:grey;
        }
/* blocked domains / preferred domains */
    .domainUrlClass {
        color:white;
        font-size: 20px;
        
        display: inline-block;
        text-decoration: none; 

        margin-bottom: 0px;
        margin-top: 0px;
    }
    .domainUrlClass:hover {
        text-decoration: underline;   /* Show underline when the link is hovered */
    }

    .domainItem {
        display: flex;
        align-items: center;

        margin-bottom: 0px; /* Space between the items */
        margin-top: 0px;
    }
    
    .removeButton {
        background-color: rgb(20, 30, 45);
        color: white;
        border: none;
        padding: 1px 7px;
        margin-right: 10px; /* Space between the button and the link */
        cursor: pointer;
        font-size: 14px;
        border-radius: 5px;
        outline: 1px solid ;

        margin-bottom: 0px;
        margin-top: 0px;
    }
    
    .removeButton:hover {
        background-color: white;
        color: black;

        margin-bottom: 0px;
        margin-top: 0px;
    }

    

    .domainItem {
        display: inline-flex;  /* Use inline-flex to avoid block-like behavior */
        align-items: center;
        margin-bottom: 2px;
        margin-top: 0px;
    }
    
/* changing language */
    .language-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 20px;
        margin: 50px;
    }

    .language-grid form {
        display: flex;
        justify-content: center;
    }

    

/* spinner */
    .spinner {
        display: none;
        position: absolute; /* or 'fixed' if you want it centered on the whole screen */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
    }

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