/*
  Google Fonts list
  ==================

  Serif Fonts:
  - font-family: 'Alice', serif;
  - font-family: 'Libre Baskerville', serif;
  - font-family: 'Merriweather', serif;

  Sans-serif Fonts:
  - font-family: 'Fira Sans', sans-serif;
  - font-family: 'Montserrat', sans-serif;
  - font-family: 'Noto Sans', sans-serif;
  - font-family: 'Rubik', sans-serif;

  Cursive Fonts:
  - font-family: 'Caveat', cursive;
  - font-family: 'Sacramento', cursive;
  - font-family: 'Sofia', cursive;
  - font-family: 'Yeseva One', cursive;
*/

body {
  background-color: #293039;
}

a {
  text-decoration: none;
}

/* Main Body/Intro Section Style */
.intro {
  height: 100vh;
  font-family: "Rubik", sans-serif;
  padding-left: 0;
  padding-right: 0;
}

/* Grid Container Style and Layout */
.grid-container {
  height: 100%;
  display: grid;
  grid-template: 1fr 2.14fr / 1fr 1.6fr;
}

/* Grid Item Styles */
.grid-item-1 {
  grid-row: span 2;
}

.grid-item-2 {
  background-color: #ffda94;
  color: #b37400;
  order: 1;
  grid-area: 1 / 2 / 2 / 3;
  border-top-left-radius: 3.2rem;
  border-bottom-left-radius: 3.2rem;
  border-bottom-right-radius: 2%;
}

.grid-item-3 {
  background-color: #9dc6fc;
  grid-area: 1 / 2 / 3 / 3;
  border-top-left-radius: 3.2rem;
  border-bottom-left-radius: 3.2rem;
}

.grid-item-4 {
  background-color: #9dc6fc;
  order: 2;
  grid-area: 2 / 2 / 3 / 3;
  border-bottom-left-radius: 3.2rem;
}

/* Title and About Section: Flex Container Style and Layout */
.flex-container {
  display: flex;
  align-items: center;
  padding-left: 12.5%;
  padding-right: 12.5%;
}

/* Profile Display Section: Flex Container Style and Layout */
.dp-flex-container {
  display: flex;
  justify-content: center;
  padding-left: 12.5%;
  padding-right: 12.5%;
}

/* Display Picture (img) Style */
.dp {
  width: 98%;
  border-radius: 2.6rem;
  margin-top: 15%;
  margin-bottom: 3rem;
}

/* Email-Me Button Style */
.btn-email {
  width: 160pt;
  background-color: transparent;
  color: #9dc6fc;

  text-decoration: none;

  font-weight: 500;
  font-size: 16pt;

  border: 3pt solid #9dc6fc;
  border-radius: 6pt;

  margin-bottom: 3rem;

  padding-top: 6pt;
  padding-bottom: 6pt;
}

/* Email-Me Button Hover Style */
.btn-email:hover {
  background-color: #9dc6fc;
  color: #004db2;
  transition: ease-in 0.15s;
}

/* Internal Flex Container Used for the Layout of the Social Media Links Icons */
.internal-flex-container {
  display: flex;
  justify-content: space-evenly;
}

/* Social Media Logos: Standard Styling */
.social-media-logo {
  width: 28pt;
  height: 28pt;
  color: #9dc6fc;
}

/* Social Media Logos Hover Styles */
.github.social-media-logo:hover {
  color: white;
}

.discord.social-media-logo:hover {
  color: #7289d9;
}

.linkedin.social-media-logo:hover {
  color: #0a66c2;
}

.social-media-logo:hover {
  transition: ease-in 0.15s;
}

/* Title Section: Title and Subtitle Styles */
.title {
  font-weight: 500;
  font-size: 42pt !important;
}

.subtitle {
  font-weight: 500;
  font-size: 22pt;
}

/* About Section: Title and Paragraph Styles */
.about-title {
  color: #004db2;
  font-weight: 500;
  font-size: 30pt;
  margin-bottom: 5%;
}

.about-para {
  color: #004db2;
  font-size: 16pt;
  margin-bottom: 8%;
  padding-right: 28%;
}

/* About Section: Buttons Style */
.about-btn {
  width: 184pt;
  background-color: #fffef4;
  color: #004db2;

  font-weight: 500;
  font-size: 14pt;

  border: none;
  border-radius: 6pt;

  margin-right: 36pt;
  margin-bottom: 12pt;

  padding-top: 12pt;
  padding-bottom: 12pt;
}

/* About Section: Buttons Hover Style */
.about-btn:hover {
  background-color: #deeafa;
  transition: ease-in 0.15s;
}

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

