htdocs/index.css.old

.main {
	display: block;
	text-align: left;
	margin: 0;
}
@media screen and (min-width: 800px) {
	.main {
		width: 1000px;
	}
}

ul {
    list-style-type: none;
}

.links-list {
    margin: auto;
    text-align: center;
    font-size: 30px;
    
    
}

.links-list li {
    
    align-items: center;
    justify-content: space-between;
    border: 2px solid #7c6f64;
    width: 300px;
    margin: auto;
    margin-top: 10px;
}

.links-list img {
    border: 0px solid ;
    margin-right: auto;
    margin: auto;
}

/*
img {
    border: 2px solid #7c6f64;
}*/

img:not(.feedicon) {
    max-width: 100%
}

#links {
	text-align: left;
	width: 750px;
}

.indent {
	padding-left: 20px;
	list-style-type: none;
}

.doubleIndent {
	padding-left: 40px;
}
@media (prefers-color-scheme: dark) {
	body {
	    background-color: #282828;
            color: #ebdbb2;
	}
	.code {
		background-color: #3c3836;
	}
	.code:not(.indent) {
		display: inline
	}
	a:link {
    	    color: #83a598;
	    text-decoration: none;
	}
	a:visited {
	    color: #d3869b;
	    text-decoration: none;
	}
	a:hover {
	    color: #fb4934;
	    text-decoration: none;
	}
	a:active {
	    color: #fe8019;
	    text-decoration: none;
	}
	button {
	    background-color: #b8bb26;
	    border: 2px solid #282828;
	    color: #282828;
	}
	input {
	      background-color: #ebdbb2;
	      border: 2px solid #282828;
	      color: #282828
	 }
}
@media (prefers-color-scheme: light) {
 	body {
		background-color: #ebdbb2;
		color: #282828;
	}
	.code .indent {
		background-color: #d5c4a1;
	}
	.code:not(.indent) {
		display: inline
	}
        a:link {
    	    color: #076678;
	    text-decoration: none;
	}
	a:visited {
	    color: #8f3f71;
	    text-decoration: none;
	}
	a:hover {
	    color: #9d0006;
	    text-decoration: none;
		animation: half-spin 1s linear infinite;
    		display: inline-block; /* Ensures the text spins around its center */

	}
	a:active {
	    color: #af3a03;
	    text-decoration: none;
    	}	
	button {
	    background-color: #b8bb26;
	    border: 2px solid #ebdbb2;
	    color: #ebdbb2;
	}
	input {
	      background-color: #282828;
	      border: 2px solid #ebdbb2;
	      color: #ebdbb2
	 }
}


body {
    font-family: 'Trebuchet MS', sans-serif;
}

* {
    scrollbar-color: #fb4934 #83a598;
}




/*.blog-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
%    width: 500px;
}*/

.projects-table {
    border-collapdisplay: flex;
    align-items: center;
    justify-content: space-between; /* Ensure content is spaced out */se: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    /*box-shadow: 0 0 20px #1d2021;*/
}

.projects-table table, th, td {
    border: 1px solid;
}

.projects-table thead tr {
    text-align: left;
}

.projects-table th,
.projects-table td {
    padding: 12px 15px;
}

.projects-table tbody tr.active-row {
    font-weight: bold;
}



.search-wrapper {
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }

  input {
      font-size: 1rem;
      /*background-color: #ebdbb2;
      border: 2px solid #1d2021;
      color: #282828*/
  }

  .user-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem;
    margin-top: 1rem;
  }

  .card {
    padding: .5rem;
    overflow: hidden;
  }

  .card > .header {
    margin-bottom: .25rem;
  }

  .card > .search-body {
    font-size: .8rem;
    width: 10;
    word-wrap: break-word;
    margin-left: auto;
    margin-right: auto;
  }

  .hide {
    display: none;
  }

  .input-comment {
    height: 100px;
  }
  
 .form-control {
    width: 400px;
 }



.rotate{
       	display: flex;
	position: relative;
	animation: spin 5s linear infinite;
    display: inline-block; /* Ensures the text spins around its center */
}
.title-spin {
	position: absolute;
	top: 200px;
	left: 600px;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes half-spin {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(20deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-20deg);
	}
	100% {
		transform: rotate(0deg);
	}
}