* {
    font-family: "IberPangea", Sans-Serif, serif;
}
html {
    width: 100vw;
    height: 100%;
    overflow: hidden;
}
body {
    height: 100%;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url('images/background-desktop.png');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
#body-index {
    display: flex;
    flex-direction: column;
}
#body-form {
    margin: 0;
    position: relative;
}

.logo {
    display: block;
    width: 348px;
    height: auto;
    padding: 40px 0;
    margin: 0 auto;
}

p, li {
    color: #fff;
    font-weight: 500;
    font-size: 28px;
    line-height: 150%;
    margin: 0;
}
.link {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    text-decoration: underline;
    text-underline-position: under;
    text-underline-offset: 11px;
    border: none;
    padding: 0;
}
button, a, input {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
b a {
    color: #fff;
    text-decoration: none;
}

.center-align {
    text-align: center;
    align-self: center;
}
.italic {
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    margin-top: 24px;
}

h1 {
    color: #fff;
    font-size: 72px;
    margin: 48px 0 24px;
    font-weight: 600;
}
h2 {
    color: #fff;
    font-size: 46px;
    line-height: 125%;
    font-weight: 600;
    margin: 48px 0 24px;
}
h3 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}
#h1-index {
    font-size: 135px;
    font-weight: 700;
    font-style: italic;
    text-shadow: 9px 10px 10px #00402A;
    line-height: 120%;
    margin: 42px auto;
}
#h1-confirmation {
    font-size: 64px;
    line-height: 125%;
    margin: 32px 0 24px;
}


#bruce {
    max-height: 882px;
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;
}

/*index*/
.p1 {
    font-size: 44px;
    font-weight: 700;
    line-height: 120%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.p1 span {
    white-space: break-spaces;
}
footer {
    margin-bottom: 72px;
}

/*confirmation*/
#confirmation {
    max-width: 680px;
    margin: 0 auto 164px;
    text-align: center;
    padding: 0 16px;
}
.fun {
    font-size: 46px;
    font-weight: 500;
    line-height: 150%;
    margin: 16px 0 48px;
}
#bruce2 {
    max-height: 584px;
    width: fit-content;
    max-width: 90%;
    margin: 114px auto 0;
}

/*buttons*/
button, .button {
    display: block;
    width: fit-content;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    line-height: 32px;
    border-radius: 4px;
    border: 1px solid #fff;
    padding: 16px 32px;
    background-color: transparent;
}
.button {
    width: 50%;
}
#register-btn {
    margin: 42px auto;
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    color: #00402A;
    background-color: #FF9C1A;
    box-shadow: 0 -10px 5px 0 rgba(201, 114, 0, 0.60) inset, 0 10px 5px 0 rgba(255, 175, 69, 0.80) inset, 0 5px 10px 0 #00402A;
    border: none;
    border-radius: 999px;
    padding: 28px 40px 28px 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#register-btn svg {
    width: 41px;
    height: 41px;
}
#submit {
    background-color: #00A443;
    border-color: #00A443;
}
#form-btns {
    margin-bottom: 164px;
    gap: 24px;
}
.back-btn {
    margin: 32px 0 32px max(16px, calc((100% - 784px) / 2));;
    position: sticky;
    bottom: 0;
}
#body-confirmation button {
    margin: 0 auto;
}

