/* style.css*/
/* Media Queries */
/* Small Devices*/
/* Define GT America Bold */
@font-face {
    font-family: 'GT America Bold';
    src: url('GT-America-Standard-Bold.otf') format('opentype');
         /* url('gt-america-bold.woff') format('woff'); */
    font-weight: bold;
    font-style: normal;
}

/* Define GT America Regular */
@font-face {
    font-family: 'GT America Regular';
    src: url('GT-America-Standard-Regular.otf') format('opentype');
         /* url('gt-america-regular.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;
}

/* Define GT Super Display Bold */
@font-face {
    font-family: 'GT Super Display Bold';
    src: url('GT-Super-Display-Bold.ttf') format('truetype');
        /*  url('gt-super-display-bold.woff') format('woff'); */
    font-weight: bold;
    font-style: normal;
}

/* Define GT Super Display Medium */
@font-face {
    font-family: 'GT Super Display Medium';
    src: url('GT-Super-Display-Medium.ttf') format('truetype');
        /*  url('gt-super-display-medium.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;
}

@media (min-width: 0px) {
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        padding: 0;
        background-color: black;
        color: white;
        position: relative;
        font-family: 'GT America Regular', sans-serif;
    }
    h1,
    .title {
        font-size: 100px;
        margin: 55px;
        text-align: center;
        color: white;
        font-family: 'GT Super Display Bold', serif;
        line-height: 80%;
    }
    .home,
    .home-buttons {
        width: 100%;
        height: 100vh;
        margin-top: 15px;
        padding-bottom: 50px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
        font-family: 'GT America Regular', sans-serif;
        line-height: 1;
    }
    .disclaimer {
        width: 80%;
        position: absolute;
        bottom: 15%;
        font-size: 30px;
        text-align: justify;
        color: white;
        font-family: 'GT America Regular', sans-serif;
        line-height: 100%;
        opacity: 0.5;
    }
    i {
        font-family: 'GT Super Display Medium', serif;
    }
    .home-header {
        position: absolute;
        top: 10%;
        font-size: 85px;
        font-family: 'GT America Bold', sans-serif;
        padding-bottom: 100px;
    }
    .prayer {
        white-space: pre-wrap;
        text-align: justify;
    }
    .audio-recording-container {
        width: 100%;
        height: 100vh;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .start-pray-button,
	.start-bible-button, 
	.start-confession-button {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 80px;
        color: white;
        cursor: pointer;
        opacity: .5;
        margin-bottom: 50px;
        border: 3px solid white;
        background-color: transparent;
        height: 200px;
        width: 80%;
    }
    .start-pray-button:hover,
	.start-bible-button:hover, 
	.start-confession-button:hover {
        opacity: 1;
    }
    .debug-log {
        position: relative; /* Ensure these elements are positioned on top */
        z-index: 15; /* Higher than the smoke overlay */
        width: 80%;
        position: absolute;
        bottom: 5%;
        font-size: 30px;
        text-align: justify;
        color: white;
        white-space: pre-wrap;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 10px; 
        max-height: 500px; 
        overflow-y: auto;
        font-family: 'GT America Regular', sans-serif;
        line-height: 100%;
    }
    .debug-log.hide {
        display: none;
    }
    .recording-control-buttons-container {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
		flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .cancel-recording-button,
    .stop-recording-button {
        font-size: 70px;
        cursor: pointer;
    }
	.cancel-recording-button:hover
	.stop-recording-button:hover {
        opacity: 0.7;
    }
    .cancel-recording-button {
        color: #7E8182; /* #EA1C24; */
        margin-right: 12px;
        margin-left: 12px;
    }
    .stop-recording-button {
        color: #FFFFFF; /*  #01D6A5;  */
        margin-right: 12px;
        margin-left: 12px;
    }
	.cancel-submit {
		width: 800px;
	}
	.recording-elapsed-time {
		width: 400px;
	}
	.cancel-submit,
    .recording-elapsed-time {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex; 
        justify-content: space-around;
        /*horizontal centering*/
        align-items: center;
        margin-right: 20px;
        margin-left: 20px;
    }
    .red-recording-dot {
		flex: 1 1 auto;
        font-size: 60px;
        color: #EA1C24;
        margin-right: 12px;
        margin-left: 12px;
        /*transitions with Firefox, IE and Opera Support browser support*/
        animation-name: flashing-recording-dot;
        -webkit-animation-name: flashing-recording-dot;
        -moz-animation-name: flashing-recording-dot;
        -o-animation-name: flashing-recording-dot;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
    }
    /* The animation code */
    @keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-moz-keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-o-keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .elapsed-time {
		flex: 1 1 auto;
        font-size: 80px;
    }
    .recording-control-buttons-container.hide {
        display: none;
    }
    .reset-button.hide {
        display: none;
    }
    .reset-button {
        font-family: 'GT Super Display Medium', sans-serif;
        font-size: 50px;
        color: #ffffff;
        cursor: pointer;
        opacity: .5;
        margin-bottom: 30px;
        position: absolute;
        bottom: 15%;
    }
    .reset-button:hover {
        opacity: 1;
    }  
    .ai-content {
        color: #ffffff;
        font-size: 20px;
        width: 80%;
        max-width: 800px;
        margin: 50px auto;
        padding: 10px;
        align-items: center;
        align-self: center;
        align-content: center;
        text-align: center;
    }
	.ai-content.hide {
        display: none;
    }
    .overlay {
        position: absolute;
        top: 0;
        height: 100vh;
        width: 100%;
        background-color: #7E8182
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        justify-content: center;
        /*horizontal centering*/
        align-items: center;
    }
    .overlay.hide {
        display: none;
    }
    .browser-not-supporting-audio-recording-box {
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*horizontal centering*/
        align-items: center;
        width: 317px;
        height: 119px;
        background-color: white;
        border-radius: 10px;
        padding: 15px;
        font-size: 16px;
    }
    .close-browser-not-supported-box {
        cursor: pointer;
        background-color: #7E8182;
        border-radius: 10px;
        font-size: 16px;
        border: none;
    }
    .close-browser-not-supported-box:hover {
        background-color: #7E8182;
    }
    .close-browser-not-supported-box:focus {
        outline: none;
        border: none;
    }
    .audio-element.hide {
        display: none;
    }
	.loading-text {
		font-size: 40px;
		opacity: 0;
		transition: opacity 0.9s ease-in-out;
	}
	.fade-in {
    opacity: 1;
	}
    .text-indication-of-audio-playing-container {
        height: 20px;
    }
    .text-indication-of-audio-playing {
        font-size: 20px;
    }
    .text-indication-of-audio-playing.hide {
        display: none;
    }
    /* 3 Dots animation*/
	.loading-text span,
    .text-indication-of-audio-playing span {
        /*transitions with Firefox, IE and Opera Support browser support*/
        animation-name: blinking-dot;
        -webkit-animation-name: blinking-dot;
        -moz-animation-name: blinking-dot;
        -o-animation-name: blinking-dot;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
    }
	.loading-text span:nth-child(2),
    .text-indication-of-audio-playing span:nth-child(2) {
        animation-delay: .4s;
        -webkit-animation-delay: .4s;
        -moz-animation-delay: .4s;
        -o-animation-delay: .4s;
    }
	.loading-text span:nth-child(3),
    .text-indication-of-audio-playing span:nth-child(3) {
        animation-delay: .8s;
        -webkit-animation-delay: .8s;
        -moz-animation-delay: .8s;
        -o-animation-delay: .8s;
    }
    /* The animation code */
    @keyframes blinking-dot {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes blinking-dot {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-moz-keyframes blinking-dot {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-o-keyframes blinking-dot {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        touch-action: none;
        z-index: 0;
        opacity: 0.4;
    }

    .smoke-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Allows interaction with elements beneath */
        z-index: 0; /* Ensure this is behind other elements */
    }
    
    .audio-recording-container,
    .start-pray-button,
    .start-bible-button,
    .start-confession-button {
        position: relative; /* Ensure these elements are positioned on top */
        z-index: 10; /* Higher than the smoke overlay */
    }

}