/*Reset some ddefault styles */
*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

@font-face {
        font-family: funnyFont;
        src: url('Carnevalee Freakshow.ttf');
}

body{
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.6;
        background-color: antiquewhite;
        color: black;
}

.navbar{
        background-color: rgb(21, 153, 3);
        color:  antiquewhite;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1em 2em;
}

.logo{
        color: blue;
        font-size: 2em;
        font-weight: bold;
        font-family: funnyFont;
}

.nav-links {
        list-style: none;
        display: flex; 
}

.nav-links a{
        display: block;
        color: antiquewhite;
        text-decoration: solid;
        text-align: center;
        padding: 10px 20px;
        transition: background 0.3s ease;
}

.nav-links a:hover,
.nav-links a:active{
        background-color: blue;
        border-radius:  4px;
} 

strong {
        font-weight: bold;
        color: red;
        font-style: italic;
}

h1, h2 {
        font-family: 'funnyFont';
        color: blue;
}

.intro {
        padding: 2em 4em;
        text-align: center;
}

.shufflin {
        padding: 60px 20px;
        text-align: center;
        background: url(images/background.png) center bottom;
        color:blue;
}

.instruct {
        padding: 2em 2em;
        text-align: center;
        margin: 10px;
        background-image: radial-gradient(circle, yellow, green);
}
.mailing {
        padding:60px 20px;
        text-align: left;
        margin: 20px;
}

fieldset {
  border: 2px solid blue;
  padding: 50px;
  margin: 15px;
  background-image: radial-gradient(circle, yellow, green);  
}

table, th, td {
    border: 2px solid blue;
    text-align: center;
    margin: auto;
}

ol, ul { 
      list-style-type: none;
}

.iframe-container {
    width: 70%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    margin: auto;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

footer{
        background-color: blue;
        color:aliceblue;
        text-align: center;
        padding: 15px 0;
        position: fixed;
        width: 100%;
        bottom: 0;
}

@media screen and (max-width: 600px) {
        .navbar {
                flex-direction: column; /* Stacks items vertically */
                align-items: stretch; /* Makes buttons take full width */
        }
         .nav-links {
                display: block; /* Ensures links behave like blocks for full width and padding */
                width: 100%; /* Optional: ensures full width */
                margin: 5px 0; /* Adds spacing between stacked buttons */
    }
  	.instruct {
    	        text-align: left;
  	}
}