body {
    margin: 0;
    font-family: 'Futura', serif;
    background-color: black;
    color: white;
    cursor: url('images/cursorvinyl.jpg'), auto;
}

 	 main {                                       
    max-width: 992px;
    margin: 0 auto;   				    /*centers*/ 
}
                               /*logo+ navigation+ icons*/ 
  	header {
    position: relative;
    padding: 8px;
    border-bottom: 0.2px solid white;
}


   .logo, .icons, nav {
    display: inline-block;         /*side by side*/ 
    vertical-align: middle;     /*aligns them vertically*/
}

   .icons { 
    float: right; 
}

   .logo img {
    float: left; 
    width: 90px;
    height: 55px;
    object-fit: contain;     /*so the pic doesnt crop*/ 
    display: block;             /*removes spacing*/ 
}   


  	nav a {
    margin: 0 10px;
    text-decoration: none;      /*removes underlines under words*/ 
    color: white;
    font-weight: bold;
}




	
	
	
	
	

    .main {            
      position: relative;
      height: 600px; 
      border-bottom: 2px solid black;
}

    .main img {
      width: 100%;
      height: 100%;
      object-fit: cover;   /*fills the whole space*/     
}

    .main::before {                 /*color layer on top of the main picture*/
      content: "";                      
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
}
    
    .main-text {                                  
 	 position: absolute;   /*text over the image*/
 	 color: white;    
  	 top: 50%;
 	 left: 50%;             
 	 transform: translate(-50%, -50%);  	 /*centers the text in the image*/ 
	 text-align: center;
}
    
    .main-text h1 {
  	 font-size: 42px;
     line-height: 1.5;
 	 margin-bottom: 15px;      /*space under it*/ 
}
    
	.content {
 	 font-size: 26px;
  	 padding: 90px 20px;
 	 text-align: center;
}
	
	
	.content p {                  /*paragraph 'about us'*/
     font-size: 21px;                                   
 	 line-height: 2.8;
 	 max-width: 1400px;
 	 font-family: 'Futura', serif;
     margin: auto;
     display: block;
     background-color: #111;   /* makes the box visible in light gray */
     padding: 60px; 
     border-radius: 10px;        /*rounds the corners*/      
     border: 1px solid #333;          /* thin outline */
}
       
	
     .main-text button {
      padding: 15px 20px;
      background: white;
      border: 1px solid white;
      color: black;
      cursor: pointer;
      font-family: 'Futura', serif;
      text-transform: uppercase; 
}
      
      
      
      
      
      
      
      
     
	.soundsystem-content {
     font-size: 18px;
     white-space: nowrap;               /* pic+box stay in one line */
}

	.sound-img,
	.soundsystembox {
     display: inline-block;
     vertical-align: middle;  /* so they are aligned on the same height besides each other in the center */ 
}   
      
	.sound-img {
     margin-right: 20px;
     width: 800px;
     height: 500px;
} 

	.soundsystembox {
     background: #111;
     border-radius: 10px;
     width: 600px; 
}

	.title {
     text-align: center;
     font-size: 36px; 
}


    									
	.item {                 /* info inside the sound system box*/
     padding: 15px 3px;
     border-bottom: 1px solid #898989;
}

	.item span {
     color: #bbb;
     font-size: 14px;
}

	.item p {
    margin: 5px; 
    font-weight: bold;
}




            
	.footer {          
   	 margin-top: auto;
     text-align: center;
     padding: 20px;
     color: white;
}


