body {
  margin: auto;
  padding: 0;
  background: rgb(0, 0, 0);
  width: 65%;
  color: white;
  font-family: B612 Mono;
  font-size: 12px;
  font-style: normal;
  font-weight: lighter;
  text-transform: uppercase;
}

/* ---- Style the navbar container ---- */
.navbar {
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
  /*width: 65%; /* Set the width */
  height: 50px; /* Set the height */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px; /* Add padding for spacing */
  font-family: B612 Mono;

}

/* Style the logo */
.logo img {
  height: 100%; /* Set the maximum height for the logo */
  width:100px;

  transition: width 0.4s;
}
.logo img:hover{
  width: 110px;
  height: 100%;
  transition: width 1s;
}

/* Style the menu links */
.menu {
  list-style: none; /* Remove default list styling */
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline; /* Display menu items inline */
  margin-right: 20px; /* Add spacing between menu items */
}

.menu li:last-child {
  margin-right: 0; /* Remove margin for the last menu item */
}

.menu a {
  text-decoration: none; /* Remove underline from links */
  color: #fff; /* Text color for menu items */
  font-weight: bold; /* Make menu items bold */
  font-size: 12px;
}

.menu a:hover {
  color: #2bff00; /* Change text color on hover */
}

/* ---- Style for the me/cv shit -----*/
.mecv{
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
  /*width: 65%; /* Set the width */
  height: 400px; /* Set the height */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px; /* Add padding for spacing */
  font-family: B612 Mono;
  text-align:center;
}


.me{
  background-color: rgb(0, 0, 0);
  width: 70%;
  height: 100%; 
  border-right: 1px solid black;
  padding: 5px;
  overflow-y:auto;
}

.cv{
  background-color: rgb(0, 0, 0);
  width: 50%;
  height: 100%;
  padding: 5px;
  justify-content: center;
  overflow-y:auto;
}


.me .myimg{
  display: flex;
  justify-content: center;
  align-items: center;
}


.me img{
  height:100px;
  width:100px;
  transition: width 0.4s, height 0.4s;
  transition-timing-function: ease-in;
}

.me img:hover{
  transition: width 1s, height 1s;
  width: 110px;
  height: 110px;
}

.me > h1:first-child{
  font-size:23px;
  font-weight: lighter;
}



.cv > h1:first-child{
  font-size:23px;
  font-weight: lighter;
  margin-bottom: 0px;
}
.cv h2{
  font-weight:lighter;
  text-align: center;
  padding-left: 10px;
  
}
.cv h4{
  font-size:12px;
}

.cv p{
  font-size: 10px;
  font-weight: lighter;
}
.cv ul{
  text-align: center;
  justify-content:center;
  list-style-type:none;
  padding-left: 0px;
}
.cv li{
  display:flex;
  flex-direction: column;
}

.cv  h1:first-child{
  margin-bottom:0px;
}



/* ---- Style the Demo Reel Video ---- */
.demoreel{
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
  /*width: 65%; /* Set the width */
  height: 420px; /* Set the height */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px; /* Add padding for spacing */
  font-family: B612 Mono;
  text-align:center;
  z-index: 1;
  position: relative;
}

#player{
  z-index: -1;
}

/*Places an empty div over the video so you can't click on stuff*/
.blocker {
  position: absolute;
  background-color: #00000000;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.demoreel iframe:hover {
  cursor: pointer;
  pointer-events: none;
}
/*------- Work Gallery --------*/
.work_gallery{
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
  /*width: 65%; /* Set the width */
  height: 500px; /* Set the height */
  margin: 0 auto;
  padding: 20px 20px; /* Add padding for spacing */
  font-family: B612 Mono;

  

}


.work_gallery > h1:first-child{
  font-size:23px;
  font-weight: lighter;
}

.work_gallery h2{
  font-size:23px;
  font-weight:lighter;
  margin-bottom: 0px;
  margin-top: 50px;
  clear:both;
}
.work_gallery h4{
  font-weight: lighter;
  text-align: center;
}