/*form*/
form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    padding-top: 32px;
}
form div {
    display: flex;
    width: 100%;
    flex: 1 0 0;
}
form p {
    font-size: 24px;
    font-weight: 400;
    line-height: 150%;
}
label {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 150%;
}
input {
    color: #00402A;
    font-size: 22px;
    font-weight: 500;
    line-height: 150%;
}
input[type=checkbox] {
    width: 24px;
    min-width: 24px;
    height: 24px;
}
.name-div, .surname-div, .email-div, .number-div {
    flex-direction: column;
    gap: 8px;
}
.name-surname-div {
    gap: 24px;
    flex-direction: column;
}
.name-div, .surname-div {
    width: 100%;
}
#name, #surname, #email, #number {
    height: 60px;
    align-self: stretch;
    border-radius: 8px;
    background-color: #fff;
    border: 3px solid #038538;
    padding: 0 24px;
}
#name:focus, #surname:focus, #email:focus, #number:focus {
    border: 3px solid #038538;
    box-shadow: 0 0 0 2px #C1EAD2;
    background-color: #fff;
}
#name:user-invalid, #surname:user-invalid, #email:user-invalid, #number:user-invalid {
    border: 2px solid #FF6363;
    background-color: #FFF2F2;
}
#error-registered {
    display: none;
    color: #FF9C1A;
    padding-top: 16px;
}
.checkboxes-div {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 34px;
}
.checkboxes-div label, .checkboxes-div .italic {
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
}
.checkboxes-div label {
    padding-left: 16px;
    align-self: center;
}
.checkboxes-div input {
    cursor: pointer;
}
.checkboxes-div > p {
    margin-top: 16px;
    font-size: 18px;
}
#terms-label, #marketing-label {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

/*overlays*/
#form {
    max-width: 784px;
    margin: auto;
    padding: 0 16px;
}
#body-form > a {
    display: block;
    background-color: #013f29;
    position: sticky;
    top: 0;
}
.terms, .data {
    display: none;
    position: absolute;
    top: 0;
    z-index: -1;
    flex-direction: column;
    height: 100%;
}
.terms p, .data p, .data li {
    font-size: 22px;
    margin-bottom: 14px;
    font-weight: 400;
}
.terms a {
    color: #fff;
}
.content {
    overflow-y: scroll;
    height: 100%;
    padding: 0 max(16px, calc((100% - 784px) / 2));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}
.content.no-mask {
    mask-image: none;
}

/*tablet*/
@media (max-width: 1024px) {
    /*homepage*/
    body {
        background-image: url('images/background-tablet.png');
    }
    .logo {
        width: 251px;
        padding: 30px 0;
    }
    #h1-index {
        font-size: 100px;
        margin: 20px auto 32px auto;
    }
    #bruce {
        max-height: 763px;
    }
    #register-btn {
        font-size: 30px;
        margin: 32px auto;
    }
    .p1 {
        line-height: 150%;
    }
    /*form*/
    #form {
        max-width: 654px;
    }
    h1 {
        font-size: 64px;
        line-height: 125%;
        margin-top: 36px;
    }
    p, li {
        font-size: 24px;
    }
    label, input, .italic {
        font-size: 20px;
    }
    .checkboxes-div label, .checkboxes-div .italic, .checkboxes-div > p, .link {
        font-size: 16px;
    }
    .checkboxes-div > p {
        margin-top: 0;
    }
    #name, #surname, #email, #number {
        height: 52px;
    }
    #form-btns {
        margin-bottom: 72px;
    }
    .button {
        font-size: 20px;
        padding: 12px 24px;
    }
    /*t&c and policy*/
    h2 {
        font-size: 42px;
        margin-top: 36px;
    }
    h3 {
        font-size: 28px;
    }
    .terms p, .data p, .data li {
        font-size: 20px;
    }
    .content {
        padding: 0 max(16px, calc((100% - 654px) / 2));
    }
    .back-btn {
        margin: 20px 0 20px max(16px, calc((100% - 654px) / 2));
        font-size: 20px;
        padding: 12px 24px;
    }
    /*confirmation*/
    #confirmation {
        margin-bottom: 72px;
    }
    #bruce2 {
        max-height: 488px;
        margin-top: 92px;
    }
    #confirmation p.center-align:not(.fun) {
        max-width: 541px;
        margin: auto;
    }
    .fun {
        font-size: 42px;
    }
}

