/*--- CSS USED FOR ALL COURSES - DO NOT CHANGE ANYTHING ---*/

/*--- FONTS ---*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:wght@300;700&display=swap');



/*--- ROOT ---*/

:root {

    /*--- TYPOGRAPHY ---*/

    --ft-ff-regular: "Montserrat", sans-serif;



    /*--- COLOURS ---*/

    --clr-primary: #671af4;

    --clr-secondary: #ed9582;

    --clr-terciary: #77B4B5;

    --clr-light: #F1D5A5;

    --clr-gray: #828282;

    --clr-text-dark: #0a0a0a;

    --clr-text-light: #F0F0F0;



    --clr-ter-1-dk: #cccccc;

}



/*--- STATES ---*/

.active {

    display: flex;

}

.d-none {

    display: none;

}

.inactive {

    background-color: #000;

    opacity: 0.2;

    pointer-events: none;

    cursor: pointer;

}

.no-click{

    pointer-events: none !important;

}



/*--- LAYOUT ---*/

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html, body {

    height: 100%;

    width: 100%;

    padding: 0;

    margin: 0;

    font-size: 18px;

    overflow: hidden;

    font-family: var(--ft-ff-regular);

    color: var(--clr-text-dark);

    scroll-behavior: smooth;

}

header#slide-header {

    z-index: 1100;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    min-height: 3em;

    height: 3em;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 0;

    display: none;

}

header#slide-header section.slide-width {

    height: 3em;

}

footer#slide-footer {

    z-index: 1000;

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    min-height: 3em;

    height: 3em;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    height: 0;

    display: none;

}

footer#slide-footer section.slide-width {

    height: 3em;

    height: 0;

    display: none;

}



main#slide-container {

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-position: center center, center center,center center;

    background-repeat: no-repeat, no-repeat, no-repeat;

}

article#slide {

    z-index: 0;

    overflow: hidden;

    border: 1px solid #e7e7e7;

}

article#slide .slide{

    /* background-color: var(--clr-text-light); */

    background-size: 100% 100%;

    background-position: center center;

    background-repeat: no-repeat;

}

menu#slide-menu {

    z-index: 1000;

    opacity: 0;

    position: absolute;

    top: 1em;

    left: 1em;

    width: 25%;

    max-height: calc(100% - 1em);

    margin: 0;

    padding: 1em;

    transition: all 1s ease;

    transform: translateY(-500%);

}

menu#slide-menu.active {

    opacity: 1;

    transform: translateY(0%);

}

menu#slide-menu section a {

    padding: 0.5em;

    float: left;

    clear: left;

    font-size: 1em;

    line-height: 100%;

    margin: 0;

    width: 100%;

}



main#slide-container section.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* overflow-x: hidden; */

    z-index: 0;

}

canvas {

    width: 100%;

    height: 100%;

}



/*--- SCREEN ROTATION ---*/

#screen-rotation {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: none;

    z-index: 100000;

    opacity: 0;

    transition: opacity 1s ease;

    background-color: rgba( 0, 0, 0, 0.5 );

    align-items: center;

    justify-content: center;

    flex-direction: row;

    color: #ffffff;

}

@media only screen

    and ( orientation: portrait ) {

	#screen-rotation {

	    display: flex;

	    opacity: 1;

	}

}



/*--- INDEX.HTML ELEMENTS ---*/

#preload-assets {

    display: none;

}

#loader {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 10000;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    background-color: white;



    .spinner{

        display: inline-flex;

        gap: 10px;

    }

    /* Estilo para cada bolinha */

    .bounce1, .bounce2, .bounce3 {

        width: 15px;

        height: 15px;

        border-radius: 50%;

        background-color: var(--clr-primary); /* Cor da bolinha */

        animation: bounce 1.4s infinite ease-in-out;

    }



    /* Delay para criar o efeito de pulo escalonado */

    .bounce1 {

        animation-delay: -0.32s;

    }



    .bounce2 {

        animation-delay: -0.16s;

    }

}





/* Animação de pulo */

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-20px); /* Sobe */

    }

    60% {

        transform: translateY(-10px); /* Meio caminho */

    }

}



.player-controls-container{

    position: absolute;

    right: 30px;

    top: 25px;

    display: inline-flex;

    gap: 25px;

    z-index: 999;

}



.player-controls {

    z-index: 999;

    width: 40px;

    cursor: pointer;

}

.player-controls:hover {

    scale: 1.05;

}



/*--- CLOSING WINDOW ---*/

#closing-window {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba( 0, 0, 0, 0.75);

    z-index: 100000;

    backdrop-filter: blur(16px);

}

#closing-window-buttons {

    display: flex;

    gap: 20px;

    justify-content: center;

    margin-top: 32px;

}

