/* CSS RESET */
*{
 margin: 0;
 padding: 0;
 
 font-family: arial, sans-serif;
 

 box-sizing: border-box;
}

nav{
 padding: 0 20px;
}

ul{
 list-style: none; /* Removes Dots */
}

.clear{
 clear: both;
}

.photo{ /* dress code class */
 width: 100%;
 object-fit: cover;
}

#logobox{
 float: left;
}

#logobox a{
 display: block;  /* To change height, must be block and not inline */
 font-size: 30px;
 color: black;
 text-decoration: none;
 margin-top: 8px;
}

#linkbox{
 float: right;
}


#linkbox ul li{
 float: left;
}

#linkbox ul li a{
 display: block; /* Can't add padding to inline, must change to block */
 padding: 15px;
 color: black;
 text-decoration: none;
}

#hero-heading{
 text-align: center;
 margin: 50px 0;
}

#mainbox{
 width: 90%;
 margin: 0 auto;
}

.purple{
 height: 500px;
 margin: 50px 0;
}

.layoutbox{
 float: left;
 width: 50%;
 position: relative;
 height: 500px;
}

.photo-height{
 height: 500px;
}

.text-middle{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.cta-button{
 display: block;
 padding: 5px 10px;
 width: 150px;
 margin: 50px auto 0 auto;
 background-color: #e96189;
 color: white;
 text-decoration: none;
 text-align: center;
 border-radius: 100px;
}