/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,300&display=swap');

/* GLOBAL VARIABLES */
:root {
  --navbar-menu-bg: #293241;
  --navbar-text-color: #ffffff; 

  --navbar-bars: #98c1d9;
  --navbar-hover-bars: #6c94ac;

  --hero-text-bg: 245, 228, 212;

  --work-btn: #5b7bb4;
  --work-hover-btn: #6f96da;
  --work-hover-color-text: #293241;

  --stack-html: #e34f26;
  --stack-css: #1572B7;
  --stack-js: #c4c429; 

  --about-btn: #237c23;
  --about-hover-btn: #30a830;

  --social-github: #000000;
  --social-linkedin: #0077B5;
  --social-twitter: #08a0e9;
  --social-box-shadow: #82d9fc;  

  --footer-bg: #1d232e;

  --color-white: #ffffff;
  --color-black: #000000;  
}

/* GENERAL */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

/* NAVIGATION */
.custom-navbar {
  background: var(--navbar-menu-bg);
}

.custom-navbar__container {
  align-items: flex-end !important;
}

.custom-navbar__container > *:not(.custom-navbar__logo) {
  padding-left: 12px;  
}

.custom-navbar__logo {
  width: 45px;
  margin: 5px 20px 5px 10px;
}

.custom-nav__link {
  color: var(--navbar-text-color);
}

.custom-nav__link:focus, .custom-nav__link:hover {
  color: var(--navbar-hover-bars);  
}

.custom-navbar__menu {
  border: none;  
  align-self: center;
}

.custom-navbar__menu:focus {
  box-shadow: none;
}

.custom-navbar__bars {
  color: var(--navbar-bars);  
}

.custom-navbar__bars:hover {
  color: var(--navbar-hover-bars);  
}

/* HERO */
.custom-header__center{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  text-align: center;
}

.custom-header__center p {
  text-align: justify;
  hyphens: auto;
}

.custom-header {
  background-image: url("../images/hero-bg.jpg");
  background-position: 60% 35%;
  background-repeat: no-repeat; 
  background-size: cover;
  box-shadow: 0 1px 5px .1px var(--navbar-menu-bg);
}

.custom-header p {
  font-weight: 600;  
  background: rgba(var(--hero-text-bg), 0.15);
  border-radius: 5px;
  padding: 15px;  
}

/* WORK */
.work {
  padding-top: 50px;
}
.card {
  border: 1px solid var(--navbar-hover-bars);
}

.custom-work-container,
.custom-aboutme-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.custom-title-header {
  margin: 0;
  font-weight: 600;
  text-decoration: underline;
}

.custom-work-img {
  display: inline-block;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--navbar-hover-bars);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.custom-work-body,
.custom-aboutme-body {
  display: flex ;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;  
  padding-left: 5px;
}

.custom-work-title {
  font-weight: 600;
}

.custom-work-body > *:not(.card-title):not(.custom-work-btn) {
  padding-left: 5px;
}

.custom-work-btn {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 5px;
}

.custom-work-btn a {
  min-width: 150px;
  margin: 0 10px 10px 0;
  background: var(--work-btn);  
  border: 1px solid var(--navbar-bars);
  color: var(--color-white);
}

.custom-work-btn a:hover {  
  color:  var(--work-hover-color-text);
  background: var(--work-hover-btn);
}

.stack-used {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  height: 50px;
}

.stack-used > i {
  font-size: 3rem;
}

.stack-used__html {
  color: var(--stack-html);
}

.stack-used__css {
  color: var(--stack-css);
}

.stack-used__js {
  color: var(--stack-js);
}

.stack-used__corners { 
  border-radius: 5px;
}

.stack-used img { 
  height: 60px;
  width: 60px;
}

/* ABOUT ME */
.aboutme {
  margin-top: 50px;
}

.custom-aboutme-body {
  padding-top: 0;
}

.custom-title-aboutme,
.custom-title-skills {  
  font-weight: 600;
  text-decoration: underline;
}

.aboutme-img {
  border-radius: 100%;
  height: 250px;
  width: 250px;
  object-fit: cover;  
  aspect-ratio: 1/0.85;
  border: 1px solid var(--color-black);
}

.aboutme-img-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aboutme-img-container a{
  min-width: 150px;
  margin: 20px 0 0 0;
  background: var(--about-btn);  
  border: 1px solid rgb(35, 124, 35);
  color: var(--color-white);
}

.aboutme-img-container a:hover {  
  color:  var(--work-hover-color-text);
  background: var(--about-hover-btn);
}

/* SOCIALS */
.contact {
  margin-top: 100px;
  text-align: center;
  background: var(--footer-bg);
}

.social {
  padding: 30px 10px;
}

.social img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 5px;
}

.social a{
  text-decoration: none;  
}

.social-linkedin {
  filter: brightness(0) invert(100%);  
}

.social-twitter {
  border: 2px solid var(--social-twitter); 
  filter: brightness(0) invert(100%);  
}

.social-github {
  filter: invert(100%);
}

.social img:hover {
  cursor: pointer;
  box-shadow: 0 1.5px 5px .10px var(--color-black);
}

/* FOOTER */
.footer {
  text-align: center;
  color: var(--color-white);  
  background: var(--footer-bg);
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
  /* hero background */
  .custom-header {
    background-position: 50% 35%;
  }
 
  /* work */
  .custom-work-body {
    padding: 20px;     
  }
  .custom-work-img{
    border-top-right-radius: calc( 0.375rem - ( 1px ));
    border-bottom-left-radius: 0;
  }

  /* about me */
  .aboutme {
    margin-top: 20px;
  }
  .custom-aboutme-body {
    margin-top: 15px;
  }
  .custom-aboutme-body p {
    text-align: justify;
  }
  .custom-aboutme-body h2,
  .custom-aboutme-body h3{
    text-align: center;
  }

  /* contact */
  .contact {
    margin-top: 150px;
  }
}