header{
background-color: crimson;
padding:20px;
text-align:center ;
position: fixed;
width:100%;
z-index: 1;
top:0;
left:0;

}

header h1{
    color: white;
    border: 8px solid white;
    padding: 6px 12px;
    display: inline-block;
    border-radius: 35px;

}

.mario{
    position:relative;
   
}
.mario img{
    max-width: 110%;
     
}
.mario .welcome{
    background: rgb(221, 176, 124);
    color: rgb(110, 23, 250);
   padding:30px;
   position: absolute;
   left:0px;
   top:30%;

}
.mario h2{
    font-size:40px;
}
.mario h2 span{
    font-size: 1.3em;
}
nav{
    background-color: #f4f4f4;
    padding: 20px;
}
nav ul{
    white-space: nowrap;
    max-width: 1200px;
    margin: 0 auto;
}
nav li{
    width: 30%;
    display: inline-block;
    font-size:40px;

}
nav li a{
    text-decoration:none;
    color: #4b4b4bee;
}
nav li a.join{
    color: #f63232;

}
main{
    max-width: 100%;
    width: 1200px;
    margin: 8px;
    padding:0 40px;
    box-sizing: border-box;

}
article h2{
    color:#f63232;
    font-size: 50px;

}
article p{
    line-height: 2em;
    color: #4b4b4b;
    font-size: 40px;
}
.images{
    text-align: center;
    margin:80px 0;
    white-space:nowrap;

}
.images li{
    dispay:inline-block;
    width:40%;
    margin: 20px 5%;

}
.images li img{
    max-width: 100%;

}
.join{
    background: #f4f4f4;
    text-align: center;
    padding: 60px 20px;
    color: #4b4b4b;
}
.join h2{
    font-size: 36px;
}
form input{
    margin:20px 0;
    padding: 10px 20px;
    font-size: 24px;
    border-radius:28px;
    border:4px solid rgb(48, 47, 47);
}
footer{
    baclground: #f63232;
    color: rgb(83, 3, 3);
    padding:10px;
    text-align:center;
}