alexdaniels.me/assets/styles/landing.css

.home {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #696969;
  margin: 0;
}
.home header {
  width: 100%;
}
.home header h1 {
  margin: 0;
}
.home header h1 a {
  display: block;
  font-size: 1.5rem;
  text-decoration: none;
  color: #1d1f20;
  background-color: #d7b94c;
  border: 2px solid #d7b94c;
  padding: 2px 2px;
}
.home header h1 a:hover {
  color: #d7b94c;
  background-color: unset;
}
.home header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  overflow: hidden;
  position: relative;
}
.home header nav .icon.icon-menu {
  position: absolute;
  z-index: 999;
  display: block;
  right: 2rem;
  width: 30px;
  height: 30px;
  transition: right 100ms ease;
}
@media screen and (min-width: 600px) {
  .home header nav .icon.icon-menu {
    display: none;
  }
}
.home header nav .icon.icon-menu:before {
  content: "";
  display: block;
  background-image: url("/icons/menu-grid.svg");
  background-size: 100%;
  position: absolute;
  width: 30px;
  height: 30px;
}
.home header nav .icon.icon-menu:hover {
  cursor: pointer;
}
.home header nav .icon.icon-menu.open {
  right: 200px;
}
.home header nav .front-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  position: fixed;
  right: -100%;
  top: 1rem;
  margin: 0;
  padding: 0;
  transition: right 200ms ease;
  background-color: #d7b94c;
}
.home header nav .front-menu.open {
  right: 0;
}
@media screen and (min-width: 600px) {
  .home header nav .front-menu {
    flex-direction: row;
    position: relative;
    top: unset;
    right: unset;
    background-color: unset;
  }
}
.home header nav .front-menu {
  list-style: none;
}
.home header nav .front-menu li {
  display: block;
  padding: 5px 10px;
}
.home header nav .front-menu li a {
  display: block;
  font-family: AtomicAge-Regular;
  color: #FBFCFF;
  font-size: 1.5rem;
  text-decoration: none;
  padding-bottom: 2px;
}
@media (min-width: 600px) {
  .home header nav .front-menu li a {
    color: #d7b94c;
  }
}
.home header nav .front-menu li a:hover {
  border-bottom: 2px solid #d7b94c;
  padding-bottom: 0;
}
.home #root.v1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  margin: 0 auto;
}
.home #root.v1 section {
  margin: 0;
  padding: 1rem 0;
}
.home #root.v1 section .title {
  margin: 0;
}
.home #root.v1 .top {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
@media (min-width: 600px) {
  .home #root.v1 .top {
    align-items: center;
  }
}
.home #root.v1 .top .computer {
  display: block;
  max-width: 800px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  background-color: #1d1f20;
  border: 2rem solid #a6a695;
  padding: 1rem 1rem;
  box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
  margin-top: 5rem;
}
@media (min-width: 600px) {
  .home #root.v1 .top .computer {
    margin-top: -2rem;
  }
}
.home #root.v1 .top .computer .heading {
  margin: 0;
  font-size: 0.85rem;
  font-family: Montserrat-Light;
  color: #d7b94c;
  position: relative;
  padding-left: 1rem;
}
@media screen and (min-width: 600px) {
  .home #root.v1 .top .computer .heading {
    font-size: 1rem;
  }
}
.home #root.v1 .top .computer .heading:before {
  content: ">";
  position: absolute;
  left: 0;
  width: 100%;
}
.home #root.v1 .top .computer .heading:after {
  content: "|";
  position: absolute;
  right: 0;
  width: 100%;
  background: #1d1f20;
  animation: typing 0.5s steps(16) forwards, cursor 1s infinite;
}
@media screen and (min-width: 600px) {
  .home #root.v1 .top .computer .heading:after {
    animation: typing 0.5s steps(16) forwards, cursor 1s infinite;
  }
}
.home #root.v1 .top .computer #intro {
  width: fit-content;
}
.home #root.v1 .top .computer #intro .heading {
  width: 260px;
}
.home #root.v1 .top .computer #body {
  width: fit-content;
}
.home #root.v1 .top .computer #body .about {
  opacity: 0;
  animation: showText 0.1s forwards;
  animation-delay: 1s;
  font-size: 0.95rem;
  color: #d7b94c;
}
@media screen and (min-width: 600px) {
  .home #root.v1 .top .computer #body .about {
    font-size: 1.125rem;
    animation: showText 0.1s forwards;
    animation-delay: 1s;
  }
}
.home #root.v1 .top .computer #outro {
  width: fit-content;
}
.home #root.v1 .top .computer #outro .heading {
  width: 160px;
}
.home #root.v1 .top .computer #outro .heading:after {
  color: #1d1f20;
  animation: typing 0.5s steps(16) forwards, cursor 1s infinite;
  animation-delay: 2.5s;
}
@media screen and (min-width: 600px) {
  .home #root.v1 .top .computer #outro .heading:after {
    animation: typing 0.5s steps(16) forwards, cursor 1s infinite;
    animation-delay: 2.5s;
  }
}
.home #root.v1 .top .computer #outro .menu {
  opacity: 0;
  animation: showText 0.1s forwards;
  animation-delay: 3s;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media screen and (min-width: 600px) {
  .home #root.v1 .top .computer #outro .menu {
    animation-delay: 3.5s;
  }
}
.home #root.v1 .top .computer #outro .menu a {
  font-size: 0.95rem;
  color: #d7b94c;
  cursor: pointer;
}
@media screen and (min-width: 600px) {
  .home #root.v1 .top .computer #outro .menu a {
    font-size: 1.125rem;
  }
}
.home #root.v1 .bottom {
  width: 100%;
  height: 100%;
}
.home #root.v1 .bottom section {
  box-shadow: 0 0 5px 4px rgba(29, 31, 32, 0.45);
  margin: 4rem 0;
}
.home #root.v1 .bottom #cool-stuff {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: #d7b94c;
  padding: 2rem 0;
}
.home #root.v1 .bottom #cool-stuff .title:after {
  content: "";
  display: block;
  width: 150px;
  margin: 0 auto;
  border-bottom: 5px solid #04392f;
}
.home #root.v1 .bottom #cool-stuff .highlights {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
  height: 100%;
  width: 100%;
  padding-top: 1rem;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 1rem 1rem;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 400px;
  box-shadow: 0 0 5px 0 rgba(29, 31, 32, 0.45);
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight img {
  width: 75%;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight p {
  font-size: 1.25rem;
  text-align: center;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight a {
  display: block;
  font-family: Orbitron-Regular;
  color: #49111C;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 5px;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight a:hover {
  border-bottom: 5px solid #49111C;
  padding-bottom: 0;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip {
  position: absolute;
  top: 0;
  left: 0;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip:before {
  content: "";
  display: block;
  background-image: url("/icons/paperclip.svg");
  background-size: 100%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -10px;
  left: -10px;
}
.home #root.v1 .bottom #cool-stuff .highlights .highlight:hover {
  box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
}
.home #root.v1 .bottom #work {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #a6a695;
  padding: 1rem 2rem;
}
.home #root.v1 .bottom #work > .title {
  color: #49111C;
  font-weight: bold;
}
.home #root.v1 .bottom #work > .title:after {
  content: "";
  display: block;
  width: 50px;
  margin: 0 auto;
  border-bottom: 5px solid #d7b94c;
}
.home #root.v1 .bottom #work .jobs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 800px) {
  .home #root.v1 .bottom #work .jobs {
    flex-wrap: nowrap;
  }
}
.home #root.v1 .bottom #work .jobs .left, .home #root.v1 .bottom #work .jobs .right {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 800px) {
  .home #root.v1 .bottom #work .jobs .left, .home #root.v1 .bottom #work .jobs .right {
    width: 50%;
  }
}
.home #root.v1 .bottom #work .jobs .left .title, .home #root.v1 .bottom #work .jobs .right .title {
  text-align: center;
  color: #49111C;
}
.home #root.v1 .bottom #work .jobs .left .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home #root.v1 .bottom #work .jobs .left .job {
  padding: 1rem 2rem;
  margin-top: 1rem;
  padding: 5px;
  position: relative;
  box-shadow: 0 0 5px 0px rgba(29, 31, 32, 0.45);
}
.home #root.v1 .bottom #work .jobs .left .job .title {
  text-align: left;
  color: #49111C;
}
.home #root.v1 .bottom #work .jobs .left .job:hover {
  cursor: pointer;
}
.home #root.v1 .bottom #work .jobs .left .job.active {
  border-left: 1rem solid #d7b94c;
  box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
}
.home #root.v1 .bottom #work .jobs .right .highlights {
  display: block;
  height: 100%;
  width: 100%;
  margin-top: 1rem;
}
.home #root.v1 .bottom #work .jobs .right .job-highlight {
  padding: 1rem 2rem;
}
.home #root.v1 .bottom #work .jobs .right .job-highlight ul {
  padding: 0;
}
.home #root.v1 .bottom #work .jobs .right .job-highlight ul li {
  font-size: 1.125rem;
}
.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul {
  padding-left: 1rem;
}
.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul li {
  padding: 2px 0;
}
.home #root.v1 .bottom #work .jobs .right .job-highlight.show {
  display: block;
  border-left: 1rem solid #d7b94c;
  box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
}
@media screen and (min-width: 800px) {
  .home #root.v1 .bottom #work .jobs .right .job-highlight.show {
    border-right: 1rem solid #d7b94c;
    border-left: unset;
  }
}
.home #root.v1 .bottom #work .jobs .right .job-highlight.hide {
  display: none;
}
.home #root.v1 .bottom #work .tech {
  padding: 2rem 0;
}
.home #root.v1 .bottom #work .tech .title {
  color: #49111C;
  text-align: center;
}
.home #root.v1 .bottom #work .tech .title:after {
  content: "";
  display: block;
  width: 50px;
  margin: 0 auto;
  border-bottom: 5px solid #d7b94c;
}
.home #root.v1 .bottom #work .tech .education {
  text-align: center;
  font-size: 1.125rem;
}
.home #root.v1 .bottom #work .tech .list {
  display: flex;
  justify-content: center;
  column-gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
}
.home #root.v1 .bottom #work .tech .list li {
  font-size: 1.125rem;
}
.home #root.v1 .bottom #contact {
  display: block;
  background-color: #1F2421;
}
.home #root.v1 .bottom #contact .title {
  color: #FBFCFF;
  text-align: center;
}
.home #root.v1 .bottom #contact .title:after {
  content: "";
  display: block;
  width: 75px;
  margin: 0 auto;
  border-bottom: 5px solid #696969;
}
.home #root.v1 .bottom #contact .info {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.home #root.v1 .bottom #contact .info .icon.icon-email {
  position: relative;
}
.home #root.v1 .bottom #contact .info .icon.icon-email:before {
  content: "";
  display: block;
  background-image: url("/icons/email.svg");
  background-size: 100%;
  width: 30px;
  height: 30px;
}
.home #root.v1 #continue {
  display: block;
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  opacity: 0;
  color: #FBFCFF;
  animation: showText 0.1s forwards, continue 0.5s steps(50) forwards;
  animation-delay: 4s;
}
@media screen and (min-width: 600px) {
  .home #root.v1 #continue {
    animation-delay: 6s;
  }
}
.home #root.v1 #continue .icon.icon-arrow-down:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("/icons/arrow-down-top-line.svg");
  background-size: 100%;
  width: 50px;
  height: 50px;
}

