@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Protest+Strike&display=swap");

:root {
  --min: 6px;
  --primary: #ff0763;
  --main-color: black;
  --secondary: #143447;
  --light-bg: #eef1f3;
  --main-bg: #eef1f3;
  --roundshadow: 2px 4px 15px 0px rgba(0, 0, 0, 0.351);
  --foot-bg: #d4d6d7;
  --shadow-b: #161616ce;
  --darkblue: rgb(23, 28, 48);
  --greyblue: rgb(44, 45, 50);
}

/* THEME BY SYSTEM DEFAULT */
@media (prefers-color-scheme: dark) or (prefers-color-scheme: light) {
  /* Dark theme styles go here */
  :root {
    color-scheme: dark;
    --main-color: rgb(154, 154, 154);
    --main-bg: rgb(44, 44, 44) !important;
    /* --main-color: white !important; */
    --foot-bg: linear-gradient(rgb(24, 42, 53), var(--secondary));
    /* --foot-bg: transparent; */
    --foot-color: rgb(222, 222, 222) !important;
  }

  body {
    background: linear-gradient(var(--main-bg), rgb(28, 28, 28)) !important;
    width: 100vw;
    overflow-x: hidden;
  }

  #authentication-buttons button {
    background: black;
  }

  h3 {
    color: rgba(255, 255, 255, 0.436) !important;
  }
}

/* @media (prefers-color-scheme: light) {
  :root {
    --main-color: black !important;
    --main-bg: #eef1f3 !important;
    --foot-color: #143447 !important;
  }
} */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: solid 1px rgba(0, 0, 0, 0.2); */
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

button {
  border: none;
}

input:focus {
  outline: none;
}

.logo {
  display: grid;
  place-items: center;
}

.logo > img {
  /* width: 8rem; */
  /* padding: 10px; */
  padding: 5px;
  height: 3.5rem;
}

.up-section {
  display: flex;
  background-color: var(--secondary);
  padding: 0px 20px;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.608);
  align-items: center;
  position: relative;
  overflow-x: visible;
  width: calc(100vw);
}

.up-section .page-nav * {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.up-section .page-nav {
  display: grid;
  align-content: center;
  align-items: center;
  width: 60vw;
  min-width: 400px;
  max-width: 45rem;
  grid-template-columns: auto 12rem;
}

.up-section ul li a {
  color: white;
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color 0.5s 0s ease-out;
}

.up-section ul li a:hover {
  color: #eef1f3de;
  text-decoration: underline;
  text-decoration-color: white;
  text-underline-offset: 4px;
  transition: all 100ms 0s ease-out;
}

#navigation-list {
  display: flex;
  font-size: 15px;
  list-style-type: none;
  justify-content: space-between;
  max-width: 25rem;
  width: 30vw;
  min-width: 215px;
}

#authentication-buttons {
  display: flex;
  justify-self: flex-end;
  gap: 10px;
}

#authentication-buttons button {
  font-size: 15px;
  padding: 5px 12px;
  border-radius: var(--min);
  transition: background 0.5s linear, box-shadow 0.2s linear;
}

#authentication-buttons button:focus {
  box-shadow: none !important;
  transition: background 1s linear, box-shadow 0.3s ease !important;
}

#authentication-buttons button:active {
  filter: contrast(90%);
}

#authentication-buttons button:hover {
  transition: all 0.2s linear;
  background: rgb(31, 31, 31);
  color: white;
  box-shadow: inset 0px -3px 0px 0px var(--light-bg);
}

#authentication-buttons #getstarted-btn {
  background: var(--primary);
  /* background: linear-gradient(
    234deg,
    rgb(1, 40, 64) 0%,
    rgb(188, 2, 70) 67%,
    rgb(139, 9, 53) 100%
    ); */
}

#authentication-buttons #getstarted-btn a {
  text-decoration: none;
  color: var(--light-bg);
}

#authentication-buttons #getstarted-btn:hover a {
  color: var(--primary);
}

#authentication-buttons #getstarted-btn:hover {
  background: var(--light-bg);
  box-shadow: inset 0px -3px 0px 0px var(--primary);
}

/* Present page in the navigation */
#active-nav {
  /* background: red; */
  text-decoration: underline;
  text-decoration-color: #ff0762bd;
  /* text-decoration-thickness: 2px; */
  background: #00000017;
  padding: 4px 10px;
  border-radius: 3px;
}

/* HAMBURGER 🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔🍔*/

