/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}
  
* {
    scroll-behavior: smooth;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body {
    width: 100vw;
    min-height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    min-height: calc(var(--vh, 1vh) * 100);  
    margin: 0;
    background-color: rgb(28, 28, 28);
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    width: 100%;
    max-height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    max-height: calc(var(--vh, 1vh) * 100);  
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);  
    scroll-snap-align: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

section:nth-child(odd) {
    background-color: rgb(28, 28, 28);}
  
section:nth-child(even) {
    background-color: rgb(38, 38, 38);
}

h1 {
    background:
     linear-gradient(
       to bottom, white 0%,
       white 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 7px;
    padding-bottom: 4px;
    transition: background-size .2s;
    width: fit-content;

    margin: 0 0 20px 0;
    font-size: clamp(2rem, -0.75rem + 8.333vw, 6rem);
    color: rgb(235, 56, 140); 

    /*transition: color .8s,-webkit-text-stroke-color .8s,-webkit-text-stroke-width .8s;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: transparent;    
    -webkit-text-stroke: 1.6px rgb(235, 56, 140);*/

}

h1:hover {
    transition: background-size .2s;
    background-size: 4px 7.2vw;
    /*color: rgba(0, 0, 0, 0); 
    -webkit-text-stroke: 0.8px rgb(235, 56, 140);
    transition: color .8s,-webkit-text-stroke-color .8s,-webkit-text-stroke-width .8s;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke: 1.6px rgb(235, 56, 140);
    cursor: default;*/
}

#main-h1 {
    transform: translateY(1rem);
    opacity: 0;

    animation: fadeinUp 0.8s forwards 0.2s; 
    -webkit-animation: fadeinUp 0.8s forwards 0.2s; 
    -moz-animation: fadeinUp 0.8s forwards 0.2s;
     -ms-animation: fadeinUp 0.8s forwards 0.2s;
      -o-animation: fadeinUp 0.8s forwards 0.2s;

}

h2 {
    background:
     linear-gradient(
       to bottom, rgb(235, 56, 140) 0%,
       rgb(235, 56, 140) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 7px;
    padding-bottom: 4px;
    transition: background-size .2s;
    width: fit-content;

    margin: 25px 0 0 0;
    font-size: clamp(1.1rem, calc(1.1rem + ((1vw - 0.33rem) * 1.4583)), 1.8rem);
    color: white; 

}

h2:hover {
    transition: background-size .2s;
    background-size: 4px 7.2vw;

}

p {
    transition: margin-left .2s, background-color .2s;
    color: #ffffff;
    max-width: 500px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.4em;
    margin-top: 30px;
    margin-right: 50px;
    font-size: clamp(0.9rem, calc(0.9rem + ((1vw - 0.228rem) * 5.7692)), 1.2rem);
        
    animation: fadein 3s;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
     -ms-animation: fadein 3s; /* Internet Explorer */
      -o-animation: fadein 3s; /* Opera < 12.1 */

}

#projects p {
    max-width: 100%;
    margin-top: 15px;
}

p:hover {
    margin-left: 1%;
    background-color: rgb(235, 56, 140);
}

.buttons a {
    transition: color .2s, background-color .2s, border-radius .4s;
    text-decoration: none;
    background-color: rgb(235, 56, 140);
    border: 2px solid rgb(235, 56, 140);
    color: white;
    padding: 12px 18px;
    margin-right: 18px;
    white-space: nowrap;
    font-size: clamp(0.9rem, calc(0.9rem + ((1vw - 0.228rem) * 1.9231)), 1rem);


}

.buttons a:hover {
    background-color: transparent;
    border: 2px solid rgb(235, 56, 140);
    color: white;
    padding: 12px 18px;
    margin-right: 16px;
    border-radius: 5px;
    margin-right: 18px;
}

.buttons a:active {
    background-color: transparent;
    border: 2px solid rgb(255, 114, 180);
    color: white;
    padding: 12px 18px;
    margin-right: 16px;
    border-radius: 5px;
    margin-right: 18px;
}

.buttons {
    margin-top: 40px;

    transform: translateY(1rem);
    opacity: 0;

    animation: fadeinUp 0.8s forwards 5; 
    -webkit-animation: fadeinUp 0.8s forwards 5s; 
    -moz-animation: fadeinUp 0.8s forwards 5s;
     -ms-animation: fadeinUp 0.8s forwards 5s;
      -o-animation: fadeinUp 0.8s forwards 5s;

    display: flex;
    flex-direction: row;

    /*transform: translateY(3rem);
    opacity: 0;
    animation: fadeinUp 0.2s ease 1s forwards;*/

}

#projects .buttons {
    margin: 5px 0 25px 0;
}

.content {
    min-width: 40%;
    max-width: 85%;
}

#logo {
    position: fixed;
    top: 20px;
    left: 22px;
    z-index: 100;
    text-decoration: none;

    transition: all .5s ease
}

#logo h1 {
    font-size: 38px;
}

.hideLogo {
    opacity: 0;
    transform: translateY(20px);
}

.showLogo {
    opacity: 1;
    transform: translateY(0) ;
}

#scroll {
    position: fixed;
    right: 18px;
    bottom: 18px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    background: rgb(235, 56, 140);
    color: #ffffff;
    z-index: 100;

    transition: all .5s ease
}

.hideScroll {
    opacity: 0;
    transform: translateY(20px) rotate(45deg);
    width: 1px;
    height: 1px;
}

.showScroll {
    opacity: 1;
    transform: translateY(0) rotate(0);
    width: 50px;
    height: 50px;
}

#scroll:hover {
    background: rgb(218, 45, 126);
}

#scroll:active {
    background: rgb(206, 30, 112);
}

[data-scroll] {
    transition: opacity 1.5s, transform 1.5s;
}

[data-scroll="in"] {
    opacity: 1;
    transform: translateY(0);
}

[data-scroll="out"] {
    opacity: 0;
    transform: translateY(80px);
}

/* swiperjs */
.swiper-pagination-bullet {
    opacity: 0.8;
    background: #ffffff !important;
}
.swiper-pagination-bullet-active {
  background: rgb(235, 56, 140) !important;
}
.my-swiper-container {
  margin-left: 15%;
  margin-right: 15%;
}
.swiper-container {
  overflow: hidden;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 0px !important;
  left: auto !important;
  color: #fff !important;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left: 0px !important;
  right: auto !important;
  color: #fff !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px !important;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .buttons {
        flex-direction: column;
    }
    .buttons a {
        margin-bottom: 10px;
        margin-right: 0;
        text-align: center;
    }
    h1 {
        margin: 0 auto 30px auto;
    }    
    h2 {
        margin: 0 auto 20px auto;
    }
    p {
        text-align: center;
        margin: 15px auto 20px auto;
    }
    .my-swiper-container {
        margin-left: 0;
        margin-right: 0;
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        visibility: hidden !important;
      }
      .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        visibility: hidden !important;
      }
  }

::selection {
    background: rgb(235, 56, 140); /* WebKit/Blink Browsers */
}
::-moz-selection {
    background: rgb(235, 56, 140); /* Gecko Browsers */
}

@keyframes fadeinUp {
    from   {
        opacity: 0;
        transform: translateY(1rem);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Cursor Styling */

.cursor::after {
    content:'';
    display:inline-block;
    margin-left:3px;
    background-color:white;
    animation-name:blink;
    animation-duration:0.9s;
    animation-iteration-count: infinite;
  }
  p.cursor::after {
    height:13px;
    width:6px;
  }
  
  @keyframes blink {
    0% {
      opacity:1;
    }
    49% {
      opacity:1;
    }
    50% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }