:root {
	--white: #dadadaff; 
	--gray-text: #575757ff; 
	--darker: #a0a0a0; 
	--middle: #cecece; 
    --verylight: #ffffff;
	--border: solid 1px #5c5c5cff; 
}

@font-face {
  font-family: VT323; /* set name */
  src: url(fonts/VT323-Regular.woff2); /* url of the font */
}
@font-face {
  font-family: xp; /* set name */
  src: url(fonts/windows-xp-tahoma.otf.woff2); /* url of the font */
}

body {
    margin: 0;
    padding-top: 250px;
    overflow: auto;
    background: #000000ff;
	position: relative;
	font-size: 12px;
	font-family: Verdana;
	font-weight: normal;
}

#wrapper {
    width: 740px;
    height: fit-content;
    margin: 0 auto;
	padding: 0px 4px;
		background-color: #959595ff;
		border-left: solid 2px #d1d1d1ff;
		border-right: solid 2px #767676ff;
		border-bottom: solid 2px #545454ff;
}

#navbar {
	padding: 0px;
	margin: 0px;
	width: auto;
	height: fit-content;
	margin-bottom: 10px;
}
	#navbar-top {
		padding: 5px 15px;
		height: 20px;
		margin: -1px -6px;
		background-color: #959595ff;
		border-top: solid 2px #dededeff;
		border-left: solid 2px #d1d1d1ff;
		border-right: solid 2px #767676ff;
		border-bottom: solid 2px #545454ff;
	}
			#navbar-top-content {
					display: flex;
					gap: 50px;
				}
			#navbar-top p{
					margin-top: 4px;
					color: #000000ff;
				}
.left {
    flex: ;
	width: fit-content;
  }

  /* Groove line */
  .groove-line {
    border-left: 4px groove #bcbcbc; /* Groove effect */
    margin: 0 10px;
	margin-top: -5px;
	margin-bottom: -1px;
  }

  /* Right section */
  .right {
    flex: ;
    width: fit-content;
  }
	#navbar-bottom {
			padding: 5px 15px;
			margin: 3px;
			height: fit-content;
			background-color: var(--middle);
			border: var(--border);
		}
			#navbar-bottom-content {
					display: flex;
					gap: 10px;
					margin-top: 2px; /*  */
				}
			#navbar-bottom-content button{
					font-size: 12px;
					background-color: rgba(159, 169, 160, 0);
					border: none;
					color: #575757ff;
					font-weight: 600;
				padding: 7px 10px;
				}
			#navbar-bottom-content button img{
					height: 15px;
					width: auto;
					margin-right: 5px;
				}
	#navbar-bottom-content button:hover{
			background-color: var(--verylight);
			outline: var(--border);
			color: #575757ff;
			
		}

				h1 {
					font-size: 34px;
					font-weight: normal;
					margin: 3px 0px;
				}
				h2 {
					color: #000000ff;
					font-weight: bold;
					font-size: 14px;
					margin: 0px;
					
				}
				i.timeframe {
					color: #000000ff;
					background-color: #aab4ab;
					padding: 2px 4px;
					border-radius: 5px;
				}
				p {
					margin: 0px;
					text-align: justify; /*styles your paragraphs into a block alignment (no jagged ends)*/
				}
				img.pfp {
					width: 100%;
					border: var(--border);
					border-radius: 6px;
                    margin-bottom: 15px;
				}
				hr {
					margin-bottom: 0px;
					margin-top: 0px;
					border: none;
                    border-top: groove 4px #f2f2f2;
                    width: 100%;
                    
				}

		#profile {
			height: fit-content;
			background-color: var(--middle);
			border: var(--border);
			border-top: none;
			display: flex;
		}
		#profile-left {
			width: 35%;
			padding: 15px 15px;
			padding-bottom: 30px;
            margin: 0px;
			text-align: justify;
            justify-items: center;
            
		}
		#graphics img{
			width: 99px;
		}
		#graphics {
			width: 420px;
			margin-top: 15%;
			
		}

		#buttons img{
			width: 88px;
		}
		#buttons {
			margin-bottom: 5px;
		}
		#profile-right {
			width: 65%;
			padding: 15px 15px;
			padding-bottom: 15px;
			text-align: justify;
            background-color: var(--verylight);
			border: var(--border);
			
		}
		table {
			border: solid 1px;
			background-color: #cececeff;
			margin: -12px;
            
		}
		tr, td {
			border: solid 1px;
            padding: 3px;
		}
td:nth-child(odd) {
  background-color: #e3e3e3;
}
td:nth-child(odd) {
  width: 100px;
}

		#socials {
			padding: 6px 15px;
			height: 20px;
			background-color: var(--darker);
			border: var(--border);
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			display: flex;
		}
				#socials img{
					height: 13px;
					margin-bottom: -2px;
					margin-right: 3px;
				}
				#socials a{
					font-size: 11px;
					color: var(--verylight);
					text-decoration: none;
					margin-right: 10px;
					padding: 3px;
					outline: solid 1px #4f4f4fff;
					background-color: #818181ff;
                    
				}
				#socials a:hover{
					outline: solid 1px #4f4f4fff;
					background-color: var(--verylight);
					color: #000000ff;
				}
		#contact {
			padding: 10px 15px;
			height: fit-content;
			background-color: var(--darker);
			border: var(--border);
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			
		}

.box3 {
    background-color: #bdbdbd;
    width: fit-content;
    height: fit-content;
    box-shadow:
        inset 0px 0px 20px #9a9a9a;
    border: 1px solid #545454;
	border-bottom: none;
    margin-bottom: 8px;
}
.box {
	margin: 0px -4px;
    background-color: var(--verylight);
    border: 3px solid #858585;
    border-spacing: 3px;
    border-top: 3px solid #595962;
    border-bottom: 3px solid #f3f3f3;
    padding: 14px;
    padding-top: 12px;
    padding-bottom: 10px;
    box-shadow: inset 0px 0px 0px 2px #bfbfbf;
}