* {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    margin: 0;
    border-top: 8px solid #0e1e25;
}

.main {
    max-width: 980px;
    margin: auto;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.header {
    margin-bottom: 64px;
}

.header h2 {
    font-weight: 500;
    font-size: 24px;
    color: #2d3b41;
    margin: 0;
}

.header a {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    padding: 4px;
}

.header a:hover,
.header a:focus {
    background-color: #E9EBEB;
}

.header h1 {
    font-weight: 700;
    font-size: 80px;
    color: #0e1e25;
    margin-top: 8px;
}

.label {
    font-weight: 400;
    font-size: 16px;
    color: #a3a9ac;
    margin-bottom: 8px;
}

[data-netlify-identity-button] a, .netlify-button {
    display: block;
    position: relative;
    width: 100%;
    max-width: 184px;
    height: auto;
    padding: 8px 12px;
    outline: 0;
    cursor: pointer;
    border: 2px solid #007a70;
    border-radius: 4px;
    background-color: #00ad9F;
    color: white;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.button-wrapper {
  width: 980px;
  display: flex;
  align-items: center;
  margin-bottom: 45px;
  margin-top: 20px;
}
.netlify-button {
  margin-right: 15px;
  max-width: 230px;
}

[data-netlify-identity-button] a:hover,
[data-netlify-identity-button] a:focus,
.netlify-button:hover,
.netlify-button:focus {
    background-color: #007a70;
    text-decoration: none;
}

[data-netlify-identity-menu] ul {
    display: flex;
}

[data-netlify-identity-menu] li:first-child {
    margin-right: 16px;
}

[data-netlify-identity-menu] li {
    list-style-type: none;
    display: inline-block;
}

[data-netlify-identity-menu] a {
    display: block;
    position: relative;
    width: 192px;
    height: 24px;
    padding: 8px;
    outline: 0;
    cursor: pointer;
    border: 2px solid #007a70;
    border-radius: 4px;
    background-color: #00ad9F;
    color: white;
    transition: background-color 0.2s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

[data-netlify-identity-menu] a:hover,
[data-netlify-identity-menu] a:focus {
    background-color: #007a70;
    text-decoration: none;
}

.netlify-identity-user-details {
    display: block;
}

.netlify-identity-user {
    font-weight: 500;
    color: #2d3b41;
    display: block;
    margin-top: 8px;
}

.hands-on-area {
    display: flex;
    margin-bottom: 40px;
}

.single-button {
    flex-grow: 1;
    margin-right: 104px;
    margin-bottom: 40px;
}

.multiple-buttons {
    flex-grow: 2;
}

.single-button div {
    margin-top: 8px;
}

.multiple-buttons div {
    margin-top: 8px;
}

.call-out svg {
    display: block;
    margin-left: 40px;
    width: 90%;
    max-width: 420px;
}

.footer {
    position: absolute;
    bottom: 32px;
    margin-top: 104px;
    display: flex;
    flex-direction: column;
}

.github-link {
    font-weight: 500;
    font-size: 16px;
    color: inherit;
    text-decoration: none;
}

.github-link:hover,
.github-link:focus {
    text-decoration: underline;
}

.github-link::before {
    display: inline-block;
    position: relative;
    top: 4px;
    content: " ";
    width: 19px;
    height: 19px;
    margin-right: 8px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4gIDxwYXRoIGZpbGw9IiMxNjE1MTQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNDk5MjM0NTUsMS4xODc1IEM0LjkwOTYxMzk0LDEuMTg3NSAxLjE4NzUsNS4wMDMyODcwNCAxLjE4NzUsOS43MTA2Mjc3OCBDMS4xODc1LDEzLjQ3NjE4NjQgMy41NjkwNjA5NywxNi42NzAzOTczIDYuODcyMjIwMjIsMTcuNzk3Mzk2NSBDNy4yODgxMTMxMywxNy44NzU4Nzg0IDcuNDM5NjcxNjQsMTcuNjEyNzAyNiA3LjQzOTY3MTY0LDE3LjM4NjY3NDkgQzcuNDM5NjcxNjQsMTcuMTg0NzE1IDcuNDMyNTI3NDcsMTYuNjQ4NDIyNCA3LjQyODQ0NTA5LDE1LjkzNzM3NjkgQzUuMTE2Mjg0NjUsMTYuNDUyMjE3OCA0LjYyODQzOTcyLDE0Ljc5NDY4MTMgNC42Mjg0Mzk3MiwxNC43OTQ2ODEzIEM0LjI1MDMwODg2LDEzLjgwOTk5NTkgMy43MDUzMTA1NSwxMy41NDc4NjY1IDMuNzA1MzEwNTUsMTMuNTQ3ODY2NSBDMi45NTA1Nzk3NCwxMy4wMTk0MjIxIDMuNzYyNDYzOTMsMTMuMDI5ODg2NCAzLjc2MjQ2MzkzLDEzLjAyOTg4NjQgQzQuNTk2ODAxMjQsMTMuMDkwMDU1OCA1LjAzNTY1NzU2LDEzLjkwODM1OTggNS4wMzU2NTc1NiwxMy45MDgzNTk4IEM1Ljc3NzEyMDYxLDE1LjIxMDYzNTEgNi45ODE0MjQsMTQuODM0NDQ1NSA3LjQ1NDk4MDU5LDE0LjYxNjI2NiBDNy41MzA1MDQ3LDE0LjA2NTg0NjcgNy43NDUzNDAxNywxMy42OTAxODAzIDcuOTgyNjI4NzYsMTMuNDc3MjMyOSBDNi4xMzY4ODA3NCwxMy4yNjIxOTI2IDQuMTk2MjE3MjcsMTIuNTMwNzQxOSA0LjE5NjIxNzI3LDkuMjY0ODUwOTMgQzQuMTk2MjE3MjcsOC4zMzQ1Nzk1MyA0LjUyMDI1NjUzLDcuNTczMzA1NjggNS4wNTE5ODcwOSw2Ljk3Nzg5MDEzIEM0Ljk2NjI1NzAyLDYuNzYyMzI2NjcgNC42ODEwMDA0MSw1Ljg5NTM2Mzk1IDUuMTMzNjM0NzgsNC43MjIzMjIwNiBDNS4xMzM2MzQ3OCw0LjcyMjMyMjA2IDUuODMxMjEyMjEsNC40OTMxNTUwOCA3LjQxOTI1OTcyLDUuNTk2MDg2NTQgQzguMDgyMTM2ODgsNS40MDY2ODM3IDguNzkzNDkyMzYsNS4zMTI1MDU0OSA5LjUwMDI1NTE1LDUuMzA4ODQzIEMxMC4yMDY1MDc2LDUuMzEyNTA1NDkgMTAuOTE3MzUyOCw1LjQwNjY4MzcgMTEuNTgxMjUwNiw1LjU5NjA4NjU0IEMxMy4xNjgyNzc1LDQuNDkzMTU1MDggMTMuODY0ODM0Myw0LjcyMjMyMjA2IDEzLjg2NDgzNDMsNC43MjIzMjIwNiBDMTQuMzE4NDg5Myw1Ljg5NTM2Mzk1IDE0LjAzMzIzMjcsNi43NjIzMjY2NyAxMy45NDgwMTI5LDYuOTc3ODkwMTMgQzE0LjQ4MDc2NDEsNy41NzMzMDU2OCAxNC44MDIyNTE4LDguMzM0NTc5NTMgMTQuODAyMjUxOCw5LjI2NDg1MDkzIEMxNC44MDIyNTE4LDEyLjUzOTExMzMgMTIuODU4NTI2NiwxMy4yNTk1NzY2IDExLjAwNzE2NTMsMTMuNDcwNDMxMSBDMTEuMzA1MTc5MywxMy43MzM2MDY5IDExLjU3MTA0NDYsMTQuMjUzNjc5OSAxMS41NzEwNDQ2LDE1LjA0ODk2MjUgQzExLjU3MTA0NDYsMTYuMTg3OTk1NiAxMS41NjA4Mzg3LDE3LjEwNzI3OTYgMTEuNTYwODM4NywxNy4zODY2NzQ5IEMxMS41NjA4Mzg3LDE3LjYxNDc5NTUgMTEuNzEwODY2MywxNy44ODAwNjQxIDEyLjEzMjM3MjUsMTcuNzk2ODczMyBDMTUuNDMyOTgwMiwxNi42NjcyNTggMTcuODEyNSwxMy40NzUxNCAxNy44MTI1LDkuNzEwNjI3NzggQzE3LjgxMjUsNS4wMDMyODcwNCAxNC4wOTAzODYxLDEuMTg3NSA5LjQ5OTIzNDU1LDEuMTg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIi8+PC9zdmc+);
}

@media (max-width: 880px) {
    .main {
        padding: 16px;
    }
    .header h1 {
        font-size: 10vw;
    }
    .hands-on-area {
        flex-direction: column;
    }
    [data-netlify-identity-menu] ul {
        display: flex;
        flex-direction: column;
    }
    [data-netlify-identity-menu] li {
        margin-bottom: 16px;
    }
}

@media screen and (max-height: 680px) {
    .main {
        padding: 64px 0;
    }
    .footer {
        position: relative;
        bottom: auto;
    }
}