/*mobile*/
@media (max-width: 576px) {
    /*homepage*/
    body {
        background-image: url('images/background-mobile.png');
    }
    .logo {
        width: 174px;
        padding: 20px 0;
    }
    #h1-index {
        font-size: 56px;
        margin: 22px auto 32px auto;
    }
    #bruce {
        max-height: 664px;
    }
    #register-btn {
        font-size: 20px;
        margin: 32px 16px 24px 16px;
        width: calc(100% - 32px);
        padding: 22px 32px 22px 45px;
    }
    #register-btn svg {
        width: 31px;
        height: 31px;
    }
    .p1 {
        margin: 0 16px;
        font-size: 24px;
        flex-direction: column;
    }
    footer {
        margin-bottom: 44px;
    }
    /*form*/
    h1 {
        font-size: 38px;
        margin-top: 24px;
    }
    p, li {
        font-size: 18px;
    }
    label, input, .italic {
        font-size: 16px;
    }
    .checkboxes-div {
        gap: 16px;
    }
    .checkboxes-div label, .checkboxes-div .italic, .checkboxes-div > p, .link {
        font-size: 14px;
    }
    #name, #surname, #email, #number {
        height: 44px;
    }
    #form-btns {
        flex-direction: column;
        margin-bottom: 32px;
    }
    .button {
        font-size: 16px;
        width: 100%;
    }
    /*t&c and policy*/
    h2 {
        font-size: 28px;
        margin-top: 24px;
    }
    h3 {
        font-size: 20px;
    }
    .terms p, .data p, .data li {
        font-size: 16px;
    }
    .back-btn {
        margin: 8px 0 8px max(16px, calc((100% - 654px) / 2));
        font-size: 16px;
    }
    /*confirmation*/
    #confirmation {
        margin-bottom: 32px;
    }
    #bruce2 {
        max-height: 244px;
        margin-top: 40px;
    }
    #h1-confirmation {
        font-size: 38px;
    }
    .fun {
        font-size: 24px;
    }
}

/*large event screen*/
@media (min-height: 1900px) {
    /*homepage*/
    #h1-index {
        font-size: 155px;
    }
    #bruce {
        margin: 70px auto;
    }
    #register-btn {
        font-size: 50px;
        padding: 48px 63px 48px 90px;
        margin: 30px auto 60px;
    }
    #register-btn svg {
        width: 60px;
        height: 60px;
    }
    .p1 {
        font-size: 60px;
        line-height: 150%;
    }
    /*form*/
    h1 {
        margin-bottom: 48px;
    }
    form {
        padding-top: 48px;
    }
    form, .name-surname-div {
        gap: 48px;
    }
    #form-btns {
        flex-direction: column;
        margin-bottom: 0;
    }
    .button {
        width: 100%;
    }
    /*confirmation*/
    #confirmation {
        max-width: 784px;
        margin-bottom: auto;
    }
    #bruce2 {
        margin: 228px auto 114px;
        max-height: 625px;
    }
    #confirmation p.center-align:not(.fun) {
        max-width: 680px;
        margin: auto;
    }
    .fun {
        margin: 48px 0 96px
    }
    #body-confirmation button {
        width: fit-content;
    }
}



/* Fonts */
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-SmBoldItalic.woff2") format("woff2"), url("fonts/IberPangea-SmBoldItalic.ttf") format("ttf");
    font-display: auto;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-MediumItalic.woff2") format("woff2"), url("fonts/IberPangea-MediumItalic.ttf") format("ttf");
    font-display: auto;
    font-style: italic;
    font-weight: 600;
    font-stretch: normal;
}
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-LightItalic.woff2") format("woff2"), url("fonts/IberPangea-LightItalic.ttf") format("ttf");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-SmBold.woff2") format("woff2"), url("fonts/IberPangea-SmBold.ttf") format("ttf");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-Medium.woff2") format("woff2"), url("fonts/IberPangea-Medium.ttf") format("ttf");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-Regular.woff2") format("woff2"), url("fonts/IberPangea-Regular.ttf") format("ttf");
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
}
@font-face {
    font-family: "IberPangea";
    src: url("fonts/IberPangea-Light.woff2") format("woff2"), url("fonts/IberPangea-Light.ttf") format("ttf");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}