/* START OF ESSENTIALS SETTINGS */
:root{
  --font-size: 10px;
  --font-family: 'Inter', sans-serif;
  --font-family-heading: 'Roboto Condensed';
  --font-family-paragraph: 'Inter';
  --font-color-backup: #dee3ed;
  --font-color: #FAFAFA;
  --font-color-text: #CDD2CC;
  --font-color-dark: #B4B6C0;
  --font-color-hover: #C8CCD4;
  --font-weight: 400;
  --font-bold: 800;
  --line-height: 1.5;
  --background-color: #110d16;
  --border-color: #343A40;
  --navbar-color: #130E18;
  --navbar-color-backup: #150F1A;
}

/* reset box model for all elements*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* global settings - for inheritance by all elements on the page */
html{
  height: 100%;
  font-size: var(--font-size);
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--font-color);
  scroll-behavior: smooth;
}

body{
  margin: 0; /* margins in body are explicitly reset */
  padding: 0 9rem;
  font-size: 1.3rem;
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  overflow-x: hidden;
}

html, body{
  min-width: 200px;
}

main{
  padding: 3rem 0rem;
}

section{
  margin: 1rem 0;
  scroll-margin-top: 5.5rem; /* takes into account the navbar height */
}

p{
  margin-bottom: 2rem;
  font-size: 1.6rem;
  font-family: var(--font-family-paragraph);
  color: var(--font-color-text);
}

h1{
  font-size: 0.1rem;
  color: var(--background-color);
}

h2{
  margin-bottom: 2rem;
  font-size: 3rem;
  font-family: var(--font-family-heading);
}

h3{
  margin-bottom: 0.5rem;
  margin-top: 3rem;
  font-size: 2rem;
  font-family: var(--font-family-heading);
  color: var(--font-color-heading);
}

.add-margin-top{
  margin-top: 10rem;
}

.add-margin-top-2{
  margin-top: 5rem;
}

.add-margin-top-3{
  margin-top: 7rem;
}

.add-margin-bottom{
  margin-bottom: 3rem;
}

.add-s-margin-bottom{
  margin-bottom: 1rem;
}

.font-size-inherit {
  font-size: 1.6rem;
}

.color-inherit{
  color: inherit;
}
/* END OF ESSENTIALS SETTINGS */



/* START OF NAVBAR SETTINGS */
nav{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 4.5rem;
  padding: 0;
  margin:0;
  background-color: var(--navbar-color);
  z-index: 1 !important;
}

nav ul{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  list-style: none;
}

nav li:nth-child(1){
  margin-left: 10rem;
  margin-right: 2rem;
}

nav li:nth-child(3){
  margin-left: auto;
  margin-right: 10rem;
}

a {
  text-decoration: none;
  color: var(--font-color-dark);
}

a:hover{
  color: var(--font-color-hover);
}

.a-scaleup:hover{
  transform: scale(1.01);
  transition: transform 0.3s ease;
}
/* END OF NAVBAR SETTINGS */



/* START OF SECTION WELCOME SETTINGS */
section.welcome{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(100vh - 4.5rem); /* takes into account the navbar height */
  padding: 2rem;
  gap: 1rem;
  overflow: hidden;
}

/* div containers for images */
section.welcome > div{
  position: relative;
  display: flex;
  flex: 1 1 45%;
  max-width: 40%;
  min-width: 200px;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* both images */
section.welcome img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* first img div container — animation */
.welcome-img1 {
  animation: borderAnimation 15s infinite ease-in-out;
  mask-image: radial-gradient(circle at center, black 98%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 98%, transparent 100%);
}

/* second img div container — logo */
.welcome-img2 {
  border-radius: 35%;
}

/* animation of image div */
@keyframes borderAnimation {
  0% {
    border-radius: 40% 60% 70% 30% / 50% 30% 60% 40%;
  }
  25% {
    border-radius: 70% 30% 50% 50% / 40% 60% 30% 70%;
  }
  50% {
    border-radius: 60% 40% 30% 70% / 60% 40% 70% 30%;
  }
  75% {
    border-radius: 50% 50% 70% 30% / 50% 60% 30% 60%;
  }
  100% {
    border-radius: 40% 60% 70% 30% / 50% 30% 60% 40%;
  }
}
/* END OF SECTION WELCOME SETTINGS */



/* START OF SECTION PORTFOLIO SETTINGS */
.image-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /*defines 3 equal columns in the grid*/
  grid-auto-rows: auto; /* rows will automatically adjust their height based on content */
  gap: 2rem;
}

.image-grid img{
  width: 100%; /* adjust width to column */
  height: auto; /* maintain image aspect ratio */
  border-radius: 1rem;
}
/* END OF SECTION PORTFOLIO SETTINGS */



/* START OF SECTION CONTACT SETTINGS */
h3::before {
      content: '';
      display: inline-flex; /*element stay inline with text, but also behave as a flex container inside*/
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1; /* forces a square shape */
      width: 2.5rem;
      height: 2.5rem;
      margin-right: 1rem;
      font-family: "Font Awesome 6 Free"; /* font family definition */
      font-size: 2rem;
      font-weight: 900;
    }

    h3:nth-of-type(1)::before {
      content: "\f0e0"; /* unicode code for icon "mail" */
    }

    h3:nth-of-type(2)::before {
      content: "\f095"; /* unicode code for icon "phone" */
    }

    h3:nth-of-type(3)::before {
      content: "\f64f"; /* unicode code for icon "city" */
    }

/* margin for <p> elements */
    .contact-info{
      margin-left: 3.5rem;
      margin-bottom: 2rem;
    }
/* END OF SECTION CONTACT SETTINGS */



/* START OF MEDIA QUERIES SETTINGS */
@media (min-width: 900px) and (max-width: 3000px) {
  .image-grid{
    grid-template-columns: repeat(3, 1fr); /* requires 3 columns */
  }
}

@media (max-width: 900px){

  main{
    padding: 2rem 0;
  }

  body{
    padding: 1rem;;
  }

  nav li:nth-child(1){
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  nav li:nth-child(3){
    margin-left: auto;
    margin-right: 1rem;
  }
}

@media (max-width: 500px) {
  
  section.welcome {
    flex-direction: column;
    padding: 0;
    padding-top: 1rem;
    gap: 0;
  }

  section.welcome > div {
    flex: 1 1 100%;
    max-width: 90%;
    min-width: 90%;
  } 

    section.welcome img {
    width: 100%;
    height: 100%;
  }

  h2{
    font-size: 2rem;
  }

/* END OF MEDIA QUERIES SETTINGS */