.slide-in-bottom {
    -webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both
}

.slide-in-bottom-h1 {
    -webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .5s both;
    animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .5s both
}

.slide-in-bottom-subtitle {
    -webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .75s both;
    animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) .75s both
}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) 1s both;
    animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) 1s both
}

.bounce-top-icons {
    -webkit-animation: bounce-top .9s 1s both;
    animation: bounce-top .9s 1s both
}

@-webkit-keyframes slide-in-bottom {
    0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0
    }

    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
    }
}

@keyframes slide-in-bottom {
    0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0
    }

    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
    }
}

@-webkit-keyframes bounce-top {
    0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1
    }

    24% {
    opacity: 1
    }

    40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    25%,
    55%,
    75%,
    87% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
    }

    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1
    }
}

@keyframes bounce-top {
    0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1
    }

    24% {
    opacity: 1
    }

    40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
    }

    25%,
    55%,
    75%,
    87% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
    }

    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1
    }
}

@-webkit-keyframes fade-in {
    0% {
    opacity: 0
    }

    100% {
    opacity: 1
    }
}

@keyframes fade-in {
    0% {
    opacity: 0
    }

    100% {
    opacity: 1
    }
}

input {
    outline: none;
}

input:before {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: scale(1.1);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    background-color: white;
    transition: .2s ease-in-out;
}

input:checked {
    background-color: #7f9cf5;
}

input:checked:before {
    left: 1.25rem;
}


.toggle-checkbox:checked {
    right: 0;
    border-color: #68D391;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: #68D391;
}

.hBlock {
    margin: auto;
    align-items: center;
    width: 97%;
}

.hBlock div {
    width: 49%;
}

#recordOptions {
    padding-left: 50px;
    padding-top: 50px;
}

#recordOptions button {
    margin-right: 30px;
}

#recorded {
    border-radius: 8px;
    border: 2px solid black; 
    height: 300px;
    width: 600px
}