/* General Media Query for 18.5/9 Aspect Ratio */
@media (min-aspect-ratio: 18.5/9) {
  /* Grid Container Style and Layout */
  .grid-container {
    grid-template: 1fr 2fr / 1fr 2fr;
  }

  /* Grid Item Styles */
  .grid-item-1 {
    order: 1;
    margin-bottom: 30pt;
  }

  .grid-item-2 {
    order: 0;
    grid-area: 1 / 1 / 2 / 3;
    border-top-left-radius: 0rem;
    border-bottom-right-radius: 3.2rem !important;
    margin-bottom: 30pt;
  }

  .grid-item-3 {
    background-color: transparent;
  }

  .grid-item-4 {
    order: 2;
    grid-area: 2 / 2 / 3 / 3;
    border-top-left-radius: 3.2rem;
    border-top-right-radius: 3.2rem;
    border-bottom-right-radius: 3.2rem;
  }

  /* Display Picture (img) Style */
  .dp {
    height: 60%;
    width: 100%;
    object-fit: cover;

    border-radius: 2rem;
  }
}

/* Media Query for Minimum 18.5/9 Aspect Ratio with Minimum 1400px Width */
@media (min-width: 1400px) and (min-aspect-ratio: 18.5/9) {
  /* Display Picture (img) Style */
  .dp {
    margin-top: 3rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 220pt;

    font-size: 22pt;

    border: 4pt solid #9dc6fc;
    border-radius: 7pt;

    padding-top: 7pt;
    padding-bottom: 7pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 36pt;
    height: 36pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 56pt !important;
  }

  .subtitle {
    font-size: 30pt;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 40pt;
  }

  .about-para {
    font-size: 22pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 263pt;

    font-size: 20pt;

    border-radius: 7pt;

    margin-right: 36pt;
    margin-bottom: 18pt;

    padding-top: 18pt;
    padding-bottom: 18pt;
  }
}

/* Media Query for Minimum 18.5/9 Aspect Ratio with Maximum 1400px Width */
@media (max-width: 1400px) and (min-aspect-ratio: 18.5/9) {
  /* Display Picture (img) Style */
  .dp {
    margin-top: 1.5rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 160pt;

    font-size: 16pt;

    border: 3pt solid #9dc6fc;
    border-radius: 6pt;

    padding-top: 6pt;
    padding-bottom: 6pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 28pt;
    height: 28pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 42pt !important;
  }

  .subtitle {
    font-size: 22pt;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 30pt;
  }

  .about-para {
    font-size: 16pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 184pt;

    font-size: 14pt;

    border-radius: 6pt;

    margin-right: 41pt;
    margin-bottom: 10pt;

    padding-top: 12pt;
    padding-bottom: 12pt;
  }
}

/* Media Query for Minimum 16/9.2 Aspect Ratio And Maximum 18.5/9 Aspect Ratio
   with Minimum 1700px Width */
@media (min-width: 1700px) and (min-aspect-ratio: 16/9.2) and (max-aspect-ratio: 18.5/9) {
  /* Display Picture (img) Style */
  .dp {
    margin-bottom: 3.6rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 240pt;

    font-size: 24pt;

    border: 5pt solid #9dc6fc;
    border-radius: 8pt;

    margin-bottom: 3.6rem;

    padding-top: 9pt;
    padding-bottom: 9pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 38pt;
    height: 38pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 56pt !important;
  }

  .subtitle {
    font-size: 34pt;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 42pt;
  }

  .about-para {
    font-size: 24pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 289pt;

    font-size: 22pt;

    border-radius: 8pt;

    margin-right: 42pt;
    margin-bottom: 22pt;

    padding-top: 20pt;
    padding-bottom: 20pt;
  }
}

/* Media Query for Minimum 4/3 Aspect Ratio with Maximum 820px Width */
@media (max-width: 820px) and (min-aspect-ratio: 4/3) {
  /* Grid Container Style and Layout */
  .grid-container {
    grid-template: 1fr 1fr 2fr / 1fr !important;
  }

  /* Grid Item Styles */
  .grid-item-1 {
    order: 2;
    grid-row: span 1;
    grid-column: span 1;
  }

  .grid-item-2 {
    order: 0;
    grid-row: span 1;
    grid-column: span 1;

    border-top-left-radius: 0rem !important;
    border-bottom-left-radius: 3rem !important;
    border-bottom-right-radius: 3rem;

    margin-bottom: 30pt;
  }

  .grid-item-3 {
    background-color: transparent;

    grid-row: span 0;
    grid-column: span 0;
  }

  .grid-item-4 {
    order: 1;
    grid-row: span 1;
    grid-column: span 1;

    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;

    margin-bottom: 30pt;
  }

  /* Display Picture (img) Style */
  .dp {
    width: 100%;
    border-radius: 2.2rem;
    margin-top: 0;
    margin-bottom: 3.2rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 160pt;

    text-decoration: none;
    font-size: 16pt;

    border: 4pt solid #9dc6fc;
    border-radius: 7pt;

    margin-bottom: 3.2rem;

    padding-top: 6pt;
    padding-bottom: 6pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 32pt;
    height: 32pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 36pt !important;
  }

  .subtitle {
    font-size: 20pt !important;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 26pt;
  }

  .about-para {
    font-size: 16pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 184pt;

    font-size: 14pt;

    border-radius: 9pt;

    margin-right: 30pt;
    margin-bottom: 10pt;

    padding-top: 12pt;
    padding-bottom: 12pt;
  }
}

/* Media Query for Maximum 16:9.2 Aspect Ratio */
@media (max-aspect-ratio: 16/9.2) {
  /* Grid Container Style and Layout */
  .grid-container {
    grid-template-columns: 1fr 1.2fr;
  }

  .grid-item-1 {
    padding-top: 0 !important;
  }
}

/* Media Query for Maximum 16/9.2 Aspect Ratio with Minimum 1700px Width */
@media (min-width: 1700px) and (max-aspect-ratio: 16/9.2) {
  /* Display Picture (img) Style */
  .dp {
    margin-bottom: 3.6rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 240pt;

    font-size: 24pt;

    border: 5pt solid #9dc6fc;
    border-radius: 8pt;

    margin-bottom: 3.6rem;

    padding-top: 9pt;
    padding-bottom: 9pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 38pt;
    height: 38pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 48pt !important;
  }

  .subtitle {
    font-size: 30pt;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 38pt;
  }

  .about-para {
    font-size: 20pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 236pt;

    font-size: 18pt;

    border-radius: 8pt;

    margin-right: 42pt;
    margin-bottom: 18pt;

    padding-top: 16pt;
    padding-bottom: 16pt;
  }
}

/* Media Query for Maximum 4:3 Aspect Ratio and Below
   This Media Query Also Contains Standards for The Media Queries Below */
@media (max-aspect-ratio: 4/3) {
  /* Grid Container Style and Layout */
  .grid-container {
    grid-template: 1fr 1fr 2fr / 1fr;
  }

  /* Grid Item Styles */
  .grid-item-1 {
    order: 2;
    grid-row: span 1;
    grid-column: span 1;
  }

  .grid-item-2 {
    order: 0;
    grid-row: span 1;
    grid-column: span 1;

    border-top-left-radius: 0rem !important;
    border-bottom-left-radius: 3.2rem !important;
    border-bottom-right-radius: 3.2rem;

    margin-bottom: 30pt;
  }

  .grid-item-3 {
    grid-row: span 0;
    grid-column: span 0;
  }

  .grid-item-4 {
    order: 1;
    grid-row: span 1;
    grid-column: span 1;

    border-top-left-radius: 3.2rem;
    border-top-right-radius: 3.2rem;
    border-bottom-left-radius: 3.2rem;
    border-bottom-right-radius: 3.2rem;

    margin-bottom: 30pt;
  }

  /* Display Picture (img) Style */
  .dp {
    width: 100%;
    border-radius: 2.6rem;
    margin-top: 0;
    margin-bottom: 3.6rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 220pt;

    text-decoration: none;
    font-size: 22pt;

    border: 5pt solid #9dc6fc;
    border-radius: 10pt;

    margin-bottom: 3.6rem;

    padding-top: 10pt;
    padding-bottom: 10pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 42pt;
    height: 42pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 46pt !important;
  }

  .subtitle {
    font-size: 28pt !important;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 34pt;
  }

  .about-para {
    font-size: 22pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 263pt;

    font-size: 20pt;

    border-radius: 9pt;

    margin-right: 36pt;
    margin-bottom: 12pt;

    padding-top: 16pt;
    padding-bottom: 16pt;
  }
}

/* Media Query for 1:1 Aspect Ratio
   This Media Query Is Also Used as a Standard By The Media Query Right Below This One
   If & Only If The Width Exceeds 767px With a Maximum Aspect Ratio of 1:1
   
   - Note: This Was Done in This Way Because I Wanted The View-ports That Have a 3:4 
           Aspect Ratio But a Width Greater Than 767px To Have The Styles Applied By
           The 1:1 Aspect Ratio Media Query (Since The Sizing Used in it is Bigger
           To Match The Bigger Width View-ports >767px) */