footer {
  clear: both;
}

 										 /* page 2 */ 



	.songs {
	font-size: 12px;
  	text-align: center;
  	font-family: 'Futura', serif;
    text-transform: uppercase; 
    padding-top: 22px;
  	line-height: 8;
}
  
  
	.songs img {
  	margin-bottom: -40px;     /* gap between image and title */
    display: block;      /*stacked boxes of albums*/ 
    margin: 0 auto;                  /* centers it */
}
  

	.songs p {
    margin-top: -20px;
  	border: 1px solid gray;      /*little box around the title */ 
  	border-radius: 6px; 
 	display: inline; 
    padding: 4px 8px;
}


	.album-of-the-week {
  	text-align: center;
  	padding: 10px;
  	margin-top: 4px;
    margin-bottom: 0px;
    width: 80%;
    margin: 0 auto;
}


	.heading p { 
    text-align: center;
    color: #bdbdbd;
    margin-top: 4px;
    font-size: 16px;
    margin-bottom: 60px;
}



	.heading h1 { 
	text-align: center;
}





	.album-of-the-week h2 {
    border: 1px solid gray;      /*little box around the title */ 
    border-radius: 6px; 
    display: inline; 
    padding: 4px 8px;
    color: #EDE8D0;
}



	.infoalbumoftheweek img,
	.infoalbumoftheweek p {
 	 display: inline-block;
  	 vertical-align: top; /* aligns text with top of image */
     padding: 30px 40px;
}


	 .infoalbumoftheweek img {
 	  width: 300px;
}

  
 	.infoalbumoftheweek p {
  	 width: 500px;
     line-height: 3;
     font-family: 'Futura', serif;
     color: white;
}



   .album-of-the-week p {
    max-width: 500px;       /* keeps text readable */
    text-align: center;  
}


	.button {
     display: inline-block;
	 padding: 16px 28px;
  	 background-color: white;
  	 color: black;
   	 text-transform: uppercase;
  	 text-decoration: none; 
  	 border-radius: 80px;
  	 margin-top: 30px;
}











									 /* page 3 */ 

	.menu h2 {
    font-size: 32px;
}

	.food-menu {
    text-align: center;
}

	.food-box h2 {
	font-size: 32px;
}
	

	.food-box {
	.food-box {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
    background: #111;
    color: white;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
}


	.food-box img { 
     width: 100%;
     display: block;
     margin: 0 auto;
}
  
  
	.food-box h3 {     /*title*/ 
     margin-top: 0;
     margin-bottom: 15px;
     border-bottom: 1px solid #898989;
     padding-bottom: 8px;
     font-size: 20px;
     letter-spacing: 1px;
}


	.food-item {
     margin-bottom: 14px;
}
 
	.food-item h4 {
     margin: 0;
     font-size: 16px;
}


	.food-item p {
      margin: 3px 0 0;
     font-size: 13px;
     color: #d3d3d3;
}







     						    /*drinks*/ 
	.menu h2 {
     font-size: 32px;
}

	.drink-menu {
     text-align: left;    
}

	.drink-header img {
     width: 100%;
     display: block;
}

	.drink-header {
     text-align: center;
     clear: both;
}

	.drink-box {
     float: left;
     width: 33.33%;
     box-sizing: border-box;
	 background: #111;
     color: white;
     padding: 10px;
     border-radius: 10px;
     text-align: left;
}

	.drink-box h3 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #898989;
    padding-bottom: 8px;
    font-size: 20px;
    letter-spacing: 1px;
}


	.drink-item {
     margin-bottom: 14px;
}


	.drink-item h4 {
     margin: 0;
     font-size: 16px;
}


	.drink-item p {
     margin: 3px 0 0;
     font-size: 13px;
     color: #d3d3d3;
}





                					   /* page 4 */ 

	
	.map  { 
    max-width: 800px;
    margin: 0 auto;
}
     text-align: left; 
}


	.map img { 
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


	.info-item span,.info-item p, .info-item h4 {
     display: inline-block;
     vertical-align: middle;
}


	.contact-info {
     text-align: center;
}


	.info-box {
     display: inline-block;
     width: 20%;
     vertical-align: top; 
     margin: 10px;
     padding: 20px;
     text-align: center;
}


	.contact-section {
	text-align: center;
	padding: 10px; 
	border-radius: 10px;
	border: none; 
}

	.contact-section input,	.contact-section textarea {
    width: 60%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
}

	.contact-section input {
    height: 45px;
}

	.contact-section textarea {
    height: 150px;
}

	.contact-section button {
	height: 45px;
	font-family: 'Futura', serif ;
	border-radius: 10px;
}