.burger-parent .hamburger-icon {
  height: 1.81rem;
  /* height: 1.3rem; */
  aspect-ratio: 1 / 1;
  /* outline: solid 1px black; */
  position: relative;
}

.hamburger-icon:has(input:checked) {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.burger-parent .hamburger-icon input[type="checkbox"] {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  opacity: 0;
}

.burger-parent .hamburger-icon .burger-line {
  background: var(--light-bg);
  /* width: 93%; */
  /* height: 13%; */
  /* opacity: 0.6; */
  border-radius: 10px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 75%;
  height: 12%;
}

.burger-parent .hamburger-icon.kebab .burger-line {
  aspect-ratio: 1 / 1;
  width: auto;
  height: 15%;
}

.hamburger-icon .burger-line::before,
.hamburger-icon .burger-line::after {
  content: "";
  display: block;
  border-radius: inherit;
  position: absolute;
  width: 100%;
  background: var(--light-bg);
  transition: 0.5s;
  height: 100%;
}

.burger-parent .hamburger-icon:has(input:checked) .burger-line {
  background: transparent;
  transition: 0.2s;
  width: calc(0.6 * 1.81rem);
  /* right: 50%; */
  /* right: 50%; */
  /* transform: translate(-50%, -50%); */
  aspect-ratio: none;
}
.burger-parent .hamburger-icon .burger-line::before {
  bottom: 230%;
}
.burger-parent .hamburger-icon .burger-line::after {
  bottom: -230%;
}

.burger-parent .hamburger-icon.kebab .burger-line::before {
  bottom: 170%;
}

.burger-parent .hamburger-icon.kebab .burger-line::after {
  bottom: -170%;
}

.burger-parent .hamburger-icon:has(input:checked) .burger-line::before {
  bottom: 0 !important;
  transform: rotate(45deg);
  transition: 0.4s ease-out;
  width: 100%;
}

.burger-parent .hamburger-icon:has(input:checked) .burger-line::after {
  bottom: 0 !important;
  transform: rotate(135deg);
  transition: 0.4s;
  width: 100%;
}

.burger-parent:has(#hamburger-toggle:checked) + .nav-modal {
  display: flex;
  transition: left 1s;
}

/* FOOTER */
footer {
  background: var(--foot-bg);
  margin-top: auto;
  padding: 2rem 0 0;
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.318);
  /* border-top: solid 5px rgb(58, 58, 58); */
}

footer h3 {
  padding: 10px;
  font-size: 1rem;
  opacity: 90%;
  color: var(--foot-color);
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}

footer section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

footer section > div {
  /* border: solid 1px grey; */
  padding: 10px;
  opacity: 80%;
  color: var(--foot-color);
  width: 90vmin;
  max-width: 30rem;
}

footer h4 {
  font-weight: 700;
  color: var(--foot-color);
}

footer section > div ul {
  opacity: 65%;
}

footer section > div li {
  list-style-type: none;
}

footer section > div li strong {
  font-weight: 600;
}

footer section > div a {
  color: var(--main-color);
}

footer .copyright-text {
  text-align: center;
  padding: 1rem;
  color: var(--foot-color);
  font-size: 14px;
  opacity: 50%;
}

/* SCREEN OVERLAY */
.screen-overlay {
  display: grid;
  place-items: center;
  background: var(light);
  position: fixed;
  height: 100vh;
  width: 100vw;
  /* background: var(--secondary) 68; */
  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  z-index: 900;
  display: none;
}

