html {
    background: rgba(246, 248, 251, 1);
}

body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

.board {
    display: flex;
    padding: 20px;
}

.board .board-login-form-pin input:focus,
.board .board-login-form-pin input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.board-login {
    background: #FFFFFF;
    border-radius: 40px;
    padding: 20px;
    display: flex;
    width: 100%;
}

.board-login-container {
    border-radius: 40px;
    display: grid;
    gap: 40px;
    width: 100%;
}

.board-login-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin-top: 20px;
}

.board-login-header p {
    margin-top: 10px;
}

.board-login-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    align-self: center;
    gap: 20px;
    padding: 40px;
}

.board-login-body {
    margin: 20px 0 40px;
}

.board-login-form-pin {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.board-login-form-pin input {
    font-size: 30px;
    max-width: 80px;
    background: rgba(246, 248, 251, 1);
    width: 100%;
    height: 80px;
    border-radius: 20px;
    text-align: center;
    border: 0;
    padding: 10px;
    border: 2px solid #DADDE5;
}

.board-login-form-error {
    padding: 10px 20px;
    color: #FFFFFF;
    background: #FF0000;
    border-radius: 46px;
    margin: 5px 0 ;
}

.board-login-footer {
    margin: auto 0 0 0;
}

.board-login-footer-credit {
    color: #00001E;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: .4;
}

.board-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.board-login-form-btn {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    background-position: center;
    background: #0050FF radial-gradient(circle, transparent 1%, #0050FF 1%) center/100%;
    transition: background 0.67s cubic-bezier(0.77, 0, 0.175, 1);
    padding: 20px 40px;
    border-radius: 46px;
    outline: 0;
    border: 0;
    width: 100%;
}

.board-login-img {
    background: #0050FF;
    border-radius: 40px;
    min-height: 500px;
    overflow: hidden;
    display: block;
    position: relative;
}

.board-login-design-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.board-login-design {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.board-login-design-bubble-top-right {
    background-image: url(/assets-board/images/login/bubble_top_right@2x.webp);
}

.board-login-design-bubble-center-left {
    background-image: url(/assets-board/images/login/bubble_center_left@2x.webp);
}

.board-login-design-bubble-center-right {
    background-image: url(/assets-board/images/login/bubble_center_right@2x.webp);
}

.board-login-design-bubble-bottom-left {
    background-image: url(/assets-board/images/login/bubble_bottom_left@2x.webp);
}

.board-login-design-bubble-bottom-right {
    background-image: url(/assets-board/images/login/bubble_bottom_right@2x.webp);
}

.board-login-design-macbook {
    background-image: url(/assets-board/images/login/macbook@2x.webp);
}

.board-login-design-ipad {
    background-image: url(/assets-board/images/login/ipad@2x.webp);
}

.board-login-design-animation {
    will-change: transform;
}

.board-login-design-animation-1 {
    animation: moveUpDown 6s ease-in-out infinite;
}

.board-login-design-animation-2 {
    animation: moveUpDown 4s ease-in-out infinite;
}

.board-login-design-animation-3 {
    animation: moveUpDown 9s ease-in-out infinite;
}

.board-login-design-animation-4 {
    animation: moveUpDown 4s ease-in-out infinite;
}

.board-login-design-animation-5 {
    animation: moveUpDown 5s ease-in-out infinite;
}

.board-login-design-animation-6 {
    animation: moveUpDown 6s ease-in-out infinite;
}

.board-login-design-animation-7 {
    animation: moveUpDown 8s ease-in-out infinite;
}

@media screen and (min-width: 1024px) {

    .board {
        min-height: 100vh;
    }

    .board-login-form-btn:hover {
        background-size: 15000%;
        transition: background-size 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.45s;
        background-color: #0040CC;
    }

    .board-login-container {
        grid-template-columns: 1fr 1fr;
    }

    .board-login-footer-credit svg {
        transform-origin: center;
        transition: .425s ease;
    }

    .board-login-footer-credit:hover svg {
        transform: rotateY(180deg);
    }
    
}

@media screen and (min-width: 1440px) {

    .board-login-header h1 {
        font-size: 58px;
    }

    .board-login-header p {
        font-size: 20px;
    }
    
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}