@font-face {
    font-family: "enchanted_land";
    src: url("fonts/enchanted_land.otf");
}

header {
    width: 100%;
    height: 65px;
    border-bottom: 3px solid black;
    background-color: #ED1C24;
    color: #39295E;
    font-family: 'enchanted_land';
    font-size: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

body {
    margin: 0;
    padding: 0;
}

.main_content {
    position: relative;
}

.background_content {
    width: 100%;
    height: 800px;
    background-image: url("images/houseInterior.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wizard_image img {
   position: absolute;
   width: 275px;
   left: 17%;
   height: auto;
   bottom: 0px; 
}

.wizard_textbox {
    position: absolute;
    bottom: 60%; /* Adjust positioning */
    left: 16%; /* Adjust positioning */
    background-image: url('images/scroll.png'); /* Your scroll image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: black;
    padding: 20px;
    width: 250px; /* Adjust as needed */
    height: 200px;
    opacity: 0.8; /* Adjust opacity if needed */
    display: flex;
    justify-content: center;
    align-items: center;
}
.wizard_quote {
    font-family: 'enchanted_land';
    max-width: 200px;
    font-size: 1.3em; /* Adjust font size as needed */
    text-align: center;
    flex: 1;
}

.crystal_ball img {
    position: absolute;
    width: 80px;
    left: 39%;
    height: auto;
    bottom: 28%; 
}

.candle img {
    position: absolute;
    width: 25px;
    right: 42%;
    height: auto;
    bottom: 28%;  
}

.jeff img {
    position: absolute;
    width: 75px;
    right: 40.5%;
    height: auto;
    bottom: 36%; 
}

.jeff_textbox {
    position: absolute;
    bottom: 55%; /* Adjust positioning */
    right: 30%; /* Adjust positioning */
    background-image: url('images/scroll.png'); /* Your scroll image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: black;
    padding: 20px;
    width: 250px; /* Adjust as needed */
    height: 200px;
    opacity: 0.8; /* Adjust opacity if needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

.dad_joke {
    font-family: 'enchanted_land';
    max-width: 200px;
    font-size: 1.3em; /* Adjust font size as needed */
    text-align: center;
    flex: 1;
}

.frog_image img {
    position: absolute;
    width: 100px;
    right: 15%;
    height: auto;
    bottom: 13%;
}
 
 .frog_textbox {
     position: absolute;
     bottom: 27%; /* Adjust positioning */
     right: 9%; /* Adjust positioning */
     background-image: url('images/scroll.png'); /* Your scroll image */
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     color: black;
     padding: 20px;
     width: 250px; /* Adjust as needed */
     height: 200px;
     opacity: 0.8; /* Adjust opacity if needed */
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .frog_quote {
     font-family: 'enchanted_land';
     max-width: 200px;
     font-size: 1.3em; /* Adjust font size as needed */
     text-align: center;
     flex: 1;
 }

.footer_content {
    width: 100%;
    height: 20px;
    border-top: 2px solid black;
    background-color: #ED1C24;
    color: #39295E;
    font-family: 'enchanted_land';
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
}

.credit_name {
    text-align: center;
    flex: 1;
}

a:hover {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 35px; 
}