@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
/*+ scrollbar */
::-webkit-scrollbar {
  width: 0.57rem;}

::-webkit-scrollbar-thumb {
  background: var(--hover);
  border-radius: 0.13rem;}

::-webkit-scrollbar-thumb:hover {
  background: var(--selected); }
/*- scrollbar */

:root {
  --text: #eceff4;
  --border: #e1e1e10d;
  --solidBorder: #393b3e;
  --background: #101112;
  --main0: #26272a;
  --main1: #2f3134;
  --hover: #393b3e;
  --selected: #424448;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    color: var(--text);
    text-decoration: none;
    scrollbar-color: var(--main1) #ffffff00; /* - FF scrollbar */
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    font-weight: 400;
}

html {scroll-behavior: smooth; transition: all ease 0.4s;}

body{
    background-color: var(--background);
    overflow-x: hidden;
    height: 180vh !important;
}

.top {
    display: flex;
    justify-content: center;
    height: 100vh;
}

.top-text-container {
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-color: var(--main0);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.coming-soon {
    transform: translatey(-50%);
    position: absolute;
    top: 16%;
    font-size:32px;
    font-weight: 500;
}

.main-text {
    transform: translatey(-50%);
    position: absolute;
    top: 35%;
    font-size: 42px;
    font-weight: 500;
}


.progress-text {
    position: absolute;
    top: 52%;
    margin: 0 12%;
    font-size: 20px;
}

.button {
  cursor: pointer;
  position: relative;
  width: 130px;
  height: 50px;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 16px;
  border: 2px solid var(--solidBorder);
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
}

.topButtonContainer {
    display: flex;
    top: 72%;
    flex-direction: row;
    position: relative;
    gap: 20px;
}

.bottom-container {
    display: flex;
    position: relative;
    height: 80vh;
}

.bottom-left {
    transform: translate(-50%, -50%);
    display: flex;
    position: absolute;
    top: 45%;
    left: 30%;
    width: 50%;
    height: 62%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--main0);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.bottom-right {
    transform: translate(-50%, -50%);
    display: flex;
    position: absolute;
    top: 45%;
    left: 78%;
    width: 35%;
    height: 62%;
    flex-direction: column;
    align-items: center;
    background-color: var(--main0);
    border: 1px solid rgba(225, 225, 225, 0.05);
    border-radius: 8px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.bottom-top-text {
    transform: translatey(-50%);
    position: absolute;
    top: 20%;
    font-size: 39px;
    font-weight: 500;
}

.bottom-desc-text {
    transform: translatey(-50%);
    position: absolute;
    font-size: 22px;
    top: 38%;
    margin: 0 22%;
}

.buttons-container {
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    top: 65%;
    left: 50%;
    gap: 60px;
}

.thank-user-container {
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    top: 38%;
    left: 17%;
    font-size: 18px;
    gap: 24px;
} 

.top-text-container:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}

.button:hover {border: 2px solid var(--text);}

.bottom-right:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}

.bottom-left:hover {box-shadow: 0px 6px 15px 2px rgba(0, 0, 0, 0.5);}