#closing-window-message {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate( -50%, -50%);

    max-width: 100%;

    padding: 1em 3em;

    color: var(--clr-text-light);

    font-family: var(--ft-ff-bold);

}

#closing-window-message p {

    display: block;

    text-align: center;

    color: var(--clr-text-light);

    font-size: 32px;

    font-family: var(--ft-ff-regular);

}

#closing-window-yes, #closing-window-no {

    padding: 20px 40px;

    cursor: pointer;

    color: var(--clr-text-light);

    font-family: var(--ft-ff-regular);

    font-size: 24px;

    background-color: var(--clr-primary);

    /* border-radius: 10px; */

}

#closing-window-yes:hover, #closing-window-no:hover {

    background-color: var(--clr-text-light);

    color: var(--clr-primary);

}



/*--- LLWINDOW ---*/

#llwindow {

    font-size: 1em;

    display: none;

    position: fixed;

    top: 1em;

    left: 2em;

    color: #00dd00;

    background-color: #000000;

    z-index: 100000;

    font-family: 'Courier New', Courier, monospace;

    min-width: 20em;

    max-width: 50%;

    max-height: 90%;

    box-shadow: 0 0.25em 0.5em rgba( 0, 0, 0, 0.75 );

    transition: box-shadow 0.5s ease;

    opacity: 0.9;

}

#llwindow:active {

    box-shadow: 0 0.5em 1em rgba( 0, 0, 0, 0.75 );

}

#llwindowheader {

    background-color: #00dd00;

    color: #000000;

    cursor: move;

    cursor: grab;

    text-align: right;

    width: 100%;

    float: left;

    padding: 0;

    margin: 0;

}

#llwindow h2 {

    font-size: 1em;

    margin: 0;

    float: left;

    padding: 0.4em 1em;

}

#llwindow main {

    float: left;

    clear: both;

    width: 100%;

    padding: 0 1em;

}

#llwindow main p {

    font-size: 0.75em;

    padding: 0.5em;

    margin: 0.5em 0.5em 0 0;

    max-width: calc( 100% - 0.5em );

    float: left;

    border: 1px solid #00dd00;

}

.llwindow-clear {

    clear: both;

    float: left;

    width: 100%;

    margin-top: 0.25em;

}

#llwindow-zork {

    font-size: 0.75em;

    min-width: calc(100% - 0.5em);

    max-width: calc(100% - 0.5em);

    width: calc(100% - 0.5em);

    color: #00dd00;

    margin: 0.5em 0 0 0;

    background-color: #000000;

    border: 1px solid #00dd00;

    height: 300px;

    resize: none;

}

#llwindow-zork:focus {

    outline:none;

}

#llwindow footer {

    padding: 0.5em 0 0 0;

    width: 100%;

    float: left;

    text-align: center;

}

#llwindow-close, #llwindow-minimize, #llwindow-maximize {

    font-size: 1em;

    margin: 0;

    padding: 0.5em;

    float: right;

    text-align: center;

}

.llwindow-control {

    font-size: 1em;

    margin: 0;

    padding: 0.25em 0.5em;

    padding: 0.25em;

}

#llwindow-go-input {

    font-size: 0.75em;

    width: 2em;

    margin: 0.5em -4px;

    padding: 0.25em;

    color: #00dd00;

    background-color: #003700;

    border: 1px solid #00dd00;

}

#llwindow-go-input:focus {

    outline:none;

}

#llwindow-save-input {

    font-size: 0.75em;

    min-width: calc(100% - 0.5em - 2.5em);

    max-width: calc(100% - 0.5em - 2.5em);

    width: calc(100% - 0.5em - 2.5em);

    margin: 0.5em 0 0 0;

    padding: 0.25em;

    color: #00dd00;

    background-color: #003700;

    border: 1px solid #00dd00;

}

#llwindow-save-input:focus {

    outline:none;

}

#llwindow a, #llwindow a:visited {

    font-family: 'Symbola';

    color: #00dd00;

    background-color: #000000;

    text-decoration: none;

    font-weight: bold;

}

#llwindow a:hover, #llwindow a:active {

    background-color: #00dd00;

    color: #000000;

    text-decoration: none;

}



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

    #llwindow {

	min-width: 20em;

	max-width: 33%;

    }

}

@media only screen and (max-width: 1280px)  {

    #llwindow {

	width: 90%;

	max-width: 90%;

    }

    #llwindow-zork {

	max-height: 3em;

    }

    .llwindow-clear {

	margin-top: 0;

    }

}



/*--- MOBILE VERSION ---*/

body.mobile {

    font-size: 12px;

}



/*--- PARALLAX ---*/

article#slide {

    /* need to comment for parallax */

    /* overflow: hidden; */

}



main#slide-container section.slide {

    /* need to uncomment for parallax */

    overflow-x: hidden;

    overflow-y: hidden;

}