/*==================================================
Main
==================================================*/

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body,
html {
   overflow: hidden;
   scroll-behavior: smooth;
}

:root {
   --theme-color: #27c878;
}


/*==================================================
Common Classes
==================================================*/

.block {
   height: 100vh;
   background-color: #f5f5f5;
   display: grid;
   grid-template-columns: 50% 50%;
}

.section-head {
   background-color: #f5f5f5;
}

.section-head,
.section-text {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

.section-text {
   height: 100vh;
   overflow: scroll;
   background-color: #fff;
   text-align: center;
   font-family: Nunito;
}

.section-text p {
   padding: .5rem 0;
   text-indent: 1.5rem;
   max-width: 650px;
}

.image-background {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   opacity: .15;
   pointer-events: none;
}

/*==================================================
Directional-arrows
==================================================*/

.page-arrow {
   pointer-events: all;
   position: fixed;
   top: 50%;
   z-index: 100;
   width: 3.5rem;
   height: 3.5rem;
   background-color: #fafafa;
   border-radius: 50%;
   border: solid .2rem #ddd;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: .2s;
   cursor: pointer;
   margin: 0 .8rem;
   opacity: 0.7;
   font-size: 1.6rem;
}

.page-arrow:hover {
   border-color: #ccc;
   transform: scale(1.1);
   opacity: 1;
}

.arrow-left {
   left: 0;
}

.arrow-right {
   right: 0;
}

/*==================================================
Progress
==================================================*/

.progress-parent {
   position: fixed;
   left: 0;
   bottom: 0;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-bottom: 10px;
   z-index: 100;
}

.progress {
   display: flex;
   list-style-type: none;
   padding: 0;
   transition: .1s;
}

.progress .dot {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 2.3rem;
   width: 2.3rem;
   font-size: .5rem;
   border-radius: 50%;
   background-color: #fff;
   color: #f9f9f9;
   transition: 0.15s;
   border: solid .11rem #ccc;
   margin: 0 .35em;
   overflow: hidden;
   align-self: flex-end;
   box-sizing: border-box;
   padding: 1.1rem;
}

.progress .dot span {
   color: #666;
   background-color: transparent;
}

.progress .dot.active {
   background-color: #ddd;
   color: #000;
}

.progress .dot.active span {
   color: #222;
}

.progress .dot:hover {
   height: 3rem;
   width: 3rem;
   font-size: .75rem;
   margin: 0;
   border-width: .15rem;
}


/*==================================================
Landing
==================================================*/

/* Hi Animation */

.hi {
   padding: 50px;
   font-size: 250%;
   display: inline-block;
   transition: all .3s;
   margin: 0 auto;
}

@media only screen and (min-width: 700px) {
   .block:hover .hi {
      color: #f9f9f9;
      font-size: 280%;
      background-color: #262626;
      border-radius: 2%;
   }

}

.section-head div {
   display: grid;
   justify-content: center;
}

.section-image {
   display: block;
   object-fit: cover;
   width: 400px;
   height: 400px;
   border-radius: 10px;
}

/* About Me */
.about-me {
   display: block;
   text-align: left;
   margin: 0 80px;
   font-size: 120%;
   transform: translateY(-50px);
   opacity: 0;
   transition: all .8s;
   transition-delay: .25s;
}

.about-me h1 {
   text-align: center;
}

body:hover .about-me {
   transform: translateY(2px);
   opacity: 1;
}



/*==========================================================
Links
==========================================================*/

a {
   color: var(--theme-color);
}


.fancy-underline {
   text-decoration: none;
   position: relative;
   background-color: #ffffff88;
}

.fancy-underline:after {
   content: "";
   display: block;
   height: 1.5px;
   left: 50%;
   position: absolute;
   background: var(--theme-color);
   transition: all .2s;
   width: 0;
}

.fancy-underline:hover:after {
   width: 100%;
   left: 0;
}


/*==================================================
Personal
==================================================*/

.will-not-find-me-at {
   font-family: Nunito;
}

.find-me {
   margin: 50px 50px 0 50px;
}

.nothing-link:after {
   display: none;
}

.will-not-find-me-at {
   display: flex;
   justify-content: center;
   text-align: center;
   flex-wrap: wrap;
   margin: auto;
}

.will-not-find-me-at a {
   width: 90px;
   height: 90px;
   background-color: #fafafa;
   margin: 10px;
   border-radius: 30%;
   color: var(--theme-color);
   border: solid .2rem #eee;
   position: relative;
   overflow: hidden;
   transition: all 0.2s;
}

i {
   line-height: 90px;
   font-size: 25px;
   transition: all 0.2s;
   margin-top: 35%;
}

.will-not-find-me-at a:hover i {
   transform: scale(1.5) rotate(360deg);
   color: whitesmoke;
}

.will-not-find-me-at a:hover {
   background-color: var(--theme-color);
}

.contact {
   margin-top: 4em;
}

.contact p {
   font-size: 120%;
   margin: .4em 0;
   padding: 0;
   font-family: monospace;
}


/*==================================================
Hover
==================================================*/

.dynamicHover,
.dynamicHoverDark {
   position: fixed;
   z-index: 1000;
   padding: .3vh .6vw;
   font-family: "Nunito";
   border-radius: .8vh;
   font-size: 1.2rem;
   transition: opacity .1s;
   opacity: 0;
}

.dynamicHover {
   background-color: #e9e9e9;
   color: #2b2b2b;
}

.dynamicHoverDark {
   background-color: #2b2b2b;
   color: #e9e9e9;
}


/*==================================================
Random
==================================================*/

.hidden {
   opacity: 0;
   pointer-events: none;
}

ul {
   list-style-type: "➤ ";
   padding: 0 1rem;
}

li {
   margin: 1rem 0;
   padding-left: .75rem;
   max-width: 650px;
}

.date {
   font-style: italic;
   opacity: .5;
}


/*==================================================
Dark
==================================================*/

@media (prefers-color-scheme: dark) {
   .fancy-underline {
      background-color: #000000aa;
   }

   .section-head {
      background-color: #000;
      color: #aaa;
   }

   .section-text {
      background-color: #222;
      color: #e9e9e9;
   }

   .page-arrow {
      background-color: #333;
      color: #e9e9e9;
      border-color: #555;
   }
   .page-arrow:hover {
      border-color: #555;
      opacity: 1;
   }

   .progress .dot {
      background-color: #444;
      border-color: #666;
   }

   .progress .dot span {
      color: #bbb;
   }

   .progress .dot.active {
      background-color: #111;
   }

   .progress .dot.active span {
      color: #ddd;
   }

   .will-not-find-me-at a {
      border-color: #666;
      background-color: #333;
   }

   .dynamicHoverDark {
      background-color: #e9e9e9;
      color: #2b2b2b;
   }
}


/*==================================================
Mobile
==================================================*/

@media only screen and (max-width: 700px) {
   .page-arrows {
      display: none;
   }
   .block {
      grid-template-columns: 100%;
      grid-template-rows: auto auto;
      height: 100vh;
   }

   .section-head {
      height: 30vh;
      overflow: auto;
   }

   .section-text {
      height: 70vh;
      overflow: auto;
      font-size: 105%;
      padding-top: 10rem;
      padding-bottom: 5rem;
   }

   .section-text .about-me {
      margin: 0 10px;
   }

   #contact .hi {
      padding: 0;
      margin-bottom: 10px;
   }

   #contact .section-head {
      height: 30vh;
   }

   #contact .section-text {
      height: 30vh;
   }

   .contact {
      margin-top: 0;
   }

   .hi::after,
   .hi::before {
      all: unset;
   }

   .progress-parent {
      padding: 0;
      margin: 0;
   }

   .progress {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .progress .dot {
      height: 3.4rem;
      width: 3.4rem;
      border-radius: 0;
      margin: 0;
   }

   .about-me {
      transform: translateY(2px);
      opacity: 1;
   }
}