/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

    body {
    	font-family: Arial;
        background-color: black;
        background-image:url('magic-show.jpg');
      color: black;
    }
       
    button {
        background: yellow;
        font-family: verdana;
        font-size: 1.2em;
    } 
    
    a{
 text-decoration:none;
}

    @font-face {
    	font-family: Smythe; 
        src: url(Smythe-Regular.ttf);
    }
    
    @font-face {
    	font-family: Fjalla; 
        src: url(FjallaOne-Regular.ttf);
    }
    
    p {
    	font-family: Smythe;
      color: #80FFFF;
    	font-size: 2em;
    }
    
    H1 {
    	font-family: Smythe;
      color: #80FFFF;
        font-size: 2.9em;
    }


    H2 {
    	font-family: Smythe;
      color: yellow;
        font-size: 2.2em;
    }
    
    H3 {
    	font-family: Tahoma;
      color: white;
        font-size: 1.2em;
    }
    
    H4 {
    	font-family: Comic Sans MS;
      color: red;
            font-weight: bold;
        font-size: 1.3em;
    }
    
        
    H5 {
    	font-family: Fjalla;
      color: black;
        font-size: 1.3em;
    }
    
    

    .youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 90%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
    
    
/* NavBar */  
    



/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #FFFC3D;
  font-family: Fjalla;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 1.5em;
  color: black;
  text-align: center;
  padding: 9px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 1.5em;
  border: none;
  outline: none;
  color: black;
  padding: 9px 16px;
  background-color: #FFFC3D;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 9px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}











  
/* table blocks */


  .header-box {
        background-color: #FFFC3D;
    }

  .clear-section {
        width: 90%;
        margin: 8px;
        padding: 5px 20px;
    }
    
 .main-section {
        background: white;
        width: 80%;
        margin: 8px;
        border: 3px solid black; 
        padding: 5px 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.30);
    }
    
  .show-section {
        background-image:url('texture.jpg');
        background-size: cover;
        width: 70%;
        margin: 8px;
        border: 3px solid white; 
        padding: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.30);
    }
    
  .footer {
        background: cyan;
        width: 300px;
        margin: 7px;
        border: 1px solid black; 
        padding: 2px 2px;
    }   
 
 /* vards */
 
   
   .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    } 
        
  .card {
        width: 300px;
        margin: 0px;
        padding: 10px 10px;
    } 
    
  .midcard {
        background-color: white;
        width: 165px;
        margin: 6px;
        border: 1px solid black; 
        border-radius: 22px;
        padding: 8px 8px;
    } 
    
  .invisiblecard {
        width: 90px;
        margin: 1px;
        padding: 1px 1px;
    }  

  .btn {
        border-radius: 1000px;
        color: blue;
    }