@keyframes typing {
  0% {
    color: #d7b94c;
  }
  100% {
    width: 0;
    color: #1d1f20;
  }
}
@keyframes typing2 {
  0% {
    color: #d7b94c;
  }
  99.9% {
    color: #d7b94c;
  }
  100% {
    width: 0;
    color: #1d1f20;
  }
}
@keyframes cursor {
  50% {
    color: transparent;
  }
}
@keyframes showText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes continue {
  0% {
    bottom: 5rem;
  }
  100% {
    bottom: 4rem;
  }
}
@font-face {
  font-family: RobotoSlab-Regular;
  src: url("/fonts/RobotoSlab-Regular.ttf") format("opentype");
}
@font-face {
  font-family: RobotoSlab-Medium;
  src: url("/fonts/RobotoSlab-Regular.ttf") format("opentype");
}
@font-face {
  font-family: RobotoSlab-Bold;
  src: url("/fonts/RobotoSlab-Bold.ttf") format("opentype");
}
@font-face {
  font-family: RobotoSlab-Black;
  src: url("/fonts/RobotoSlab-Black.ttf") format("opentype");
}
@font-face {
  font-family: AtomicAge-Regular;
  src: url("/fonts/AtomicAge-Regular.ttf") format("opentype");
}
@font-face {
  font-family: Montserrat-Regular;
  src: url("/fonts/Montserrat-Regular.ttf") format("opentype");
}
@font-face {
  font-family: Montserrat-Light;
  src: url("/fonts/Montserrat-Light.ttf") format("opentype");
}
@font-face {
  font-family: Montserrat-Italic;
  src: url("/fonts/Montserrat-Italic.ttf") format("opentype");
}
@font-face {
  font-family: Montserrat-Bold;
  src: url("/fonts/Montserrat-Bold.ttf") format("opentype");
}
@font-face {
  font-family: Montserrat-SemiBold;
  src: url("/fonts/Montserrat-SemiBold.ttf") format("opentype");
}
@font-face {
  font-family: Orbitron-Regular;
  src: url("/fonts/Orbitron-Regular.ttf") format();
}
h1, h2, h3, h4, h5, h6 {
  font-family: AtomicAge-Regular;
  letter-spacing: 2px;
}

h1 {
  font-size: 2rem;
}
@media screen and (min-width: 600px) {
  h1 {
    font-size: 3rem;
  }
}

h2 {
  font-size: 1.75rem;
}
@media screen and (min-width: 600px) {
  h2 {
    font-size: 2.5rem;
  }
}

h3 {
  font-size: 1.5rem;
}
@media screen and (min-width: 600px) {
  h3 {
    font-size: 2rem;
  }
}

h4 {
  font-size: 1.25rem;
}
@media screen and (min-width: 600px) {
  h4 {
    font-size: 1.5rem;
  }
}

h5 {
  font-size: 1rem;
}
@media screen and (min-width: 600px) {
  h5 {
    font-size: 1.25rem;
  }
}

h6 {
  font-size: 1rem;
}
@media screen and (min-width: 600px) {
  h6 {
    font-size: 1em;
  }
}

p, a, li, span {
  font-family: RobotoSlab-Regular;
  letter-spacing: 1px;
}

strong {
  font-family: Montserrat-Bold;
}

em {
  font-family: Montserrat-Italic;
}

u {
  font-family: Montserrat-SemiBold;
}

cite, q, small {
  font-family: Orbitron-Regular;
}

s {
  font-family: Montserrat-SemiBold;
}

/*# sourceMappingURL=landing.css.map */