/*
Theme Name: Xortfolio
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box;
  font-size: 16px; }

@font-face {
  font-family: dreamOrphans;
  src: url("fonts/dreamorphans.ttf"); }

@font-face {
  font-family: raleway;
  src: url("fonts/Raleway-regular.ttf"); }

@keyframes fade-slide {
  0% {
    opacity: 0;
    transform: translateY(50px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

html {
  scroll-behavior: smooth; }

body {
  background-color: #F4EFE1; }

.wysiwyg h2 {
  font-family: "dreamOrphans", sans-serif;
  font-size: 1.5rem;
  margin-bottom: 15px;
  text-transform: uppercase; }

.wysiwyg p {
  font-family: "raleway", sans-serif;
  font-size: 1rem;
  margin-bottom: 10px;
  line-height: 1.7rem; }

.container {
  width: 100%;
  max-width: 1400px;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex; }
  .container.--fullRight {
    padding-left: calc(((100% - 1400px) / 2) + 20px);
    margin: 0;
    padding-right: 0;
    width: 100%;
    max-width: unset; }

.content {
  grid-column: 4 / span 9;
  position: relative; }
  .content section h2 {
    text-transform: capitalize;
    font-family: "dreamOrphans", sans-serif;
    font-size: 2rem;
    margin-bottom: 20px; }

.o-card {
  background-color: #88482F;
  width: 350px; }
  .o-card.--footer {
    background-color: #E1BC3E; }
  .o-card > div:first-of-type {
    position: relative; }
    .o-card > div:first-of-type img {
      position: relative;
      display: block;
      margin-bottom: -1px;
      width: 100%; }
    .o-card > div:first-of-type span {
      display: block;
      position: absolute;
      background-color: #E1BC3E;
      border-radius: 30px;
      padding: 10px;
      width: 150px;
      text-align: center;
      color: white;
      font-family: "dreamOrphans", sans-serif;
      font-size: 1.2rem;
      transform: translateX(-50%);
      top: 33%; }
      .o-card > div:first-of-type span:nth-of-type(2n) {
        right: 0;
        top: 66%;
        transform: translateX(50%); }
    .o-card > div:first-of-type::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 200px;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #F4EFE1; }
  .o-card > div:last-of-type {
    background-color: black;
    color: white;
    padding: 20px 40px; }
    .o-card > div:last-of-type h3 {
      font-family: "dreamOrphans", sans-serif;
      font-size: 2rem;
      margin-bottom: 20px; }
    .o-card > div:last-of-type ul li {
      font-family: "dreamOrphans", sans-serif;
      letter-spacing: 1.5px;
      font-size: .8rem;
      display: flex;
      align-items: center;
      margin-bottom: 10px; }
      .o-card > div:last-of-type ul li img {
        margin-right: 10px;
        width: 15px;
        height: 15px;
        object-fit: contain; }

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: #88482F;
  z-index: 99;
  display: flex; }
  header > div {
    justify-content: space-between;
    align-items: center; }
  header a {
    color: white;
    font-family: "dreamOrphans", sans-serif;
    font-size: 1.2rem;
    text-decoration: none; }
  header nav ul li {
    display: inline-block;
    margin-left: 50px; }
    header nav ul li:last-of-type {
      background-color: #E1BC3E;
      padding: 10px 20px;
      border-radius: 30px; }

footer {
  background-color: #88482F;
  padding: 60px 0; }
  footer > div {
    align-items: center; }
    footer > div .contact {
      position: relative;
      color: white; }
      footer > div .contact h2 {
        position: relative;
        font-family: "dreamOrphans", sans-serif;
        font-size: 8rem;
        color: transparent;
        text-transform: uppercase;
        padding: 0 20px 70px;
        -webkit-text-stroke: 2px white; }
        footer > div .contact h2::after {
          content: attr(data-title);
          position: absolute;
          left: 20px;
          bottom: 50px;
          transform: translate(-20px, 32px);
          font-family: "dreamOrphans", sans-serif;
          font-size: 6rem;
          color: white;
          -webkit-text-stroke: unset; }
      footer > div .contact span {
        font-family: "dreamOrphans", sans-serif;
        font-size: 2rem;
        font-weight: bold;
        text-transform: uppercase; }
      footer > div .contact p {
        width: 50%;
        padding: 30px 0;
        font-family: "raleway", sans-serif;
        line-height: 1.5rem; }
      footer > div .contact form {
        width: 50%; }
        footer > div .contact form div {
          display: flex;
          gap: 15px; }
        footer > div .contact form input, footer > div .contact form textarea {
          background-color: #E1BC3E;
          padding: 15px 30px;
          margin-bottom: 15px;
          width: 100%;
          border-radius: 30px;
          border: none;
          font-family: "raleway", sans-serif;
          color: white; }
          footer > div .contact form input::placeholder, footer > div .contact form textarea::placeholder {
            opacity: 1; }
          footer > div .contact form input[type="submit"], footer > div .contact form textarea[type="submit"] {
            text-transform: uppercase;
            font-family: "dreamOrphans", sans-serif;
            font-size: 1.5rem;
            width: auto;
            background-color: #E1BC3E;
            color: white;
            cursor: pointer; }

.t-hero {
  background: #88482F;
  background: linear-gradient(180deg, #88482F 0%, #88482F 75%, black 75%);
  height: calc(100vh - 60px);
  min-height: 800px;
  position: relative;
  padding: 100px 0; }
  @media (max-width: 479px) {
    .t-hero {
      height: 475px;
      min-height: unset; } }
  .t-hero h1 {
    font-family: "dreamOrphans", sans-serif;
    color: white;
    font-size: 10rem;
    text-align: center;
    z-index: 3;
    display: flex;
    justify-content: center;
    position: relative;
    text-transform: uppercase;
    animation: fade-slide 600ms ease-out 0ms; }
    @media (max-width: 479px) {
      .t-hero h1 {
        font-size: 4rem;
        margin-bottom: 10px; } }
  .t-hero > img {
    position: absolute;
    z-index: 2;
    right: 50%;
    transform: translate(-80px, -70px);
    height: 500px;
    animation: fade 600ms ease-out 100ms forwards;
    opacity: 0;
    width: auto; }

@keyframes fade {
  0% {
    opacity: 0;
    transform: translate(-80px, -20px); }
  100% {
    opacity: 1;
    transform: translate(-80px, -70px); } }
    @media (max-width: 479px) {
      .t-hero > img {
        height: 250px;
        right: unset;
        left: 20px;
        transform: translateY(-50px);
        animation: none;
        opacity: 1; } }
  .t-hero span {
    z-index: 1;
    text-align: center;
    position: relative;
    font-family: "dreamOrphans", sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px #E1BC3E;
    font-size: 10rem;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
    opacity: 0; }
    @media (max-width: 479px) {
      .t-hero span {
        font-size: 4rem;
        margin-bottom: 10px;
        position: initial; } }
    .t-hero span#portfolio-1 {
      animation: fade-slide 600ms ease-out 200ms forwards; }
    .t-hero span#portfolio-2 {
      animation: fade-slide 600ms ease-out 300ms forwards; }
    .t-hero span#portfolio-3 {
      animation: fade-slide 600ms ease-out 400ms forwards; }
    .t-hero span::after {
      content: attr(data-missing-letters);
      display: inline-block;
      color: transparent;
      -webkit-text-stroke: 0; }
      @media (max-width: 479px) {
        .t-hero span::after {
          -webkit-text-stroke: 2px #E1BC3E; } }
    .t-hero span ul {
      text-align: start;
      position: absolute;
      left: calc(50% + 12rem);
      top: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      row-gap: 30px; }
      @media (max-width: 479px) {
        .t-hero span ul {
          left: 20px;
          bottom: 0;
          top: 175px;
          flex-direction: row; } }
      .t-hero span ul li a {
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        text-decoration: none;
        color: white;
        font-family: "raleway", sans-serif;
        -webkit-text-stroke: 0;
        text-transform: none; }
        .t-hero span ul li a img {
          margin-right: 20px;
          width: 40px; }
        @media (max-width: 479px) {
          .t-hero span ul li a {
            font-size: 0; }
            .t-hero span ul li a img {
              width: auto;
              height: 30px; } }
  .t-hero > a {
    background-color: #E1BC3E;
    border-radius: 50%;
    font-family: "dreamOrphans", sans-serif;
    color: black;
    text-decoration: none;
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    height: 120px;
    aspect-ratio: 1/1;
    padding: 20px;
    animation: spin 10000ms ease-in-out 7000ms forwards infinite; }

@keyframes spin {
  0% {
    transform: translateX(-50%) rotate(0); }
  10% {
    transform: translateX(-50%) rotate(360deg); }
  100% {
    transform: translateX(-50%) rotate(360deg); } }
    @media (max-width: 479px) {
      .t-hero > a {
        height: 80px;
        font-size: 1rem; } }

.t-about {
  padding: 100px 0; }
  .t-about > div {
    justify-content: space-around;
    align-items: flex-start; }
    .t-about > div > div:first-of-type {
      max-width: 40%; }
      .t-about > div > div:first-of-type h2 {
        font-family: "dreamOrphans", sans-serif;
        font-size: 5rem;
        font-weight: bold;
        margin-bottom: 30px; }
      .t-about > div > div:first-of-type p {
        font-family: "raleway", sans-serif;
        margin-bottom: 20px;
        line-height: 1.5rem; }
        .t-about > div > div:first-of-type p b {
          font-weight: bold; }
      .t-about > div > div:first-of-type a {
        display: inline-flex;
        align-items: center;
        margin-top: 40px;
        background-color: #88482F;
        padding: 20px 30px;
        border-radius: 50px;
        color: white;
        font-family: "dreamOrphans", sans-serif;
        font-size: 1.3rem;
        text-decoration: underline;
        letter-spacing: 2px; }
        .t-about > div > div:first-of-type a img {
          margin-right: 20px;
          height: 30px; }

.t-resume {
  background: #88482F;
  background: linear-gradient(180deg, #88482F 0%, #88482F calc(100% - 100px), #F4EFE1 calc(100% - 100px));
  padding: 80px 0 0; }
  .t-resume > div {
    justify-content: space-between; }
    .t-resume > div > div {
      width: 45%; }
  .t-resume__education, .t-resume__experience {
    padding: 20px; }
    .t-resume__education h3, .t-resume__experience h3 {
      font-family: "dreamOrphans", sans-serif;
      font-size: 4rem;
      font-weight: bold;
      color: #E1BC3E;
      padding-left: 30px;
      margin-bottom: 50px; }
    .t-resume__education ul, .t-resume__experience ul {
      color: #E1BC3E; }
      .t-resume__education ul li, .t-resume__experience ul li {
        position: relative;
        border-left: 2px dashed white;
        padding: 0 28px 40px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start; }
        .t-resume__education ul li:last-of-type, .t-resume__experience ul li:last-of-type {
          border-left: unset; }
        .t-resume__education ul li::before, .t-resume__experience ul li::before {
          content: '';
          display: block;
          width: 20px;
          aspect-ratio: 1;
          border-radius: 50%;
          background-color: #E1BC3E;
          position: absolute;
          left: 0;
          top: 0;
          transform: translate(-50%, 0%); }
        .t-resume__education ul li span, .t-resume__experience ul li span {
          font-family: "dreamOrphans", sans-serif;
          font-size: 1.5rem;
          width: 150px; }
        .t-resume__education ul li div, .t-resume__experience ul li div {
          padding-top: 5px;
          width: calc(100% - 160px); }
          .t-resume__education ul li div h4, .t-resume__experience ul li div h4 {
            font-family: "dreamOrphans", sans-serif;
            font-weight: bold;
            font-size: 1.3rem;
            margin-bottom: 10px; }
          .t-resume__education ul li div p, .t-resume__experience ul li div p {
            font-family: "raleway", sans-serif;
            font-size: 1rem;
            line-height: 1.5rem; }
  .t-resume__experience {
    background-color: #E1BC3E; }
    .t-resume__experience h3 {
      color: black; }
    .t-resume__experience ul li {
      color: black; }
      .t-resume__experience ul li::before {
        background-color: white; }
      .t-resume__experience ul li div strong {
        font-family: "raleway", sans-serif;
        font-weight: bold;
        font-size: 1rem;
        margin-bottom: 5px;
        display: block; }
    .t-resume__experience > div {
      padding-left: 20px; }
      .t-resume__experience > div span {
        display: inline-block;
        padding: 13px 35px;
        background-color: black;
        border-radius: 30px;
        margin: 20px 20px 0 0;
        color: white;
        font-family: "raleway", sans-serif; }
  .t-resume__skills, .t-resume__languages {
    padding: 20px;
    margin-bottom: 40px; }
    .t-resume__skills h3, .t-resume__languages h3 {
      font-family: "dreamOrphans", sans-serif;
      font-size: 4rem;
      font-weight: bold;
      color: #E1BC3E;
      margin-bottom: 50px; }
    .t-resume__skills > div, .t-resume__languages > div {
      display: flex; }
      .t-resume__skills > div > div, .t-resume__languages > div > div {
        margin-right: 50px; }
        .t-resume__skills > div > div h4, .t-resume__languages > div > div h4 {
          font-family: "dreamOrphans", sans-serif;
          font-size: 1.5rem;
          font-weight: bold;
          color: white;
          margin-bottom: 15px; }
        .t-resume__skills > div > div ul, .t-resume__languages > div > div ul {
          display: flex; }
          .t-resume__skills > div > div ul li, .t-resume__languages > div > div ul li {
            margin-right: 10px; }
            .t-resume__skills > div > div ul li img, .t-resume__languages > div > div ul li img {
              height: 45px; }
  .t-resume__languages > div > div h4 {
    margin-bottom: 10px; }
  .t-resume__languages > div > div p {
    color: white;
    font-family: "raleway", sans-serif; }
  .t-resume__hobbies {
    padding: 20px;
    margin-bottom: 40px; }
    .t-resume__hobbies h3 {
      font-family: "dreamOrphans", sans-serif;
      font-size: 4rem;
      font-weight: bold;
      color: white;
      margin-bottom: 50px; }
    .t-resume__hobbies ul {
      display: flex;
      flex-wrap: wrap;
      width: 60%; }
      .t-resume__hobbies ul li {
        flex: 0 0 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        color: white;
        font-family: "raleway", sans-serif; }
        .t-resume__hobbies ul li img {
          margin-bottom: 10px;
          height: 30px; }

.t-projects {
  padding: 150px 0 100px; }
  .t-projects:not(#projects) {
    margin-top: 150px; }
  .t-projects > div {
    position: relative; }
  .t-projects h2 {
    position: absolute;
    right: 20px;
    bottom: 100%;
    padding: 0 0 50px;
    font-family: "dreamOrphans", sans-serif;
    font-size: 8rem;
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 2px black; }
    .t-projects h2::after {
      content: attr(data-title);
      position: absolute;
      left: 0;
      bottom: 50px;
      transform: translate(-20px, 32px);
      font-family: "dreamOrphans", sans-serif;
      font-size: 6rem;
      color: black;
      -webkit-text-stroke: unset; }
  .t-projects__filters {
    width: 100%;
    margin-bottom: 50px; }
    .t-projects__filters ul li {
      display: inline-block;
      margin-right: 20px; }
      .t-projects__filters ul li a {
        font-family: "raleway", sans-serif;
        border-radius: 30px;
        text-align: center;
        background-color: #E1BC3E;
        text-decoration: none;
        color: white;
        display: block;
        padding: 15px 20px;
        width: 150px; }
      .t-projects__filters ul li.current-cat a {
        background-color: transparent;
        color: black; }
  .t-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 120px;
    grid-row-gap: 60px; }
    .t-projects__grid > div {
      display: flex;
      flex-direction: column; }
      .t-projects__grid > div:nth-of-type(n+4) > div:first-of-type img {
        box-shadow: 16px -14px 0px 0px #E1BC3E; }
      .t-projects__grid > div > div:first-of-type img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 3/2;
        border: 6px solid black;
        box-shadow: -16px -14px 0px 0px #E1BC3E; }
      .t-projects__grid > div > div:last-of-type {
        flex-grow: 1; }
        .t-projects__grid > div > div:last-of-type div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 0; }
          .t-projects__grid > div > div:last-of-type div h3 {
            font-family: "dreamOrphans", sans-serif;
            font-size: 1.5rem; }
          .t-projects__grid > div > div:last-of-type div span {
            font-family: "raleway", sans-serif; }
        .t-projects__grid > div > div:last-of-type p {
          font-family: "raleway", sans-serif;
          line-height: 1.5rem; }
        .t-projects__grid > div > div:last-of-type a {
          font-family: "dreamOrphans", sans-serif;
          text-align: center;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: white;
          background-color: #88482F;
          display: block;
          padding: 15px 0;
          width: 175px;
          border-radius: 30px;
          margin: 20px auto 0;
          position: relative; }
          .t-projects__grid > div > div:last-of-type a::before {
            content: 'Read more';
            display: block;
            position: absolute;
            width: 100%;
            padding: 15px 0;
            top: 0;
            left: 0;
            border-radius: 30px;
            transform: scale(0);
            transform-origin: center;
            background-color: #E1BC3E;
            transition: 100ms; }
          .t-projects__grid > div > div:last-of-type a:hover::before {
            transform: scale(1); }

.blog .t-projects__filters ul li:first-of-type a {
  background-color: transparent;
  color: black; }

.projectPage {
  margin-top: 150px; }
  .projectPage__header {
    padding-bottom: 50px; }
    .projectPage__header > div {
      justify-content: space-between; }
      .projectPage__header > div h1 {
        position: relative;
        padding: 0 0 50px;
        font-family: "dreamOrphans", sans-serif;
        font-size: 8rem;
        color: transparent;
        text-transform: uppercase;
        -webkit-text-stroke: 2px black; }
        .projectPage__header > div h1::after {
          content: attr(data-title);
          position: absolute;
          left: 0;
          bottom: 50px;
          transform: translate(-20px, 32px);
          font-family: "dreamOrphans", sans-serif;
          font-size: 6rem;
          color: black;
          -webkit-text-stroke: unset; }
      .projectPage__header > div > div span {
        font-family: "dreamOrphans", sans-serif;
        letter-spacing: 2px;
        text-transform: uppercase; }
        .projectPage__header > div > div span a {
          text-decoration: none;
          color: black; }
      .projectPage__header > div > div > a {
        font-family: "raleway", sans-serif;
        border-radius: 30px;
        text-align: center;
        background-color: #E1BC3E;
        text-decoration: none;
        color: white;
        display: block;
        padding: 13px 20px;
        width: 150px;
        margin-top: 25px; }
  .projectPage__intro {
    padding-bottom: 50px; }
    .projectPage__intro > div.container {
      justify-content: space-between;
      gap: 50px; }
      .projectPage__intro > div.container > div {
        position: relative; }
        .projectPage__intro > div.container > div span {
          font-family: "dreamOrphans", sans-serif;
          font-size: 1.5rem;
          font-weight: bold;
          font-style: italic;
          border-radius: 50px;
          text-align: center;
          background-color: #88482F;
          text-decoration: none;
          color: white;
          display: inline-block;
          padding: 25px 45px;
          max-width: 100%;
          margin-bottom: 40px; }
        .projectPage__intro > div.container > div .wysiwyg {
          max-width: 700px; }
        .projectPage__intro > div.container > div > a {
          background-color: #E1BC3E;
          border-radius: 50%;
          font-family: "dreamOrphans", sans-serif;
          color: black;
          text-decoration: none;
          font-size: 1.5rem;
          text-align: center;
          display: flex;
          align-items: center;
          position: absolute;
          bottom: -110px;
          left: 50%;
          transform: translateX(-50%);
          height: 120px;
          aspect-ratio: 1/1;
          padding: 20px;
          animation: spin 10000ms ease-in-out 7000ms forwards infinite; }

@keyframes spin {
  0% {
    transform: translateX(-50%) rotate(0); }
  10% {
    transform: translateX(-50%) rotate(360deg); }
  100% {
    transform: translateX(-50%) rotate(360deg); } }
      .projectPage__intro > div.container img {
        width: calc(100% - 750px);
        min-width: 500px;
        object-fit: cover; }
  .projectPage__columns {
    background-color: #88482F;
    padding: 150px 0 100px; }
    .projectPage__columns > div.container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 50px;
      grid-row-gap: 0px; }
      .projectPage__columns > div.container > div img {
        width: 100%;
        height: 275px;
        object-fit: cover;
        margin-bottom: 40px; }
      .projectPage__columns > div.container > div .wysiwyg {
        color: white;
        text-align: justify; }
  .projectPage__gallery {
    padding: 100px 0; }
    .projectPage__gallery div.container {
      flex-direction: column; }
      .projectPage__gallery div.container h2 {
        position: relative;
        padding: 0 0 50px;
        margin-left: 20px;
        font-family: "dreamOrphans", sans-serif;
        font-size: 8rem;
        color: transparent;
        text-transform: uppercase;
        -webkit-text-stroke: 2px black; }
        .projectPage__gallery div.container h2::after {
          content: attr(data-title);
          position: absolute;
          left: 0;
          bottom: 50px;
          transform: translate(-20px, 32px);
          font-family: "dreamOrphans", sans-serif;
          font-size: 6rem;
          color: black;
          -webkit-text-stroke: unset; }
      .projectPage__gallery div.container ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 20px 20px; }
        .projectPage__gallery div.container ul li:first-of-type {
          grid-column: 1 / -1;
          max-height: 500px; }
        .projectPage__gallery div.container ul li a img {
          width: 100%;
          height: 100%;
          object-fit: cover; }