html{
background-color: black;
}


#container {
background-color: #426b3f; /* Color hex (color code) of the green used  */
height:1100px;
margin-bottom: 40px;
width: 80%;
margin-left: 10%;
border-radius: 15px;
float: left;
clear: both;

}


.headerofmenus {
width: 87%;
margin-left: 5%;
background-color: black;
height: 200px;
border-radius: 3px;
border-width: 2.6px;
border-style: solid;
border-color: white;
clear: both;
float: left;
}

.menubox{
background-color: #426b3f;
width: 85px;
height: 85px;
margin-left: 75px;
float: left;
border-radius: 10%;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 19px;
align-items: center;
display: flex;
font-weight: bold;
justify-content: center;
}

.contentcarrier {
background-color: black;
width: 80%;
margin-left: 150px;
height: 500px;
margin-top: 15px;
border-radius: 30px;
font-size: 50px;
color: white;
text-align: center;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
}

/*Changes basic image properties instead of specific ones */
img{
width: 700px;
margin-top: 10px;
border-radius: 10px;
}

/*Stands for who is yeat*/
.wiy{
width: 30%;
height: 300px;
background-color: black;
float: left;
clear: both;
margin-left: 150px;
border-radius: 15px;
margin-top: 15px;
font-family: arial;
font-size: 15px;
align-items: center;
display: flex;
font-weight: bold;
justify-content: center;
color: white;
}


.learnmore{
width: 30%;
height: 300px;
background-color: black;
float: left;
clear: both;
margin-left: 900px;
border-radius: 15px;
margin-top: -300px;
font-family: arial;
font-size: 15px;
align-items: center;
display: flex;
font-weight: bold;
justify-content: center;
color: white;
}

.madeby{
width: 5%;
justify-content: center;
background-color: #426b3f;
display: flex;
align-items: center;
color: white;
float: left;
clear: both;
margin-left: 15px;
margin-top: 15px;
}





.fp{
background-color: #716b6f ;
width: 50px
margin-left: 5px;
height:100px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center
}

}

.up2mesongs{
background-color: gray ;
width: 90%;
margin-left: 5px;
height: 1700px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center
}


.y2093{   /*reason of name is because you cant start a name with a number for all of them with a y*/
background-color: #2c4142 ;
width: 90%;
margin-left: 5px;
height: 1700px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center
}

.up2mesongs{
background-color: #716b6f ;
width: 90%;
margin-left: 5px;
height:1700px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center
}



.fourlsongs{
background-color: #3d5d63;
width: 90%;
margin-left: 5px;
height: 1600px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center
}


.y2alive{
background-color: #a3c09f ;
width: 90%;
margin-left: 5px;
height: 1600px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center
}

.afterlyfe{ 
background-color: gray ;
width: 90%;
margin-left: 5px;
height: 1710px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
}




.lyfe{
background-color: gray ;
width: 90%;
margin-left: 5px;
height: 1050px;
margin-top: 15px;
border-radius: 25px;
font-size: 50px;
color: white;
float: left;
clear: both;
font-weight: bold;
font-family: sans-serif;
text-align: center;
}


.twoaliveTitle{
font-size: 150px;
color: white;
margin-top: -15%;
margin-left: -31%;
}


.lyfeTitle{
font-size: 150px;
color: whitesmoke;
margin-top: -15%;
margin-left: -36%;
}

.afterlyfeTitle{
font-size: 150px;
color: white;
margin-top: -15%;
margin-left: 20%;
}

.y2093Title{
font-size: 150px;
color: white;
margin-top: -15%;
margin-left: -36%;
}


.y4LTitle{
font-size: 150px;
color: white;
margin-top: -15%;
margin-left: -40%;
}

.up2meTitle{
font-size: 150px;
color: white;
margin-top: -15%;
margin-left: -25%;
}


.afterlyfesonglink{
background-color: black;
width: 75%;
height: 50px;
margin-left: 400px;
float: left;
border-radius: 5px;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 22px;
font-weight: bold;
}


.twoAlivesonglinks{
background-color: black;
width: 75%;
height: 50px;
margin-left: 400px;
float: left;
border-radius: 5px;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 22px;
font-weight: bold;
}

.fourLsonglinks{
background-color: black;
width: 75%;
height: 50px;
margin-left: 400px;
float: left;
border-radius: 5px;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 22px;
font-weight: bold;
} 


.up2mesonglinks{
background-color: black;
width: 75%;
height: 50px;
margin-left: 400px;
float: left;
border-radius: 5px;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 22px;
font-weight: bold;
}

.y2093songLinks{
background-color: black;
width: 75%;
height: 50px;
margin-left: 400px;
float: left;
border-radius: 5px;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 22px;
font-weight: bold;
}

.lyfesonglinks{
background-color: black;
width: 75%;
height: 50px;
margin-left: 400px;
float: left;
border-radius: 5px;
margin-top: 15px;
color: white;
font-family: cursive;
font-size: 22px;
font-weight: bold;
}



.tipbox{
font-size: 13px;
color: white;
float: left;
clear: both;
margin-top: -4%;
margin-left: 95%;
}


.warning{
font-size: 12px;
}