* {
  box-sizing: border-box;
  font-size: .5vw;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility; }

body {
  font-family: 'Fredoka One', cursive;
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: white;
  display: flex;
  flex-direction: column;
  position: relative; }
  body.disable-text-selection {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    user-select: none; }
  body::-webkit-scrollbar {
    display: none; }

.theme-1 {
  --color-1: #0c3139;
  --color-2: #e4fde3;
  --color-3: #35283c;
  --color-4: #b6ff9b;
  --color-42: #1ed760;
  --color-43: #ffffff;
  --color-5: #334f42;
  --color-6: #3e1921;
  --color-62: #ffa9ab;
  --color-7: #72e5ac;
  --color-6: #119941;
  --color-62:#4efa57;
  --color-8: #fec2eb;
  --color-9: #c4fc69; }

.theme-2 {
  --color-1: #3e1921;
  --color-2: #963636;
  --color-3: #F37970;
  --color-4: #eb3c3f;
  --color-43: #EA101C;
  --color-42: #ffb44c;
  --color-5: #fc6161;
  --color-62: #3e1921;
  --color-6: #ffa9ab;
  --color-7: #ffd768;
  --color-8: #AE0900;
  --color-9: #f2ff3c; }

.theme-3 {
  --color-1: #13223a;
  --color-2: #bcf9fd;
  --color-3: #2198b6;
  --color-3: #0170ff;
  --color-4: #589afc;
  --color-42: #506aff;
  --color-43: #172efd;
  --color-43: #ffffff;
  --color-5:  #193966;
  --color-6: #2c4ba0;
  --color-62: #43aae6;
  --color-7: #ffa8ab;
  --color-8: #ffffff;
  --color-9: #11cfff; }

.theme-1 {
  --color-1: #ffffff;
  --color-2: #f0f0f0;
  --color-3: #6868ac;
  --color-4: #161616;
  --color-43: #ffffff;
  --color-5: #ffffff;
  --color-6: #161616;
  --color-62: #161616;
  --color-7: #161616;
  --color-8: #ffffff;
  --color-9: #5be2d1;
  --color-tema:#6e6ec9;
  --color-black:#161616;
  --color-white:#ffffff;
  --color-grey:#f5f5f5;
  --color-green:#0f9d58;
  --color-blue:#4285f4;
  --color-yellow:#f4b400;
  --color-red:#db4437; }

/*
new color? #4673b6

Google color Palette
#0f9d58
#db4437
#f4b400
#4285f4
color 1 head background
color 2 middle abckground
color 3 footer background
color 4 title text

color 43 button text
color 5 section background
color 6 section title
color 62 section span back
color 7 section text
color 8 footer text

color 9 scrollbar

*/
.top-container, .middle-container, .bottom-container {
  padding: 0 5rem 5rem 5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; }

.top-container {
  background-color: var(--color-1);
  color: var(--color-4);
  display: flex;
  flex-direction: column; }

.middle-container {
  background-color: var(--color-2);
  color: var(--color-7);
  display: flex;
  padding: 0 5rem; }

.bottom-container {
  background-color: var(--color-3);
  color: var(--color-8); }
  .bottom-container a {
    color: inherit;
    text-decoration: none; }

#icon {
  width: 700px;
  height: 1100px; }

.normal-size {
  font-size: 2.5rem; }

.big-size {
  font-size: 3.5rem; }

.big-divider {
  content: "";
  height: 10rem; }

.small-divider {
  content: "";
  height: 5rem; }

.line-divider {
  background-color: var(--color-2);
  margin: 2.5vh 0;
  width: 100%;
  height: .5vh; }

.line-height {
  line-height: 4.8rem; }

.align-center {
  text-align: center; }

.uppercase {
  text-transform: uppercase;
  display: block; }

.font-inherit {
  font-size: inherit; }

.row-reverse {
  order: 2; }

.opacity {
  opacity: 0;
  animation: moveDownRev 1s; }

.no-opacity {
  opacity: 1;
  animation: moveUp 1s; }

.highlight {
  background-color: var(--color-4);
  color: var(--color-1);
  padding-right: 0 2vh;
  display: inline; }
  .highlight__blue {
    background-color: var(--color-blue); }
  .highlight__red {
    background-color: var(--color-red); }
  .highlight__green {
    background-color: var(--color-green); }
  .highlight__yellow {
    background-color: var(--color-yellow); }

.mr-sx-5 {
  margin-left: 5px; }

#fix-pos-icon-toggle {
  position: relative;
  top: -7.1rem;
  left: -15rem;
  color: var(--color-43);
  width: 6.3rem;
  height: 6.3rem; }

@keyframes bouncing {
  0% {
    transform: scale(1, 1); }
  30% {
    transform: scale(1.2, 0.8); }
  75% {
    transform: scale(0.8, 1.3); }
  100% {
    transform: scale(1, 1); } }

@keyframes zooming {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1, 1); } }

