@charset "UTF-8";
/* CSS Document */
*{
	padding: 0px;
	margin: 0px;
	color: white;
}

a{
	text-transform: uppercase;
	font-weight: 900;
}
a:hover{
	color: lightgrey;
}
button{
	cursor: pointer;
}
input {
	color: white;
}
body {
	background-color: rgba(153,119,59,1.00);
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 14px;
}
#divHead {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	background-color: #224876;
	z-index: 10;
}
#divFoot {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	background-color: #224876;
	color: white;
}
#divNav {
	position: absolute;
	right: 20px;
	top: 10px;
}
#divContent {
	position: fixed;
	top: 70px;
	left: 20px;
	border-radius: 20px;
	background-image: url("../media/UTMLogo-Idea.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: normal;
	overflow-x: scroll;
}
#divWel {
	position: relative;
	top: 30px;
	width: 1400px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}
.TitleHead {
	font-size: 50px;
	font-weight: 900;
	text-transform: uppercase;
}
.descRipt {
	font-size: 20px;
}
#divWho {
	position: relative;
	top: 90px;
	left: 0px;
	width: 750px;
	border-radius: 70px;
	border-style: solid;
	border-width: 3px;
	box-shadow: 0px 10px 25px 1px black;
	padding: 20px;
	background-color: rgba(0,2,8,.75);
}
#divWhy {
	position: relative;
	top: 180px;
	left: 0px;
	width: 1400px;
	border-radius: 70px;
	border-style: solid;
	border-width: 3px;
	box-shadow: 0px 10px 25px 1px black;
	padding: 30px;
	background-color: rgba(0,2,8,.75);
}
#divExplore {
	position: relative;
	top: 270px;
	right: 0px;
	width: 750px;
	border-radius: 70px;
	border-style: solid;
	border-width: 3px;
	box-shadow: 0px 10px 25px 1px black;
	padding: 20px;
	background-color: rgba(0,2,8,0.75);
}
#divServ {
	position: relative;
	width: 1400px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	top: 360px;
	padding: 20px;
	text-shadow: 3px 3px 4px black;
	background-color: rgba(0,0,0,0.75);
}
li{
	list-style: none;
}
#divFor {
	position: relative;
	top: 450px;
	width: 1400px;
	border-radius: 70px;
	border-style: solid;
	border-width: 3px;
	box-shadow: 0px 10px 25px 1px black;
	padding: 20px;
	background-color: rgba(0,2,8,.75);
}
#divTrust {
	position: relative;
	top: 540px;
	left: 20px;
	width: 920px;
	border-radius: 70px;
	border-style: solid;
	border-width: 3px;
	box-shadow: 0px 10px 25px 1px black;
	padding: 20px;
	background-color: rgba(0,2,8,.75);
}
#divJoin {
	position: relative;
	top: 630px;
	width: 750px;
	border-radius: 70px;
	border-style: solid;
	border-width: 3px;
	box-shadow: 0px 10px 25px 1px black;
	padding: 20px;
	background-color: rgba(0,2,8,.75);
}
#divContact {
	position: relative;
	top: 720px;
	width: 700px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}
#divLogo {
	position: absolute;
	top: 0px;
	left: 40px;
}
#btnLogin {
	background-color:black;
	width: 100px;
	height: 30px;
	border-style: solid;
	border-color: white;
	border-radius: 10px;
}
#btnSignUp {
	background-color:cadetblue;
	width: 100px;
	height: 30px;
	border-style: solid;
	border-color: white;
	border-radius: 10px;
}
#loginModal {
	display: none;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 98%;
	height: 96%;
	background-color:rgba(5,15,35,0.85);
	padding: 10px;
	border-radius:10px;
	border-style: solid;
	border-width: 2px;
	vertical-align: middle;
}
#loginModal input{
	background-color:black;
}
#loginModal button{
	background-color: black;
}
#registerModal {
	display: none;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 98%;
	height: 96%;
	background-color:rgba(5,15,35,0.85);
	padding: 10px;
	border-radius:10px;
	border-style: solid;
	border-width: 2px;
	vertical-align: middle;
}
#registerModal select{
	background-color: black;
}
#registerModal input{
	background-color: black;
	color:white;
}
#registerModal button{
	background-color: black;
}
#registerModal textarea{
	background-color: black;
}
#accessCodeModal {
	display: none;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-30%);
	background: rgba(0,0,0,0.85);
	padding: 20px;
	border-radius: 10px;
	z-index: 1000;
}
#accessDeniedModal {
	display: none;
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -20%);
	background: rgba(0,0,0,0.85);
	padding:20px;
	border-radius: 10px;
	z-index: 1000;
	width: 300px;
}
#divUsers {
	position: relative;
	top: 800px;
	width: 700px;
	border-radius: 70px;
	border-style: solid;
	padding: 20px;
	text-shadow: 3px 3px 5px black;
	background-color: rgba(0,0,0,0.75);
}

#userGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}

.userCard {
    text-align: center;
    max-width: 150px;
}

.userImg img {
    border-radius: 50%;
    object-fit: cover;
    width: 150px;
    height: 150px;
}

.username {
    margin-top: 8px;
    font-weight: bold;
    color: #fff; /* or your themed color */
    word-wrap: break-word;
}