/* A bit of styling for the cropper in screen overlay card */
.card-overlay.crop-editor {
  /* width: 100%; */
  /* min-height: 10rem; */
  /* height: auto; */
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.card-overlay.crop-editor canvas {
  /* border: solid black 1px; */
  border-radius: var(--min);
}

.card-overlay.crop-editor .card-buttons button {
  background: var(--darkblue) !important;
}

.card-overlay.ad-card::before {
  content: "Ad";
  background: rgb(255, 204, 2);
  padding: 1px 11px;
  border-radius: 2px;
  font-size: 12px;
}

.card-overlay {
  background: var(--main-bg);
  box-shadow: var(--roundshadow);
  border-radius: var(--min);
  padding: 0.5rem;
  position: relative;
  max-width: 90vmin;
  font-size: min(1rem, 4.2vmin);
}

.card-overlay .close-offer-btn {
  float: right;
  font-size: 16px;
}

.card-overlay .offer-description {
  opacity: 60%;
}

.card-overlay img {
  display: block;
  height: auto;
  background: #d4d6d7;
  margin: 7px 0px;
  min-height: 5rem;
  border-radius: var(--min);
  padding: var(--min);
  color: rgb(97, 97, 97);
}

.card-overlay .offer-buttons {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.card-overlay .offer-buttons button {
  margin-top: 2px;
  background: rgb(37, 101, 252);
  padding: 10px 30px;
  border-radius: var(--min);
  color: white;
  font-weight: 500;
  float: right;
  width: 100%;
}

/* MORE SPECIFIC TAGS FOR USER CUSTOMIZATION FORM PAGE: */

.container-board {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
}

.wrapper-customize-account:nth-child(1) {
  z-index: 1;
}

.wrapper-customize-account {
  /* border: solid 1px red; */
  position: fixed;
  color: var(--main-bg);
  width: 80vmin;
  min-height: 20rem;
  /* aspect-ratio: 3 / 3; */
  background: var(--secondary);
  padding: 30px;
  border-radius: var(--min);
  /* min-height: 32rem; */
  box-shadow: 3px 3px 20px var(--shadow-b);
}

.wrapper-customize-account .form-header {
  /* background: red; */
  margin: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1rem;
}

.wrapper-customize-account .form-header h2 {
  text-align: center;
  font-weight: 500;
  color: var(--light-bg);
}

.wrapper-customize-account .form-header img {
  padding: 5px;
  height: 3.6rem;
}

/* TODO: SET THE DIMENSIONS CONSISTENt */

.customize-account-form {
  display: none;
  color: var(--primary);
}

/* FOR REGISTERING ACCOUNT */

.wrapper-register-account {
  display: grid;
  grid-template-rows: max-content auto;
  place-items: center;
  padding: 30px 0 15px;
  /* width: 60vmin; */
  /* height: 45vmin; */
  min-height: 30rem;
  background: linear-gradient(var(--secondary), rgb(24, 42, 53));
  /* width: min(30rem, 90vmin); */
}

.register-account-wrapper {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  /* flex-direction: column; */
  /* justify-content: space-between; */
  /* gap: 2rem; */
  /* border: solid 1px grey; */
  /* width: 0rem; */
  /* width: 90%; */
  /* padding: 1rem 3rem; */
  /* position: absolute; */
  /* left: 50%; */
  /* bottom: 50%; */
  /* gap: 5rem; */
  /* transform: translate(-50%, 50%); */
  /* flex-wrap: wrap; */
  width: inherit;
  flex-direction: column;
}

.register-account-wrapper .register-info {
  color: var(--light-bg);
  padding: 1rem;
  opacity: 0.5;
  text-align: center;
  margin: 0px 20px;
}

.register-account-wrapper .singin-option-wrapper {
  display: flex;
  border-bottom: solid 1px grey;
  gap: 3rem;
  padding: 2rem 0rem;
  width: 25rem;
  max-width: 90%;
  justify-content: space-evenly;
}

.register-account-wrapper .register-option {
  font-weight: 600;
  /* border-radius: 50%; */
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  height: 3rem;
  /* width: 80%; */
  aspect-ratio: 1 / 1;
  letter-spacing: 1px;
  /* border: solid 1px red; */
  gap: 3px;
  font-size: 0.9rem;
  font-size: 1.3rem;
  color: var(--light-bg);
}
.register-account-wrapper .register-option svg {
  background: var(--light-bg);
  overflow: visible;
  fill: var(--greyblue);
  height: 3.1rem;
  aspect-ratio: 1 / 1;
  padding: 0.9rem;
  /* border-radius: var(--min) 0 0 var(--min); */
  border-radius: 50%;
}

.register-account-wrapper .register-option:active svg {
  /* background: var(--primary); */
  opacity: 0.7;
}

.register-account-wrapper .register-option:nth-of-type(1) svg {
  /* background: linear-gradient(#17a9fd, #0165e1); */
  box-shadow: -0.1rem -0.1rem 1rem white, 0.1rem 0.1rem 1rem #0165e1;
  fill: #0165e1;
  transition: box-shadow 1s 0.2s, scale 1s;
}

.register-account-wrapper .register-option:nth-of-type(1):hover svg {
  box-shadow: -0.5rem -0.5rem 1.2rem white, 0.5rem 0.5rem 1.2rem #0165e1;
  transition: box-shadow 0.7s 0.2s, scale 0.5s;
  scale: 1.1;
}

/* UPDATED TO GITHUB 🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤*/
.register-account-wrapper .register-option:nth-of-type(2) svg {
  fill: #307def;
  /* fill: #1a2536; GIthub*/
  box-shadow: -0.1rem -0.1rem 1rem #ea4335, 0.1rem 0.1rem 1rem 0px #fdbd00;
  /* box-shadow: -0.1rem -0.1rem 1rem #1e1f29, 0.1rem 0.1rem 1rem 0px #000000; GITHUB*/
  transition: box-shadow 0.7s 0.2s, scale 1s;
}

.register-account-wrapper .register-option:nth-of-type(2):hover svg {
  box-shadow: -0.5rem -0.5rem 1.2rem #ea4335, 0.5rem 0.5rem 1.2rem 0px #fdbd00;
  /* box-shadow: -0.5rem -0.5rem 2rem #4749b3, 0.5rem 0.5rem 1.2rem 0px #000f30; GITHUB*/
  transition: box-shadow 0.7s 0.2s, scale 0.5s;
  scale: 1.1;
}

.customize-account-form:first-of-type {
  display: block;
}
/* WORK THIS   IDLE SELECTOR */
.customize-account-form input[type="image"] {
  /* left: 50%; */
  /* transform: translate(-50%); */
  height: 3rem;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  /* position: relative; */
  border-radius: var(--min);
}

.customize-account-form label {
  display: block;
  font-weight: 600;
}

.customize-account-form input {
  /* display: block; */
  height: 2.5rem;
  width: 100%;
  border-radius: var(--min);
  border: none;
  padding: 10px;
  font-size: medium;
  background: rgb(226, 226, 226);
  color: rgb(48, 48, 48);
}

.customize-account-form .prodile-edit-group {
  height: 25vmin;
  max-height: 8rem;
  min-height: 7rem;
  aspect-ratio: 1 / 1;
  /* border: solid 1px red; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1rem;
  /* background-color: #0165e1; */
  position: relative;
}

.customize-account-form #profile-edit-icon {
  color: red;
  position: absolute;
  bottom: 2%;
  right: 7%;
  height: 25%;
  min-height: 2rem;
  fill: var(--primary);
  background: var(--light-bg);
  padding: 8%;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transition: background 0.2s ease-in;
}

.customize-account-form #profile-edit-icon:hover {
  background: rgb(255, 255, 255);
  transition: background 0.5s ease-out;
}

