/* Imaport Google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
/* Web Page General Setting */

*,
*::before,
*::after {
  font-family: "Roboto Mono", monospace;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --clr-text: #0088a9;
  --clr-bg: #24252a;
  --fs: 30px;
  --clr-h1: #32a852;
  --t-clr: #edf0f1;
  --fm: "Montez", cursive;
  --bar-width: 60px;
  --bar-height: 8px;
  --hambergur-gap: 6px;
}

body {
  background-color: var(--clr-bg);
  height: 100vh;
}

/* Nav Bar Section */

/* Icons */

.material-symbols-outlined {
  font-size: 36px;
  color: #0088a9;
  display: none;
}

li,
a,
button {
  font-weight: 400px;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.nav__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  cursor: pointer;
  color: var(--clr-text);
}

.logo span {
  font-size: 1.7rem;
}

.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}

.link_midkent {
  padding: 10px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  font-size: 16px;
  overflow: hidden;
}

.link_midkent:hover {
  background-color: rgba(0, 136, 169, 0.8);
}

button {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  font-size: 16px;
}

button:hover {
  background-color: rgba(0, 136, 169, 0.8);
}

.nav__links {
  list-style-type: none;
  display: flex;
}
.nav__links li a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 20px 20px;
  font-weight: 700;
  transition: 0.4s all;
}

li.navbar-dropdown {
  position: relative;
}

.nav__links li.navbar-dropdown:hover .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

.nav__links li.navbar-dropdown .dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 10px 10px;
  top: 100%;
  transform: translateY(50px);
  left: 0;
  width: auto;
  background-color: #333;
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 111;
  transition: 0.4s all;
  border-radius: 6px;
}
.nav__links li.navbar-dropdown .dropdown a {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
}
.navbar-dropdown .dropdown a:hover {
  padding-left: 30px;
}
.nav__links li a:hover {
  color: var(--clr-text);
}

/* Images Border Radius */
img {
  border-radius: 10px;
}

/* All Pages Title Srtting */

.all-title_container {
  position: absolute;
  display: flex;
  top: 6.125rem;
  left: 50%;
  transform: translate(-50%);
}

.all-pages_title {
  position: relative;
  text-align: center;
  font-size: var(--fs);
  color: var(--clr-text);
  text-transform: uppercase;
}

/* Home Page Content Section */

.home_page-container {
  position: absolute;
  width: auto;
  top: 9.5rem;
  left: 50%;
  transform: translate(-50%);
}

.text_container {
  font-size: 1rem;
  padding: 1.5em 0.5em;
  color: #fff;
  text-align: center;
  position: relative;
  top: -25px;
  left: 50%;
  transform: translate(-50%);
  letter-spacing: 2px;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

p strong {
  color: #0088a9;
}

#page__imgs {
  display: flex;
  position: relative;
  top: -15px;
  left: 50%;
  transform: translate(-50%);
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

#page__imgs #img1,
#img2,
#img3 {
  margin: 1.5em 0.5em;
  width: 350px;
  height: 600px;
  position: relative;
  border-radius: 10px;
}

/* About Page Content Section */

.about-me_container {
  position: relative;
  width: 900px;
  height: auto;
  top: 10px;
  left: 50%;
  transform: translate(-50%);
}

#about-text {
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 10px;
  font-size: 1rem;
  padding: 10px 15px;
  color: #edf0f1;
  text-align: start;
  line-height: 40px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 2px;
  width: 800px;
}

#about-skills {
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 10px;
  font-size: 1rem;
  padding: 10px 15px;
  color: #edf0f1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
}

#about-skills {
  height: 60px;
}

h2 {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#abot-me_content {
  position: relative;
}

#about-me__imgs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

img#code_image1,
img#midkent__img2 {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 10px;
  width: 380px;
  height: 336px;
  position: relative;
  margin: 15px;
}

.skills_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skills {
  margin: 5px;
  padding: 5px;
  border-radius: 6px;
  background: #777;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.skills:hover {
  background: #444;
  transition: 0.7s;
}

/* Contact Page Content Section */

.contact_container {
  position: absolute;
  top: 11.375rem;
  left: 50%;
  transform: translate(-50%);
  height: 600px;
  width: 580px;
}

.detail_container {
  height: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  margin: 10px;
}

#contact__detail {
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  line-height: 30px;
  letter-spacing: 2px;
}

#contact__detail h3 {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

#contact__detail p {
  color: #fff;
}

#contact__detail p a {
  color: inherit;
  background: linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1)
    ),
    linear-gradient(
      to right,
      rgba(0, 100, 170, 1),
      rgba(0, 100, 180, 1),
      rgba(0, 100, 200, 1)
    );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 500ms;
}

#contact__detail p a:hover {
  background-size: 0 3px, 100% 3px;
}

/* Form */

.form_container {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin: 10px;
}

.form__box {
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  color: #fff;
  width: 450px;
}

form div.form__info {
  margin-top: 10px;
}

form div input,
form div textarea {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: none;
  outline: none;
  overflow: hidden;
  color: #fff;
  padding: 10px;
}

form div textarea {
  resize: none;
  height: 150px;
}

.btn__submit {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin-top: 10px;
  justify-content: center;
  align-items: center;
}

/* all projects section */

.all-projects_container {
  position: absolute;
  top: 10.375rem;
  left: 50%;
  transform: translate(-50%);
  height: auto;
  width: auto;
}

div.projects__text {
  color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding: 20px;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.units {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.unit__box1,
div.unit__box2 {
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 5px;
  width: 400px;
  height: 300px;
  padding: 20px;
}

.text__all-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* Images section */

.images_container {
  position: absolute;
  top: 11.375rem;
  left: 50%;
  transform: translate(-50%);
  width: auto;
  height: auto;
}

.project1__title {
  color: #0088a9;
  position: relative;
  font-size: 1rem;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  padding: 8px;
}
.project2__title {
  color: #0088a9;
  position: relative;
  font-size: 1rem;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  padding: 8px;
}
.project3__title {
  color: #0088a9;
  position: relative;
  font-size: 1rem;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  padding: 8px;
}

div.project1__img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project1__img img {
  margin: 10px;
  height: 330px;
  width: 380px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.project2__title {
  top: 63%;
}

div.project2__img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project2__img img {
  margin: 10px;
  height: 330px;
  width: 380px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

div.project3__img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project3__img img {
  margin: 10px;
  height: 330px;
  width: 380px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* Table Style Start */

.grade_container {
  position: absolute;
  top: 11.375rem;
  left: 50%;
  transform: translate(-50%);
  width: 880px;
  height: 500px;
}

table,
tr,
th,
td {
  border: 2px solid #0088a9;
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border-spacing: 10px;
  font-size: 26px;
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.stackoverflow {
  text-decoration: underline;
}

.stackoverflow:hover {
  color: #f00;
}

.seeproject_images {
  color: #fff;
}

.seeproject_images a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.seeproject_images a:hover {
  color: #0088a9;
}

.seeproject_images {
  border-radius: 10px;
  background: #333;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  position: absolute;
  top: 45.875rem;
  left: 50%;
  transform: translate(-50%);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
}

/*==========================================================================
                            Media Queries
==========================================================================*/

/*
==========================================================================
            up to 960 to 1200
========================================================================== 
*/
@media screen and (max-width: 1200px) {
  .material-symbols-outlined {
    display: block;
  }

  .nav__links {
    display: none;
    background: #444;
    width: 300px;
    border-radius: 10px;
    text-align: center;
    position: absolute;
    top: 140px;
    right: 25px;
    z-index: 99;
    border: 2px solid #0088a9;
    height: 325px;
  }

  .link_midkent {
    position: relative;
    top: 5px;
  }

  ul.open {
    display: block;
  }

  .nav__links li,
  .nav__links li a {
    display: block;
    padding: 0;
    margin: 0;
  }

  .nav__links li a {
    margin: 20px;
  }
}

/*
==========================================================================
            All less than 959
========================================================================== 
*/
@media screen and (max-width: 959px) {
  .material-symbols-outlined {
    display: block;
  }

  .nav__links {
    top: 140px;
    right: 55px;
  }

  .link_midkent {
    position: relative;
    top: 5px;
  }

  ul.open {
    display: block;
  }

  .nav__links li,
  .nav__links li a {
    display: block;
    padding: 0;
    margin: 0;
  }

  .nav__links li a {
    margin: 20px;
  }

  #page__imgs #img1,
  #img2,
  #img3 {
    width: 260px;
    height: 400px;
  }
  /* About Me */
  #abot-me_content,
  #about-me__imgs {
    top: 30px;
  }

  img#code_image1,
  img#midkent__img2 {
    margin: 5px;
  }

  /* Grade Section */

  .grade_container {
    margin-top: 15px;
    top: 10.625rem;
    width: 850px;
  }

  table,
  tr,
  th,
  td {
    font-size: 16px;
    width: 850px;
  }
}

/*
==========================================================================
            Mobile / Tablet less than 768
========================================================================== 
*/
@media screen and (max-width: 768px) {
  .nav__links {
    top: 140px;
    right: 35px;
  }

  ul.open {
    display: block;
  }

  #page__imgs #img1,
  #img2,
  #img3 {
    width: 230px;
    height: 400px;
    border-radius: 10px;
  }

  /* About Me Section */

  .about-me_container {
    width: 630px;
  }

  #about-text,
  #about-skills {
    width: 630px;
  }

  #abot-me_content {
    position: relative;
    width: 350px;
    display: block;
    left: 50%;
    transform: translate(-50%);
  }
  img#code_image1,
  img#midkent__img2 {
    width: 350px;
    margin: 5px;
  }

  #about-me__imgs {
    top: 20px;
  }

  /* Images Section */
  .project1__img img,
  .project2__img img,
  .project3__img img {
    width: 350px;
    margin: 5px;
  }

  /* Grade Section */
  .grade_container {
    width: 660px;
  }

  table,
  tr,
  th,
  td,
  .table__item {
    border-spacing: 5px;
    width: 660px;
  }

  /* Projects Section */

  .all-projects_container {
    width: 630px;
  }

  .seeproject_images {
    width: 400px;
  }
}

