@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

:root {
    --selfnode-color-5 : #F27121;
    --selfnode-color-4 : #E94057;
    --selfnode-color-3 : #8A2387;
    --selfnode-color-2 : #1565c0;
    --selfnode-color-1 : #1d3752;
}

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    color: #F2F2F2;
    counter-reset: item-number;
    background: #000;
}

h1,h2{
    margin:0;
    padding: 0 13%;
    font-family: 'Inter', sans-serif;
    font-style: normal;  
}

p{
    margin:0;
    padding: 21px 13%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
}

section p::before {
    position: absolute;
	left:7%;
    counter-increment: item-number;
	content: counter(item-number, decimal-leading-zero);
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 21px;
}

.sn-logo {
    position: absolute;
	left:7%;
    padding-bottom: 0.5em;
}

.section-h {
    height: 100%; 
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8A2387;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, var(--selfnode-color-1),var(--selfnode-color-2));  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, var(--selfnode-color-1),var(--selfnode-color-2)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.section-1 {
    background:#1565c0;
    background: -webkit-linear-gradient(to bottom, var(--selfnode-color-2),var(--selfnode-color-3));  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, var(--selfnode-color-2),var(--selfnode-color-3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.section-2 {
    background:#1565c0;
    background: -webkit-linear-gradient(to bottom, var(--selfnode-color-3),var(--selfnode-color-4));  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, var(--selfnode-color-3),var(--selfnode-color-4)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.section-3 {
    background:#1565c0;
    background: -webkit-linear-gradient(to bottom, var(--selfnode-color-4),var(--selfnode-color-5));  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, var(--selfnode-color-4),var(--selfnode-color-5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding-bottom: 8%;
}
.section-form {
    background:#000;
    display: flex;
}

.sign-form-container {
    width:89%; 
    margin: 5% auto;
}

.sign-form-container h2{
    text-align: center;
    padding: 0;
    margin: 0 auto;
}

.sign-form-container p{
    text-align: center;
    padding: 0;
    margin: 0.55em auto;
}
.sign-form-container p::before {

    visibility: hidden;
}

.sign-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sign-form label {
    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(1px,1px,1px,1px);
}

.sign-form input {
    padding: 1em;
    background-color: transparent;
    width:55%;
    margin: 1% auto;
    border: 1px solid #fff;
    font-size: 21px;
    color:#fff;
    font-family: 'Inter', sans-serif;
    font-style: normal;  
}
.sign-form input:focus {
    outline:none;
}

.sign-form button {
    border: 1px solid #000;
    padding: 1em;
    background-color: #fff;
    font-weight: 600;
    text-decoration: none;
    width:21%;
    font-size: 21px;
    margin: 1% auto;
    color:#000;
    font-family: 'Inter', sans-serif;
    font-style: normal;  
}

.sign-form button:hover {
    background-color: #000;
    color:#fff;
    border: 1px solid #fff;
    font-weight: 600;
}

.sign-form button:active {
    transform: translateY(4px);
}

.sign-form-thankyou {
    visibility: hidden;
}



@media (min-width: 399px){
    h1 {
        font-weight: 800;
        font-size: 55px;
        line-height: 89px;
    }
    h2 {
        font-weight: 400;
        font-size: 34px;
        line-height: 55px;
    }
   
    p {
        font-weight: 300;
        font-size: 21px;
        line-height: 34px;
    }
  }

@media (min-width: 575.89px){
    h1 {
        font-weight: 800;
        font-size: 55px;
        line-height: 89px;
    }
    h2 {
        font-weight: 400;
        font-size: 55px;
        line-height: 89px;
    }
   
    p {
        font-weight: 300;
        font-size: 21px;
        line-height: 34px;
    }
  }

@media (min-width: 767.89px){
    h1 {
        font-weight: 800;
        font-size: 89px;
        line-height: 144px;
    }
    h2 {
        font-weight: 400;
        font-size: 55px;
        line-height: 89px;
    }
   
    p {
        font-weight: 300;
        font-size: 34px;
        line-height: 55px;
    }
  }
  
  @media (min-width: 991.89px) {
    h1 {
        font-weight: 900;
        font-size: 89px;
        line-height: 144px;
    }
    h2 {
        font-weight: 600;
        font-size: 55px;
        line-height: 89px;
    }
   
    p {
        font-weight: 400;
        font-size: 34px;
        line-height: 55px;
    }
  }
  /* fallback for old browsers */
  @media (min-width: 1100px){
    h1 {
        font-weight: 900;
        font-size: 89px;
        line-height: 144px;
    }
    h2 {
        font-weight: 600;
        font-size: 55px;
        line-height: 89px;
    }
    p {
        font-weight: 400;
        font-size: 34px;
        line-height: 55px;
    }
  }