body {
    margin: 0;
    padding: 0; /* Added to remove default padding */
}

header {
    position: relative; /* Changed to relative */
}

.banner {
    width: 100vw;
    height: auto; /* Changed to auto to maintain aspect ratio */
    margin: 0; /* Removed margin-bottom and padding-bottom */
    padding: 0;
    display: block;
}

.pp-header {
    height: 20vh;
    width: 90vw;
    position: absolute;
    top: 60%; /* Adjusted position */
    left: 3%; /* Adjusted position */
}
.c-header {
    height: 20vh;
    width: 80vw;
    position: absolute;
    top: 79%; /* Adjusted position */
    left: 9%; /* Adjusted position */
}

section {
    padding-top: 1vh; /* Added padding to move the h1 below the pp image */
}

h1 {
    margin: 0; /* Added to remove default margin */
    padding: 20px; /* Added to give some space around the text */
    text-decoration: underline;
    text-align: center;
}

h2 {
    text-align: center;
    padding: 10px;
}

p {
    font-size: large;
    padding: 10px;
    text-wrap: wrap;
    
}

.video-container {
    overflow: hidden;
}

iframe {
    float: right;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 7vw;
    border-radius: 10px;
    height: 15vh;
    width: 50vw;
}



 
.appCon {
    display: flex;
    justify-content: space-evenly; /* Adjust this to your needs */
  }

  .appImages {
    width: auto; /* Adjust the width as needed */
    height: 15vh; /* Maintain aspect ratio */
  }
  .appImages2 {
    width: auto; /* Adjust the width as needed */
    height: 10vh; /* Maintain aspect ratio */
    padding-top: 5vh;
    border-radius: 10px;
  }

  .email {
    text-align: center;
    font-size: larger;
  }

  .gif {
    width: 40vw;
    height: auto;
    
  }

  .giffCon {
    text-align: center;
    margin-top: -2vh;
  }
  .level {
    float: left;
    width: 50vw;
    height: auto;
    margin-right: 10px;
    margin-top: 2vh;
    margin-left: 10px;

  }
  
  @font-face {
    font-family: "one"; /* Name of the font */
    src: url('../images/detroit_ghetto/one.ttf') format('truetype'); /* Path to your font file */
    /* You can use multiple formats like woff, woff2, etc. for better compatibility */
}

.center {
    text-align: center;
    margin-top: 10vh;
    margin-bottom: -3vh;
}

span {
    font-family: "one";
}

.tip {
    font-family: "one";
    text-align: center;
    font-size: xx-large;
    margin-bottom: -3vh;
    margin-top: 3vh;
}

/* desktop/ or min 769!*/

/* Hide mobile banner image */
@media only screen and (min-width: 667px) {
    /* Default styles */
/* Default styles */
header {
    background-image: url('images/banner800.png');
    background-image: url('images/banner800.png');
    background-size: cover;
    background-position: center;
    width: 100vw; /* Adjust height as needed */
    height: 100vh;
}

.c-navbar {
    width: 50vw;
}

.pp-navbar {
    width: 50vw;
}

.level {
    float: left;
    width: 20vw;
    height: auto;
    margin-right: 10px;
    margin-top: 2vh;
    margin-left: 10px;

  }
  iframe {
    
    
    margin-top: 7vw;
    border-radius: 10px;
    height: 50vh;
    width: 40vw;

}
.bigTitles {
    font-size: xx-large;
} 

p {
    font-size: x-large;
    
}

.gif {
    width: 20vw;
    height: auto;
    
  }

.topMargin{
    margin-top: 15vh;
    margin-bottom: -2vh;
}

.hello {
    font-size: xx-large;
}
.video-container {
    overflow: hidden;
    text-align: center;
}
.banner {
    display: none; /* Hide mobile banner image */
}

header img {
    display: none;
}
.navbar {
    display: flex; /* Show navbar for desktop screens */
    justify-content: space-evenly;
}

/* Reset display for navbar links and navbar images */
.navbar a,
.navbar img {
    display: inline-block;
}

}

@media only screen and (max-width: 667px) {
    /* Default styles */
/* Default styles */
body nav a img {
    display: none;
}





}