@keyframes rotate {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.3) rotate(20deg); }
  75% {
    transform: scale(1.3) rotate(-5deg); }
  100% {
    transform: scale(1) rotate(0deg); } }

@keyframes zooming-btn-up {
  0% {
    transform: scale(0.3); }
  100% {
    transform: scale(1); } }

@keyframes zooming-btn-down {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0.4); } }

@keyframes moveDown {
  0% {
    opacity: 0;
    transform: translateY(-25rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes moveDownRev {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(25rem); } }

@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(25rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes moveSx {
  0% {
    opacity: 0;
    transform: translateX(25rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveDx {
  0% {
    opacity: 0;
    transform: translateX(-25rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.moveUp {
  animation: moveUp .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; }

.moveDown {
  animation: moveDown .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; }

.moveDx {
  animation: moveDx .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; }

.moveSx {
  animation: moveSx .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; }

.xs-delay {
  animation-delay: .3s; }

.s-delay {
  animation-delay: .5s; }

.m-delay {
  animation-delay: 1s; }

.l-delay {
  animation-delay: 1.5s; }

.xl-delay {
  animation-delay: 2.3s; }

.bounce:hover {
  animation: bouncing 0.4s; }

.rotate:hover {
  animation: rotate 0.4s; }

.zooming:hover {
  animation: zooming 0.2s;
  color: var(--color-white);
  background-color: black; }

.zooming-btn-up {
  animation: zooming-btn-up 0.35s; }

.zooming-btn-down {
  animation: zooming-btn-down 0.2s; }

.main-title__size {
  font-size: 8vw; }

.main-title__size__big {
  font-size: 13vw; }

.contact-me__size {
  font-size: 7rem; }

.zoom-letter {
  display: flex;
  flex-direction: row;
  display: inline-block; }
  .zoom-letter__letter {
    display: inline-block; }

.section-card {
  background: var(--color-5);
  color: var(--color-7);
  padding: 10rem;
  margin: 2.5rem 0;
  margin-top: 5rem;
  margin-bottom: 0;
  box-shadow: 0px 10px 20px 0px rgba(51, 16, 16, 0.2); }
  .section-card__title {
    padding: 0;
    align-self: center; }
  .section-card__span {
    padding: .7rem 1.5rem;
    line-height: 8vh;
    background-color: var(--color-grey);
    color: var(--color-black); }
  .section-card__current {
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 2.3vw; }

#section-card-center {
  display: block; }

.cont {
  display: flex;
  flex-direction: column; }

.mini-cont__title {
  display: block; }

.mini-cont__subtitle {
  margin-top: 1rem;
  display: inline-block; }

.foo-card {
  padding: .5rem 0; }
  .foo-card .cool-link {
    display: inline-block;
    text-decoration: none; }
  .foo-card .cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: .5rem;
    background: var(--color-8);
    transition: width .3s; }
  .foo-card .cool-link:hover::after {
    width: 100%; }
  .foo-card .cool-link-2 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, var(--color-8) 50%);
    background-size: 201%;
    background-position: 0 0;
    display: inline;
    transition: .2s ease-in-out; }
  .foo-card .cool-link-2:hover {
    background-position: -100% 0;
    color: var(--color-3); }
  .foo-card .copy2021 {
    font-size: 1.8vh;
    color: var(--color-2); }

.photo {
  align-self: center; }
  .photo__shape {
    width: 27rem;
    height: 27rem;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: var(--color-4) 0.75rem solid; }
  .photo__img {
    height: 100%;
    transform: translateX(1.3rem) translateY(0.4rem) scale(1.8);
    backface-visibility: hidden;
    transition: all .4s; }
  .photo__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #ffffff;
    font-size: 3.5rem;
    text-align: center;
    opacity: 0;
    transition: all .6s;
    backface-visibility: hidden; }
  .photo:hover .photo__caption {
    opacity: 1;
    transform: translate(-50%, -50%); }
  .photo:hover .photo__img {
    transform: translateX(1.3rem) translateY(0.4rem) scale(1.4);
    filter: blur(2px) brightness(80%); }
  .photo:hover .photo__shape {
    transition: all .4s;
    border: var(--color-4) 1.3rem solid; }

.btn {
  font-size: .5em;
  align-self: flex-end;
  border-radius: 2.3rem;
  cursor: pointer;
  transition: all .2s;
  padding: 0.3rem 2rem;
  border-radius: 100px;
  background-color: var(--color-5);
  position: absolute; }
  .btn__text {
    align-self: center; }
  .btn__img {
    align-self: center;
    width: 3rem;
    height: 3rem;
    margin: 1rem; }
  .btn__link {
    text-decoration: none;
    color: #ffffff;
    display: flex; }
  .btn:hover {
    transition: all .2s;
    transform: translateY(-0.4rem); }

.btn-toggle {
  align-self: center;
  justify-self: center;
  cursor: pointer; }

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit; }
  button.button-container {
    width: 38rem;
    height: auto; }
    button.button-container .btn_toggle_icon {
      position: relative;
      top: -7.1rem;
      left: -15rem;
      color: var(--color-white);
      width: 6.3rem;
      height: 6.3rem; }
    button.button-container .circle {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: relative;
      display: block;
      margin: 0;
      width: 8rem;
      height: 8rem;
      background: var(--color-3);
      border-radius: 10rem; }
      button.button-container .circle .icon {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 7rem;
        margin: auto; }
    button.button-container .button-container {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      top: .8rem;
      left: 3rem;
      right: 0;
      bottom: 0;
      padding: 0.75rem 0;
      margin: 0 0 0 1.85rem;
      color: var(--color-);
      line-height: 1.6;
      text-align: center;
      font-size: 3rem; }
  button:hover .circle {
    width: 100%; }
  button:hover .button-container {
    color: var(--color-white); }

.btn_download {
  display: flex;
  justify-content: center; }
  .btn_download__icon {
    width: 6.5rem;
    height: 6.5rem; }
  .btn_download__span {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    background-color: var(--color-8);
    color: var(--color-3);
    border-radius: 100px;
    padding: 1rem; }
    .btn_download__span p {
      margin: 0 2rem; }
    .btn_download__span:hover {
      transform: scale(1.05) translateY(-0.5rem); }

.btn_back {
  position: fixed;
  z-index: 10;
  bottom: 3rem;
  right: 3rem;
  display: flex;
  justify-content: center;
  transition: all .5s;
  display: none; }
  .btn_back__icon {
    width: 6.4rem;
    height: 6.5rem; }
  .btn_back__span {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-3);
    color: var(--color-white);
    border-radius: 100px;
    padding: .7rem;
    box-shadow: 0 1rem 1.6rem .8rem #38383850; }
  .btn_back:hover {
    transform: translateY(-0.65rem); }
    .btn_back:hover::after {
      content: "back to top";
      color: var(--color-4);
      font-size: 2.8rem;
      height: 2rem;
      width: 18rem;
      position: absolute;
      top: -5rem;
      left: -5rem; }

#scrollbar-wrapper {
  position: fixed;
  top: 0;
  z-index: 50;
  right: 0;
  width: .7rem;
  left: auto;
  bottom: 0;
  background-color: transparent;
  opacity: 1; }

.scrollbar {
  position: absolute;
  top: 0;
  background-color: var(--color-9);
  right: 0;
  width: .8rem;
  height: 100vh;
  transform: translateY(100.5vh); }

::-webkit-scrollbar {
  width: 0px;
  background: transparent; }

@media only screen and (min-width: 1250px) {
  * {
    font-size: .4vw; }
  .normal-size {
    font-size: 1.4vw; }
  .big-size {
    font-size: 3vw; }
  .copy2021 {
    font-size: 1.5vh; }
  .section-card {
    display: flex;
    flex-direction: row;
    width: 100%; }
    .section-card__title {
      width: 50%;
      padding: 0 .5vw; }
    .section-card__center {
      width: 100%; }
  .main-title__size__big {
    font-size: 12vw;
    margin: 0 -0.8rem; }
  .main-title__size {
    font-size: 7vw;
    margin: 0 -0.5rem; }
  .photo {
    position: absolute;
    top: 30rem;
    right: 50rem; } }

@media only screen and (min-width: 1025px) and (max-width: 1250px) {
  * {
    font-size: .7vw; }
  .normal-size {
    font-size: 2vw; }
  .contact-me {
    font-size: 4.5vw; }
  .section-card__title {
    font-size: 6.5vw;
    padding: 0 1vw; }
  .copy2021 {
    font-size: 1.3vh; }
  .main-title__size__big {
    font-size: 17vw; }
  .main-title__size {
    font-size: 12vw;
    margin: 0 -0.2rem; } }

@media only screen and (min-width: 750px) and (max-width: 1024px) {
  * {
    font-size: .9vw; }
    * .normal-size {
      font-size: 3vw; }
    * .copy2021 {
      font-size: 1.3vh; }
    * .section-card__title {
      font-size: 7vw;
      padding: 0 1vw; }
  .main-title__size__big {
    font-size: 14vw;
    margin: 0; }
  .main-title__size {
    font-size: 9vw;
    margin: 0 -0.35rem; }
  button .circle {
    width: 100% !important;
    border-radius: 10rem !important; }
  button .button-container {
    transform: translateX(-1rem);
    color: var(--color-43) !important;
    left: 4rem !important; } }

@media only screen and (min-width: 450px) and (max-width: 750px) {
  * {
    font-size: 1.3vw; }
  .normal-size {
    font-size: 3vw; }
  .line-height {
    line-height: 6rem; }
  .section-card {
    padding: 5rem; }
    .section-card__title {
      text-align: left;
      font-size: 8vw;
      padding: 0 1vw;
      margin-top: 5rem; }
  .main-title__size {
    font-size: 9vw;
    margin: 0; }
    .main-title__size__big {
      font-size: 15vw;
      margin: 0 0; }
  .exp_fix {
    margin: 0 -1px; }
  button .circle {
    width: 100% !important;
    border-radius: 10rem !important; }
  button .button-container {
    transform: translateX(-1rem);
    color: var(--color-43) !important;
    left: 3rem !important; } }

@media only screen and (max-width: 450px) {
  * {
    font-size: 2vw; }
  .middle-container {
    padding: 0; }
  .top-container {
    padding: 8vw; }
  .normal-size {
    font-size: 5vw; }
  .line-height {
    line-height: 4.5rem; }
  .contact-me {
    font-size: 8.5vw; }
  .scrollbar {
    opacity: 0; }
  .main-title__size {
    font-size: 12vw;
    font-weight: 400;
    margin: 0 -0.2rem; }
    .main-title__size__big {
      font-size: 20vw;
      font-weight: 400;
      margin: 0 0.1rem; }
  .section-card {
    padding: 8vw; }
    .section-card__title {
      font-size: 9vw;
      padding: 0 1vw;
      margin-top: 5rem; }
  .exp_fix {
    margin: 0 -4.5px; }
  button .circle {
    opacity: 0; }
  button .btn_toggle_icon {
    z-index: 5;
    top: -3.5rem !important;
    left: -11rem !important; }
  button .button-container {
    background-color: var(--color-3);
    border-radius: 100px;
    color: var(--color-43) !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    left: 0rem !important;
    width: 30rem !important;
    height: 8rem !important;
    margin: auto !important; }
    button .button-container__text {
      font-size: 2.5rem !important;
      padding: 1px 3rem !important;
      color: var(--color-43) !important; }
  .btn_back:hover::after {
    content: ""; } }