/* 
    style.css
    portfolio

    Created by Foxster on 2022-09-23.
    Copyright (c) 2022 Foxster. All rights reserved.
*/

@import url("tile.css");
@import url("navbar-toggler.css");
@import url("sections.css");
@import url("colors.css");
@import url("typography.css");
@import url("spacing.css");
@import url("links.css");
@import url("memojis.css");
@import url("animations.css");

* {
  scroll-behavior: smooth;
}

img.pfp {
  border-radius: 50%;
  width: 1.25em;
}

#navbar {
  padding: calc(var(--bs-navbar-padding-y) * .75) var(--bs-navbar-padding-x);
}

#navbar .container-sm {
  padding-left: calc(var(--bs-gutter-x) * .25);
}

#title>span:after {
  content: '|';
  color: var(--azure);
  font-size: 1.275rem;
  font-weight: 400;
  margin-left: -2px;
}

#title>span.not-typing:after {
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

#appearance-toggle {
  border: 1px solid var(--bs-blue);
  width: fit-content;
  padding: 2px;
  border-radius: 7vw;
}

#appearance-toggle ul li a {
  border-radius: 7vw;
  padding: 2px 10px 2px 10px;
}

/* Chevron */
i.bi.bi-chevron-right,
i.bi.bi-chevron-down {
  -webkit-text-stroke: 1px;
  font-size: 12px;
  vertical-align: text-bottom;
}

/* Form required field */
.form-label.required::after {
  content: "*";
  font-weight: normal;
}

/* Mobile settings */
@media (max-width: 575px) {
  .foot-div {
    justify-content: center !important;
  }

  #appearance-toggle-container {
    margin-bottom: 0.5rem;
  }

  #navbar-content {
    margin-left: 2%;
    margin-right: 2%;
  }

  #navbar-content #filler {
    height: 75vh;
  }

  .navbar-collapse.collapsing {
    transition: height 0.45s ease-in-out;
  }

  #navbar-content.collapsing-in .nav-item {
    animation: fade_in 0.5s ease-in-out forwards;
  }
  
  #navbar-content.collapsing-in .nav-item:nth-child(1) {
    animation-delay: 0.05s;
  }
  
  #navbar-content.collapsing-in .nav-item:nth-child(2) {
    animation-delay: 0.1s;
  }
  
  #navbar-content.collapsing-in .nav-item:nth-child(3) {
    animation-delay: 0.15s;
  }
  
  #navbar-content.collapsing-in .nav-item:nth-child(4) {
    animation-delay: 0.2s;
  }
  
  #navbar-content.collapsing-in .nav-item:nth-child(5) {
    animation-delay: 0.25s;
  }
  
  #navbar-content .nav-item {
    opacity: 0;
    padding-left: 2rem;
  }

  #navbar-content .nav-item a {
    font-size: 1.65rem !important;
    font-weight: 550;
  }
  
  #navbar-content.collapsing-out .nav-item {
    animation: fade_out 0.25s ease-in-out forwards;
  }

  #main-container {
    transition: opacity 0.5s ease 0.125s;
  }
}

/* lg */
@media (max-width: 991px) {
  #navbar {
    padding: calc(var(--bs-navbar-padding-y) * .5) var(--bs-navbar-padding-x);
  }
}

.initially-hidden {
  opacity: 0;
}

.shadow1 {
  filter: drop-shadow(0px 1px 2px rgb(0, 0, 0, 0.3));
}