.customize-account-form #profile {
  display: none;
}

.customize-account-form .profile-image {
  outline: solid 0.45rem var(--darkblue);
  outline-offset: -1px;
  background: var(--greyblue);
  /* height: 25vmin; */
  /* max-height: 10rem; */
  aspect-ratio: 1 / 1;
  width: 100%;
  /* display: none; */
  height: 100%;
  /* background-size: cover;
  background-position: center; */
  /* border-radius: 50%; */
  /* border: solid 1px var(--light-bg); */
  /* padding: 1rem; */
  /* background: var(--light-bg); */
  background-position: center;
  border-radius: 50%;
}

.form-nav {
  padding-top: 20px;
  /* background: red; */
  display: grid;
  gap: 10px;
  grid-auto-columns: 1fr;
  grid-template-rows: 2.9rem;
  grid-auto-flow: column;
}

.form-nav button {
  border-radius: var(--min);
  color: white;
  font-weight: 600;
  background: var(--darkblue);
}

.form-nav button:active {
  background: rgb(80, 107, 119);
}

/* NORMAL FUNCTION VOID stylings */
.experimental::before {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.1rem);
  border-radius: 2px;
  padding: 0.5rem;
  text-align: center;
  color: var(--darkblue);
  content: "coming soon";
  font-weight: 900;
  font-size: 1rem;
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: calc(100%);
  opacity: 0.9;
  z-index: 2;
}