/*
==========================================================================
            Mobile / Tablet less than 600
========================================================================== 
*/
@media screen and (max-width: 600px) {
  /* Home Page Section */
  #page__imgs {
    display: block;
  }

  #page__imgs #img1,
  #img2,
  #img3 {
    width: 350px;
    height: 450px;
    margin: 15px;
    padding: 0;
  }

  .text_container {
    margin-top: 20px;
  }

  /* About Me Section */
  .about-me_container {
    width: 530px;
  }

  #about-text,
  #about-skills {
    width: 430px;
    height: auto;
  }

  #about-me__imgs {
    top: 40px;
    display: block;
  }
  img#code_image1,
  img#midkent__img2 {
    width: 430px;
    left: 50%;
    transform: translate(-50%);
  }

  .skills_container {
    display: block;
  }

  /* Projects Section */
  .all-projects_container {
    width: 530px;
  }

  /* Grade Section */
  table,
  tr,
  th,
  td,
  .table__item {
    width: 530px;
  }

  .grade_container {
    width: 530px;
  }
}

/*
==========================================================================
            Mobile / Tablet less than 480
========================================================================== 
*/
@media screen and (max-width: 480px) {
  .nav__links {
    display: none;
    top: 180px;
    right: 15px;
  }

  ul.open {
    display: block;
  }

  .nav__links li a {
    margin: 20px;
  }

  /* Home Page Section */

  .home_page-container {
    height: 100%;
  }

  #page__imgs #img1,
  #img2,
  #img3 {
    width: 350px;
    height: 400px;
    padding: 0;
    margin: 5px;
  }

  #page__imgs {
    display: block;
    position: relative;
    top: 65px;
    left: 50%;
    transform: translate(-50%);
    padding: 0;
    margin-top: 5%;
  }

  .all-title_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 20px;
  }

  #text {
    position: relative;
    top: 5%;
    width: auto;
    height: auto;
  }

  .text_container {
    position: absolute;
    top: 82.5rem;
    margin-top: 5px;
    width: 350px;
  }

  /* About Me Section */

  .about-me_container {
    width: 350px;
    height: auto;
    position: absolute;
    top: 9.375rem;
  }

  #about-text {
    width: 350px;
    line-height: 20px;
    position: relative;
  }

  #about-skills {
    height: auto;
    width: 350px;
    position: relative;
    margin-bottom: 5px;
  }

  .skills_container {
    position: relative;
    display: block;
    width: auto;
    left: 50%;
    transform: translate(-50%);
  }

  #about-me__imgs {
    display: block;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 350px;
  }

  .skills {
    width: auto;
  }

  h2 {
    position: relative;
  }

  img#code_image1,
  img#midkent__img2 {
    width: 350px;
  }

  /* Contact Section */

  .contact_container {
    top: 11.063rem;
  }

  .form__box {
    width: 350px;
  }

  .contact_container {
    width: 350px;
  }

  .form_container {
    margin: 0;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .detail_container {
    width: 350px;
    margin: 0;
  }

  #contact__detail {
    letter-spacing: 0;
    width: 350px;
  }

  /* Projects Section */

  .all-projects_container {
    width: 350px;
    position: relative;
    top: 2.063rem;
  }

  .units {
    display: block;
  }
  div.projects__text {
    width: 350px;
    height: auto;
    font-size: 1rem;
  }

  div.unit__box1,
  div.unit__box2 {
    height: auto;
    width: auto;
    margin-left: 0;
    margin-top: 10px;
  }

  /* Images Section */

  .images_container {
    top: 11rem;
    width: 350px;
  }

  div.project1__img,
  div.project2__img,
  div.project3__img {
    flex-direction: column;
  }

  /* Grade Section */

  .grade_container {
    width: 350px;
    margin-top: 15px;
    top: 10.625rem;
  }

  table,
  tr,
  th,
  td,
  .table__item {
    font-size: 16px;
    width: 350px;
  }
}

/*
==========================================================================
            Mobile / Tablet less than 350
========================================================================== 
*/
@media screen and (max-width: 350px) {
  /* Home Page Section */

  #page__imgs {
    top: 0;
  }

  #page__imgs #img1,
  #img2,
  #img3 {
    width: 250px;
    height: 300px;
    padding: 0;
    margin: 5px;
  }

  .text_container {
    width: 250px;
    top: 59.5rem;
  }

  /* About Me Section */

  .about-me_container {
    width: 250px;
  }

  #about-text,
  #about-skills {
    width: 250px;
  }

  #about-me__imgs {
    width: 250px;
    margin-top: 20px;
  }

  img#code_image1,
  img#midkent__img2 {
    width: 250px;
    height: 225px;
  }

  /* Contact Section */
  .contact_container {
    width: 250px;
  }

  .detail_container,
  .form__box {
    width: 250px;
  }

  #contact__detail p {
    text-align: center;
  }

  #contact__detail p a {
    font-size: 16px;
    display: block;
  }
}