body {
  margin: 0;
  margin-top: 60px;
  font-family: 'Oswald', sans-serif;
  background-color: black;
}

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  line-height: 50px;
  background-color: rgb(0, 0, 0); 
}

#menu-bar{
display: none;
}

header label {
font-size: 20px;
float: right;
color:antiquewhite;
cursor: pointer;
display: none;
}

.checkbtn {
font-size: 50px;
color: white;
float: left;
line-height: 50px;
margin-left: 20px;
display: none;
}

header *{
  display: inline;
  height: 80px;
}

header ul {
  padding: 0;
}

header li {
  margin-left: 20px;
}

.nav-link {
font-size: 15px;
transition: all 0.4s;
position: relative;
}

.active {
color: red;
}

a:hover, a.active {
background: none;
color: red;
}

section {
  overflow: hidden;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 60px;
  padding: 40px;
}

.section-inner {
  top: 10px;
}

.page-container {
width: auto;
display: grid;
grid-template-columns: 1fr;
margin: 0 auto ;
}

#home .profile-image {
  width: 35%;
  border-radius: 15px;
}

#about .about-image{
  height: 300px;
  width: 90%;
  object-fit: cover;
  object-position: top;
}
#skills .skills-image{
  width: 20%;
}

#skills .container {
color: white;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(2, 1fr);
}

.fa-brands {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  align-items: center;
  border-radius: 15px;
}

.fa-solid {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  align-items: center;
  border-radius: 15px;
}

.fa-solid:hover {
  opacity: 0.7;
}

.fa-bars {
  font-size: 50px;
}

.fa-envelope-open-text {
  background-color: aliceblue;
  color: red;
}

.fa-brands:hover {
    opacity: 0.7;
}
.fa-js {
  background: yellow;
  color: black;
}
.fa-html5 {
  background: orangered;
  color: white;
}
.fa-css3-alt {
  background: rgb(73, 73, 255);
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #a86808;
  color: white;
}
.fa-linkedin{
  background: #3B5998;
  color: white;
}
.fa-github{
  background: grey;
  color: white;
}

h1{
  color: white;
  font-size: 3em;
}

h2{
  color: white;
  font-size: 2.5em;
}

h3{
  color: white;
  font-size: 2em;
}

p{
  color: white;
  font-size: 1.5em;
}

header a {
  text-decoration: none;
  color: white;
}

ul {
list-style-type: none;
}
li{
  color: white;
}

@media screen and (max-device-width: 750px){

  header {
    height: 80px;
  }

.page-container{
  width: 90%;
  grid-template-columns: 1fr;
}

header .navbar {
  position: absolute;
  top: 60px; left:0; right:0;
  display: none;
  left: 0%;
  right: 0%;
  height: 80px;
}
header .navbar ul {
  display: block;
  top: 60px;
}
header .navbar ul li {
  width: 100%;
  height: 80px;
  display: block;
  background: rgb(59, 59, 59);
  margin-left: 0px;
}

header .navbar ul li a {
  font-size: 40px;
  left: 40px;
  top: 15px;
}

header .navbar ul li:hover{
  background: grey;
}

header label {
  display: initial;
}

.checkbtn{
  display: block;
}


a:hover, a.active {
  background: none;
  color: red;
}

/* #menu-bar:checked ~ .navbar{
  display: initial;
} */
}

@media only screen and (max-width: 750px){

.page-container{
  width: 90%;
  grid-template-columns: 1fr;
}

header .navbar {
  position: absolute;
  top: 100%; left:0; right:0;
  display: none;
  left: 0%;
  right: 0%;
  height: 80px;
}
header .navbar ul {
  display: block;
}
header .navbar ul li {
  width: 100%;
  height: 80px;
  display: block;
  background: rgb(59, 59, 59);
  margin-left: 0px;
}

header .navbar ul li a {
  font-size: 40px;
  left: 40px;
  top: 15px;
}

header .navbar ul li:hover{
  background: grey;
}

header label {
  display: initial;
}

.checkbtn{
  display: block;
}


a:hover, a.active {
  background: none;
  color: red;
}
}