/* LOADING CAT OVERlAY */
.screen-overlay.loading-overlay {
  background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

.screen-overlay.loading-overlay img {
  min-width: 6rem;
  width: 20vmin;

  max-width: 12rem;
}

.screen-overlay.loading-overlay div {
  display: inline-block;
  position: relative;
  transform: rotate(1deg);
}

@keyframes loadingText {
  0% {
    content: "Loading.";
  }
  20% {
    content: "Loading..";
  }
  40% {
    content: "Loading...";
  }
  60% {
    content: "Loading....";
  }
  80% {
    content: "Loading....";
  }
  90% {
    content: "Loading....";
  }
  100% {
    content: "Loading.";
  }
}

.screen-overlay.loading-overlay div::before {
  content: "Loadiing";
  font-weight: 600;
  font-size: 100%;
  color: var(--light-bg);
  position: absolute;
  top: -1.7rem;
  text-align: center;
  left: 0;
  width: 100%;
  animation: loadingText 5s infinite;
  z-index: -1;
}

/* MEDIA QUERY 🍙🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚🍚 */

/* MOBILE  📱📱📱📱📱📱📱📱📱📱📱*/
@media (max-width: 590px) {
  .logo > img {
    /* width: 8rem; */
    /* padding: 10px; */
    padding: 5px;
    height: 3.1rem;
  }

  .headings {
    /* margin: 0 !important; */
    /* padding: 1rem; */
    margin-top: 0.6rem !important;
    /* width: 10vw !important; */
    /* padding: 10px !important; */

    font-size: min(12vmin, 1.2rem);
    /* overflow-x: hidden; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .headings * {
    text-align: center;
    width: auto;
  }

  .up-section {
    height: 3.2rem;
    padding: 0 1rem !important;
    width: calc(100vw - 0rem) !important;
    /* overflow-x: visible !important; */
    /* padding: 0 !important; */
  }

  .headings h1 {
    font-size: min(12vmin, 1.7rem) !important;
  }

  /* FOR ABOUT PAGE */
  .about-content {
    padding: 1rem !important;
  }

  .about-content h2 {
    background: rgba(81, 73, 73, 0.464) !important;
    font-size: 1rem;
    padding: 0.5rem 0.5rem;
    margin: 0.3rem 0;
  }

  .hamburger-icon {
    display: inline-block !important;
  }

  .page-nav.nav-modal {
    display: none;
    flex-direction: column;
    /* border: solid 1px blue; */
    top: 3.2rem;
    width: 100%;
    min-width: auto;
    position: absolute;
    /* right: calc(-100%); */
    transition: right 500ms ease-out, box-shadow 1s;
    box-shadow: inset 0px 0.8rem 1.2rem -1.2rem black;
    z-index: 10;
    height: calc(100vh - 3.2rem);
    backdrop-filter: blur(1px);
    background: linear-gradient(rgba(21, 29, 34, 0.95), rgb(3, 24, 31, 0.95));
    /*📝TO-DO: set opacity to low and while in front of the chat-message-section the message secton should be blurd, */
    /* opacity: 0.96; */
    /* backdrop-filter: blur(5px); */
    /* padding: 1rem 0rem; */
    left: 0;
  }

  body:has(#hamburger-toggle:checked) {
    overflow-y: hidden;
  }

  .burger-parent:has(#hamburger-toggle:checked) + .nav-modal {
    /* box-shadow: inset 0px 0.8rem 1.2rem -1.2rem black, */
    /* -2rem 0rem 0rem rgba(1, 13, 20, 0.6); */
    /* right: 0% !important; */
    /* border: solid 100px red; */
    display: flex;
    /* transition: right 500ms ease-out, box-shadow 1s; */
  }
  .page-nav.nav-modal > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2rem;
    letter-spacing: 2px;
    padding: 1rem;
  }

  .page-nav.nav-modal #navigation-list {
    display: gird;
    place-items: center;
    font-size: 1.3rem;
    width: 100%;
    /* border: solid 1px red !important; */
  }

  .page-nav.nav-modal #authentication-buttons button {
    width: 100%;
    max-width: 8.5rem;
    margin-bottom: 1rem;
    /* border: solid 1px red !important; */
    display: inline-block;
  }

  #main-getstarted-btn {
    font-size: 0.9rem !important;
    padding: 0.6rem 0.1rem !important;
  }
}

@media (max-width: 416px) {
  body {
    overflow-x: hidden;
  }

  .headings {
    padding: 0 !important;
  }

  .image-container {
    margin: 15px 0 !important;
    font-size: 0.7rem !important;
  }

  #main-getstarted-btn {
    min-width: 1rem !important;
  }

  footer {
    overflow-x: hidden;
  }

  footer h4 {
    font-size: 1rem;
  }
  footer section {
    font-size: 0.8rem;
  }
}

@media (max-width: 300px) {
  /* THIS SHOULDNT BE HERE IF I SET A BETTER FONT SIZE> CHECK FONT SIZE */
  .headings h1 {
    font-size: 1.2rem;
  }

  .headings h3 {
    font-size: 0.9rem !important;
  }

  /* for about page */
  .about-content h2 {
    padding: 0.2rem 0.5rem !important;
  }

  .about-content p {
    /* color: red !important; */
    font-size: 0.8rem;
  }
}

@media (max-width: 180px) {
  #main-getstarted-btn {
    font-size: 5.5vmin !important;
  }
}