/* default small devices */

[class*="col"] {
    grid-column-end: span 12;
}


/* Below 600px Tablets */

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

    .sm1 {
        grid-column-end: span 12;
    }

    .sm2 {
        grid-column-end: span 6;
    }

    .sm3 {
        grid-column-end: span 4;
    }

    .sm4 {
        grid-column-end: span 3;
    }

    .sm6 {
        grid-column-end: span 2;
    }

    .sm12 {
        grid-column-end: span 1;
    }
}

/* Above 601px Tablets */

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

    .md1 {
        grid-column-end: span 12;
    }

    .md2 {
        grid-column-end: span 6;
    }

    .md3 {
        grid-column-end: span 4;
    }

    .md4 {
        grid-column-end: span 3;
    }

    .md6 {
        grid-column-end: span 2;
    }

    .md12 {
        grid-column-end: span 1;
    }
}

/* Above 1025px Desktops */

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

    .col1 {
        grid-column-end: span 12;
    }

    .col2 {
        grid-column-end: span 6;
    }

    .col3 {
        grid-column-end: span 4;
    }

    .col4 {
        grid-column-end: span 3;
    }

    .col6 {
        grid-column-end: span 2;
    }

    .col12 {
        grid-column-end: span 1;
    }
}




/* The starting code came from the sources 
https://www.w3schools.com/css/css3_flexbox.asp 
https://www.w3schools.com/css/css3_flexbox_container.asp 

Corrections and additions were added by people I met from the discord server "The Coding Den"

This game helped me understand flex boxes a bit better
https://flexboxfroggy.com

And I learnt more info about how flex boxes needed to be used in my case from these sources 
https://stackoverflow.com/questions/73146613/css-flexbox-button-layout
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox

Explanations were also provided by people in dms that I met from the discord server "The Coding Den" aswell as "The Programmer's Hangout"
*/
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    flex-direction: column;
    /* Citation ends here */
    background: url('../img/eight_ball_background.jpg') center center fixed;
}





#Interaction form {
    display: flex;
    margin-bottom: 0px;
    margin-top: 30px;
    /* These lines of code my tutor Robert Hollander explained to me */
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    /* Citation ends here */
}

#q {
    border-radius: 30px;
    /*padding: .5em;*/
    font-size: 3em;
    text-align: center;
    display: inline-block;
}


a {
    border-radius: 30px;
    padding: .5em;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    color: #47deff;
    background-color: #2a2a2a;
    font-family: Raleway, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .05em;
    transition: all .5s ease;
    width: 50%;
}

a:hover {
    background-color: #2d3bfe;
}


#title {
    font-size: 90px;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
}


/* Explained and walked through how to do it by my tutor Robert Hollander */

.eightDiv {

    position: relative;
    width: 510px;
    height: 505px;
    display: block;
    overflow: hidden;
}

.eightDiv img {


    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: opacity 1s ease;
    display: block;
}


.fadeOut {
    opacity: 0;
}

.fadeIn {
    opacity: 1;
}


.eightBallFade {
    opacity: 1;
    z-index: 2;
}

.eightBallBackground {
    z-index: 1;
}



.fadeOut {
    animation: fadeOut 1s forwards;
}

/* Citation ends here */

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Added by my tutor Robert Hollander to assist me */
.fadeIn {
    animation: fadeIn 5s forwards;
}

/* Citation ends here */



@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* Added by my tutor Robert Hollander */

.8ball {
    transition: opacity 1s ease-out;
}

/* Citation ends here */