/* Scrolling Settings */
html {
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  max-width: 100%;
  background-color: #749bc2;
}
body {
  margin: 0px;
}
:root {
  --vh: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}
section {
  scroll-snap-align: start;
  flex-shrink: 0;
  height: var(--vh);
  transition: height 1s ease;
}
body {
  margin: 0px;
  width: 100vw;
}

/* Text Styling */
/** All **/
/*** Align ***/
.left {
  text-align: left !important;
}
/*** Font-Size ***/
.xs {
  font-size: calc(0.6rem + 0.4vw);
}
.sm {
  font-size: calc(0.8rem + 0.5vw);
}
.m {
  font-size: calc(1rem + 1vw);
}
.l {
  font-size: calc(1rem + 2vw);
  font-weight: 500;
}
.xl {
  font-size: calc(1.2rem + 4vw);
  font-weight: 800;
  text-wrap: pretty;
}
.xxl {
  font-size: calc(1.4rem + 5vw);
  font-weight: 800;
  text-wrap: pretty;
}
/** Font Weight **/
.fw-light {
  font-weight: 400 !important;
}
.fw-thin {
  font-weight: 300 !important;
}
.bold {
  font-weight: 600;
  transition: font-weight 3s, color 3s;
}
.ls-1 {
  line-height: 2em;
}
/** Headings **/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-align: center;
}
@media (max-width: 500px) {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 2em !important;
  }
  section .cont > div:last-child {
    margin-top: calc(10vh * -1) !important;
  }
  .row {
    display: flex;
    flex-direction: column;
  }
}
/* Element Styling */
/** Button **/
.button {
  width: calc(30% + 8rem);
  height: 1rem;
  border-radius: 20px !important;
  margin-top: 3rem;
  margin-left: calc(50% - 15% - 4.5rem);
  transition: transform 2s ease;
  cursor: grab;
}
.button:hover {
  transform: scale(1.2);
}
/** Sizing **/
.w-30 {
  width: 30% !important;
}
.w-40 {
  width: 40% !important;
}
.w-50 {
  width: 50% !important;
}
.w-60 {
  width: 60% !important;
}
.w-70 {
  width: 70% !important;
}
.w-80 {
  width: 80% !important;
}
.w-100 {
  width: 100% !important;
}
.h-30 {
  height: 30%;
}
.mw-40 {
  min-width: 40%;
  height: 100%;
}
/** Positioning **/
/*** FlexBox ***/
.flex {
  display: flex;
}

@media (min-width: 500px) {
  .row {
    display: flex;
    flex-direction: row;
  }
}

.justify-content-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pos-rel {
  position: relative;
}
.pos-stat {
  position: static;
}
.pos-abs {
  position: absolute;
}

/*** Paddings & Margins ***/
.p-1 {
  padding: 5px;
}
.p-2 {
  padding: 10px;
}
.p-3 {
  padding: 20px;
}
.pt-3 {
  padding-top: 20px;
}
.m-0 {
  margin: 0px !important;
}
.m-1 {
  margin: 5px;
}
.m-2 {
  margin: 10px;
}
.m-3 {
  margin: 20px;
}
.mt-0 {
  margin-top: 0px !important;
}
.mt-1 {
  margin-top: 5px !important;
}
.mt-2 {
  margin-top: 10px !important;
}
.mt-3 {
  margin-top: 20px !important;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.mb-1 {
  margin-bottom: 5px;
}
.mb-2 {
  margin-bottom: 10px;
}
.mb-3 {
  margin-bottom: 20px;
}
.mr-3 {
  margin-right: 20px;
}
/*** Fixed Transform ***/
.lb-corner {
  top: 98vw;
  left: 0px;
}

/*** z-index ***/

.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
/** Opacity **/
.d-none {
  display: none;
}
.transp {
  opacity: 0;
  font-size: 0px;
}
.hide {
  transition: opacity 1s ease;
}
/** Layers **/
.front {
  z-index: 2;
}
.back {
  z-index: 0;
}
/* Section Specific */
/** Section 2 - Developer Profile **/
/*** Animated Profile Pic ***/
.sqr-dev {
  width: 10vw;
  height: 15vw;
  max-height: 155px;
  max-width: 100px;
  margin: 5px;
  transition: transform 1.8s ease;
  border-radius: 5px;
  position: relative !important;
  z-index: 2 !important;
}
#profile {
  max-height: 300px;
  padding-bottom: 20vw;
  margin: -5vw 5vw 0px 0px;
  position: relative !important;
  z-index: 2 !important;
}
.grid {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: top;
  height: 100%;
}
#projectdesc {
  margin-bottom: 75px;
}