body{
  background-color: darkgrey;
} 
h1{
  font-family: 'Kavoon'; font-size: 40px;
  color: ghostwhite;
  text-align: center;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}
p{
	font-family: "Times New Roman", Times, serif; font-size:22px;
}

.banner{
  	margin:10px;
	position: relative;
  	padding:15px;
 	height:210px;
 	border: 10px solid #ffffff;
    box-shadow: 5px 2px 5px 5px #ddfddd;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px
}

h2{
	text-align:center;
	font-family: 'Gorditas';font-size: 29px;
	color: ghostwhite;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}
h3{
	text-align:center;
	font-family: 'Kavoon';font-size: 25px;
	color: black;
}

li a:hover {
  background-color: #555555;
  color: white;
}

.menu{
	display:flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style:none;
	gap: 30px;
}
ul{
   list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:DEB8FA;
  }
.container{
	border:3px,black;
	position: relative;
	top: 2px;
	margin: 15px;
	padding: 10px;
	height: 8000px;
	overflow: hidden;
}
li{
  float:left;
}
li a, .dropBtn{
  display:inline-block;
  color: navy;
  text-align:center;
  padding:12px 14px;
}
.container{
	border:3px,black;
	position: relative;
	top: 2px;
	margin: 15px;
	padding: 10px;
	height: 8000px;
	overflow: hidden;
}
.left{
   position: absolute;
  left: 2px;
  margin: 2px;
  padding: 2px;
  border: 2px solid white;
  width:24.5%;
  height: 1000px;
  font-size: 0.8rem;
}
.right{
    position: absolute;
  right: 1px;
  margin: 2px;
  padding: 2px;
  border: 2px solid;
  width:74%;
  height: 1360px;
}
.nav{
   display: flex; 
  justify-content: center; 
  align-items: center;
}
* { box-sizing: border-box; }

.skills-container {
  width: 100%;
  background-color: #ddd; 
  margin-bottom: 8px;     
}

.skills-bar {
  text-align: right;      
  padding: 10px;           
  color: white;
}

.skills-bar.html { width: 90%; background-color: #04AA6D; } /* green */
.skills-bar.css  { width: 80%; background-color: #2196F3; } /* blue */
.skills-bar.javascript   { width: 45%; background-color: #f44336; } /* red */
.skills-bar.python { width: 90%; background-color: #04AA6D; } /* green */