@media (max-aspect-ratio: 1/1) {
  /* Grid Item Styles */
  .grid-item-2 {
    border-bottom-left-radius: 3.2rem !important;
    border-bottom-right-radius: 3.2rem;
  }

  .grid-item-4 {
    border-top-left-radius: 3.2rem;
    border-top-right-radius: 3.2rem;
    border-bottom-left-radius: 3.2rem;
    border-bottom-right-radius: 3.2rem;
  }

  /* Display Picture (img) Style */
  .dp {
    border-radius: 2.6rem;

    margin-top: 0;
    margin-bottom: 3.6rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 220pt;

    font-size: 22pt;

    border: 5pt solid #9dc6fc;
    border-radius: 10pt;

    margin-bottom: 3.6rem;

    padding-top: 10pt;
    padding-bottom: 10pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 42pt;
    height: 42pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 46pt !important;
  }

  .subtitle {
    font-size: 28pt !important;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 34pt;
  }

  .about-para {
    font-size: 22pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 263pt;

    font-size: 20pt;

    border-radius: 9pt;

    margin-right: 36pt;
    margin-bottom: 12pt;

    padding-top: 16pt;
    padding-bottom: 16pt;
  }
}

/* Media Query for Maximum 3:4 Aspect Ratio with Maximum 767px Width */
@media (max-width: 767px) and (max-aspect-ratio: 3/4) {
  /* Grid Item Styles */
  .grid-item-2 {
    border-bottom-left-radius: 3rem !important;
    border-bottom-right-radius: 3rem;
  }

  .grid-item-4 {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
  }

  /* Display Picture (img) Style */
  .dp {
    border-radius: 2.2rem;
    margin-bottom: 3.2rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 160pt;

    font-size: 16pt;

    border: 4pt solid #9dc6fc;
    border-radius: 7pt;

    margin-bottom: 3.2rem;

    padding-top: 6pt;
    padding-bottom: 6pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 30pt;
    height: 30pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 36pt !important;
  }

  .subtitle {
    font-size: 20pt !important;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 26pt;
  }

  .about-para {
    font-size: 16pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 184pt;

    font-size: 14pt;

    margin-right: 30pt;
    margin-bottom: 10pt;

    padding-top: 12pt;
    padding-bottom: 12pt;
  }
}

/* Media Query for Maximum 9:16 Aspect Ratio */
@media (max-aspect-ratio: 9/16) {
  /* Grid Item Styles */
  .grid-item-2 {
    border-bottom-left-radius: 2.6rem !important;
    border-bottom-right-radius: 2.6rem;
  }

  .grid-item-4 {
    border-top-left-radius: 2.6rem;
    border-top-right-radius: 2.6rem;
    border-bottom-left-radius: 2.6rem;
    border-bottom-right-radius: 2.6rem;
  }

  /* Display Picture (img) Style */
  .dp {
    border-radius: 2rem;
    margin-bottom: 3rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 140pt;

    font-size: 14pt;

    border: 3pt solid #9dc6fc;
    border-radius: 6pt;

    margin-bottom: 3rem;

    padding-top: 6pt;
    padding-bottom: 6pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 26pt;
    height: 26pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 30pt !important;
  }

  .subtitle {
    font-size: 18pt !important;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 22pt;
  }

  .about-para {
    font-size: 14pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 157pt;

    font-size: 12pt;

    border-radius: 6pt;

    margin-right: 25pt;
    margin-bottom: 10pt;

    padding-top: 10pt;
    padding-bottom: 10pt;
  }
}

/* Media Query for Maximum 9:21 Aspect Ratio, or for Maximum Aspect Ratio
   of 9:16 With Maximum Width of 315px */
@media (max-aspect-ratio: 9/21),
  (max-width: 315px) and (max-aspect-ratio: 9/16) {
  /* Grid Item Styles */
  .grid-item-2 {
    border-top-left-radius: 0rem !important;
    border-bottom-left-radius: 2rem !important;
    border-bottom-right-radius: 2rem;
  }

  .grid-item-4 {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }

  /* Display Picture (img) Style */
  .dp {
    border-radius: 1.8rem;
    margin-bottom: 2.4rem;
  }

  /* Email-Me Button Style */
  .btn-email {
    width: 100pt;

    font-size: 10pt;

    border: 2pt solid #9dc6fc;
    border-radius: 4pt;

    margin-bottom: 2.4rem;

    padding-top: 4pt;
    padding-bottom: 4pt;
  }

  /* Social Media Logos: Standard Styling */
  .social-media-logo {
    width: 20pt;
    height: 20pt;
  }

  /* Title Section: Title and Subtitle Styles */
  .title {
    font-size: 25pt !important;
  }

  .subtitle {
    font-size: 14pt !important;
  }

  /* About Section: Title and Paragraph Styles */
  .about-title {
    font-size: 19pt;
  }

  .about-para {
    font-size: 10pt;
  }

  /* About Section: Buttons Style */
  .about-btn {
    width: 118pt;

    font-size: 9pt;

    border-radius: 6pt;

    margin-right: 24pt;
    margin-bottom: 10pt;

    padding-top: 8pt;
    padding-bottom: 8pt;
  }
}