/* External CSS style sheet for the Antigh Fest website. Created by Nathan DuCongé, 4/29/23 */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
  body {
    font-family: 'Press Start 2P', system-ui;
    /* font-family: 'Lilliput Steps', sans-serif; */
    font-size: 14px;
  }
  
  h2 {
    font-size: 24px;
  }
  
  /* Modify other styles as needed */
}



body {
  font-family: 'Press Start 2P', system-ui;
  /* font-family: 'Lilliput Steps', sans-serif; */
  background-image: url('UX_UI/IMGZ/BLUE_CROSS_BACKGROUND.png');
  background-color: black;
  background-repeat: repeat;
  overflow-x: hidden;
  cursor: url('UX_UI/CURSORZ/acidpanda.png'), pointer;
  
  /* Additional styles for body */
} 

/*
.cursor-pointer
{
  cursor: url('imgs/sprites/cursors/acidpanda.png');
}
*/
.testingclass {
    position: relative;
    text-align: center;
    height: 100vh;
  }
  
  .trailerVideo, .watchButton, .tvImageClass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .tvImageClass {
    bottom: 10%; /* Adjust the vertical position of the TV image using a percentage */
    right: 200px;
    z-index: 3;
    
  }
  
  .watchButton {
    bottom: 30%; 
    right: 200px;
    z-index: 2;
    display: none;
  }
  
  .trailerVideo { /* Video */
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 700px; /* Set the width to 100% initially */
    height: auto; /* Set the height to auto initially */
    object-fit: contain; /* Use "contain" to fit the video within the dimensions while maintaining aspect ratio */
    
  }

  .stream { /* Stream */
    bottom: 0;
    right: 0;
    z-index: 4;
    width: 700px; /* Set the width to 100% initially */
    height: auto; /* Set the height to auto initially */
    object-fit: contain; /* Use "contain" to fit the video within the dimensions while maintaining aspect ratio */
    display: none;
  }

  /* Media query for screens smaller than 768px (typical for mobile devices)  
@media (max-width: 768px) {
  .watchButton {
    bottom: 200px; 
    right: 50%; 
    transform: translateX(50%);
  }

  .tvImageClass {
    display: none; 
  }
}
*/


  /* For mobile screens smaller than 768px 

  @media (max-width: 768px) {

    .testingclass {
      position: relative;
      text-align: center;
      height: 100vh;
    }
    
    .trailerVideo, .watchButton, .tvImageClass {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .tvImageClass {
      bottom: 10%; 
      right: 200px;
      z-index: 3;
    }
    
    .watchButton {
      bottom: 30%; 
      right: 200px;
      z-index: 2;
    }
    
    .trailerVideo { 
      bottom: 0;
      right: 0;
      z-index: 1;
      width: 700px; 
      height: auto; 
      object-fit: contain; 
    }

  }

  */
  

/* For mobile screens smaller than 768px  
@media (max-width: 768px) {

  .testingclass {
    position: relative;
    text-align: center;
    height: 100vh;
  }

  .watchButton, .tvImageClass {
    position: relative; 
    margin: auto; 
    max-width: 100%; 
  }

  .trailerVideo {
    position: relative; 
    margin: auto; 
    max-width: 80%; 
  }



}
*/


/* For mobile screens smaller than 768px  */
@media (max-width: 768px) {
    .testingclass {
      position: relative;
      text-align: center;
      height: 100vh;
    }
  
    .tvImageClass, .trailerVideo, .stream, .submitButton {
      width: auto; 
      max-width: 600px;
      height: auto;
      max-height: 500px; 
      object-fit: contain;
      margin: auto; 
      position: absolute; /* Change from relative to absolute */
    }
  
    .tvImageClass {
      z-index: 3; /* Set a higher z-index to ensure it's on top */
      /* top: -30%; */
      top: 20%;
      
    }
  
    .trailerVideo {
      z-index: 1; /* Set a lower z-index to place it below the TV image */
      width: 80%; /* Set the width to 100% to fit inside the TV image */
      height: 80%; /* Set the height to 100% to fit inside the TV image */
      top: 28%;
      
    }

    .submitButton
    {
      width: 80%;
      height: 80%;
      top: 80%;
      right: 10%;
      
    }

    .stream {
        z-index: 4; /* Set a lower z-index to place it below the TV image */
        width: 100%; /* Set the width to 100% to fit inside the TV image */
        height: 100%; /* Set the height to 100% to fit inside the TV image */
        top: -80%;
        display: none;
        
      }
  
    .watchButton {
      display: none;
    }
  }
  

  


.parent-img{
  position: relative;
}

.parent-img-responsive{
width:100%;
height:auto;	
}

.child-img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.tv-stream
{
  position: absolute;
  display: inline-block;
  top: 150px;
}

.tv
{
  width: 115%;
  height: auto;
  position: relative;
  top: -520px;
  left: -100px
}



.buffer
{
  padding: -300px;
}

/* Button customization */
.buttons-variant4
{
  height:73px;
  width:626px;
  padding:0px;
  border: none;
}

.rectangle11
{
  background-color:#ffcc34;
  height:73px;
  width:626px;
}

.frame1
{
  background-color:#ffcc34;
  height:62px;
  width:598px;
  padding:15px;
  left:14px;
  top:6px;
  position:relative;
}

.submitafilm
{
  color:#000000;
  text-align:center;
  vertical-align:text-top;
  
  line-height:auto;
  border-style:hidden;
  outline:none;
  top:15px;
  left:0px;
  position:absolute;
  width:586px;
}

/* 
.buttons-variant4 {
  height: 73px;
  width: 626px;
  padding: 0px;
  background-color: #ffcc34; 
  border: none; 
}

.button-content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
*/

/* Apply the custom cursor to specific elements */
a:hover,
button:hover {
  /* Add the class to the elements */
  /* For example, class="cursor-pointer" */
  /* You can target other interactive elements as needed */
  /* Customize the cursor image and behavior */
  cursor: url('UX_UI/CURSORZ/tweetr.png'), pointer;
}

h2 {
  color: white;
  /* Additional styles for h2 */
}

/* Default Style for Discord Chat windows */

.discord-chat {
  width: 100%;
  max-width: 400px;
}

/* Media query for mobile devices */
@media only screen and (max-width: 600px) {
    .discord-chat {
      /* Styles for mobile devices */
      width: 100%;
      max-width: 400px;
    }
  }
  
  /* Media query for desktop devices */
  @media only screen and (min-width: 601px) {
    .discord-chat {
      /* Styles for desktop devices */
      width: 80%;
      max-width: 800px;
    }
  }

/* Font structure 
@font-face {
  font-family: 'Lilliput Steps';
  src: url('UX_UI/FONTZ/Lilliput Steps.otf') format('truetype');
  
  
}
*/