.work_gallery_item{
  border: 0px solid #000000;
  margin: auto;
}

.work_gallery_item img {
  width:100%;
  height: auto;

  transform-origin: center;
  object-fit:fill;
}

.work_gallery_item .desc{
  padding: 0px;
  text-align: center;
  text-wrap:pretty;
}

.work_gallery_item:hover {
  border: 3px solid #2bff00;
  transition:ease-out;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding:0px 6px;
  float: left;
  width: 24.99999%;
}





.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.other_works{
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
  /*width: 65%; /* Set the width */
  height: 100px; /* Set the height */
  margin: 0 auto;
  font-family: B612 Mono;
  display: block;
}



.other_works h2{
  padding-bottom: 10px;
  padding-top: 20px;
}

.other_works a {
  text-decoration: none; /* Remove underline from links */
  color: #fff; /* Text color for menu items */
  font-weight: lighter; /* Make menu items bold */
  text-align: center;
  display:inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  border-left: 1px solid #ffffff7e;
}


.other_works a:last-child{
  border-right: 1px solid #ffffff7e;
}

.other_works a:hover{
  border: 2px solid #2bff00;
  white-space: nowrap;
}

.other_works a:hover{
  color:#2bff00
}

/* Contact me Sections*/
.contact{
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
 /* width: 65%; /* Set the width */
  height: 200px; /* Set the height */
  margin: 0 auto;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 20px; /* Add padding for spacing */
  font-family: B612 Mono;
  
}

.contact a {
  text-decoration: none; /* Remove underline from links */
  color: #fff; /* Text color for menu items */
  font-weight: lighter; /* Make menu items bold */
  font-size: 23px;

}

.contact svg{
  width: 20px;
  height:auto;
  fill:white;
}
.contact a:hover {
  fill:#2bff00;
  color: #2bff00; /* Change text color on hover */
}

.contact li{
  white-space: nowrap;

}
.contact svg:hover{
  fill:#2bff00;
}
.contact ul{
  list-style-type:none;
  text-align: left;
}

/*-------- Style the menu -------*/
/* ---- Style the navbar container ---- */
.footer {
  background-color: rgb(0, 0, 0); /* Background color for the navbar */
  /*width: 65%; /* Set the width */
  height: 50px; /* Set the height */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px; /* Add padding for spacing */
  font-family: B612 Mono;

}

/* Style the logo */
.footer_text {
  font-weight: lighter;
}

.footer .menu {
  list-style:none; 
  margin: 0;
  padding: 0;
}

footer .menu li {
  display: inline; 
  margin-right: 20px;
}

footer .menu li:last-child {
  margin-right: 0; 
}

footer .menu a {
  text-decoration: none;
  color: #fff; 
  font-weight: bold;  
  font-size: 12px;
}
.footer .menu svg{
  fill:#fff;
}
.footer .menu svg{
  width : 15px;
  height: auto;
}

.footer .menu svg:hover {
  fill: #2bff00; 
}

/* width */
::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px rgb(0, 0, 0); */
  border:none;
  border-radius: 0px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(44, 44, 44); 
  border-radius: 0px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2bff00;
}

.border-animation {
  transition: border 1s ease-in-out;
  border: none;
}

.border-animation:hover {
  border: 1px solid black;
}
 
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .mecv {
    display:grid;
    height: 1650px;
  }
  .me{
    width: 100%;
    height:auto;
    margin:auto;
    border-right:0px solid rgb(145, 0, 0);
  }
  .cv{
    width:100%;

  }
  .cv ul{
    padding-bottom: 10px;
  }
  .work_gallery{
    display: block;
  }
  .other_works{
    height: 150px;
  }

  body{
    width : 100%;
  }
  .work_gallery_item {
    padding-bottom: 20px;
  }

  .demoreel{
    height: 260px;
  }
  .cv h2{
    padding:0;
  }
  h1 {
    text-align: center;
  }
  h2{
    text-align: center;
  }
}