/* Media Queries */
/*if it's 700px or bigger*/

@media (min-width: 700px) {
    
    
	.header,
	.main-nav {
		display: flex;
		
	}
	.header {
align-items: space-evenly;
display: flex;
flex-direction: row;
margin: 0;
max-width: 100%;
z-index:4;

justify-content: space-evenly;

	}
}


	.header {

	}

#show-more
{
    
 width:300px;
 background: rgba(255,255,255,0.5);
 border-color: rgba(255,255,255,0.5);
position:relative;
  grid-template-columns: auto;

margin-right:900;
margin-top: 4em;

}


/* Tablet & Mobile */
/*if it's 768px or smaller*/
@media (max-width: 768px) {
    
    
    .toggle-button {
        display: flex;
    }

    .navbar-links {
display: none;
width: 100%;
        
    }

.navbar {   
align-items: flex-start;
background-color:;
flex-direction: column;
    }

.navbar-links ul { 
background-color: rgba(174,225,255,1);
flex-direction: column;
 width: 100%;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-links li a {
        padding: .7em 1em;
    }

    .navbar-links.active {
        display: flex;
    }
    
    .box-grunge {
    align-items:center;  
   
   justify-content: center;
    position:relative;
   width:90vw;

}

.text-container {
  align-items:center;   
   justify-content: center;
    margin: auto;
    position:relative;
   text-align: justify;
     max-width:80vw; 
}

    .footer {
        position: relative;
    }

    .box-grunge { 
        font-size: smaller;
        grid-template-columns: 25em;
       
    }
    
.responsive-photo {
    float: right;
    margin: auto;

}

.responsive-photo2 {
float: left;
margin-right: auto;
    
}

   .responsive-photo3 {
width:100%;
display:block;
margin:auto;
    
}

.YTvideo{
height:auto;  
width:auto;
}

.searchbox{
align-items:center;
float:inherit;
margin-left:70px;
    
}

/* Gaming, Music, Culture */
    .grid-container-gaming,
    .grid-container-music,
    .grid-container-culture {
        font-size: small;
        grid-template-columns: auto auto;
        margin-bottom: 4em; 
        margin-top: 2em;
        grid-auto-rows: minmax(content, auto);
    }
#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
display: block;


  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  line-height: 1.4em;
  margin-bottom: 10px;
width: 100%;

}
}

.login {
font-size:14px;
margin-left:43%;
}



/*if it's 550px or bigger*/
@media (min-width: 560px) {
#show-more
{
    
 width:300px;
 background: rgba(255,255,255,0.5);
 border-color: rgba(255,255,255,0.5);
 
  grid-template-columns: auto;
position:relative;
margin-right:900;
margin-top: 4em;

}


    }


/* Mobile */
@media (max-width: 559px) {

    /* Homepage */
    
 
    #box {
        font-size: small;
        margin-bottom: 3em; 
        margin-top: 2em;
       
    }

    #home-page-title {
        font-size: 2.5em;
        line-height: 1em;
    }

    #home-page-subtitle {
        font-size: 1em;
    }

    .retroshadow {
        width: 80%;
    }
    
   .home-text {
       margin:15px;
    
}
.login {
font-size:14px;
margin-left:25%;
}
    .footer {
        position: relative;
        width:100vw;
    }
    
    .responsive-photo3 {
width:100%;
display:block;
margin:auto;
    
}
#show-more
{
    
 width:300px;
 background: rgba(255,255,255,0.5);
 border-color: rgba(255,255,255,0.5);
position: relative;
  grid-template-columns: auto;

margin-top: 4em;
margin-right: 900px;

}

  .top {
position:fixed;

  bottom: 20px;      
 margin-right:400px;
margin-left:120px;
  margin-top: calc(100vh + var(--offset));
  
  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: rgba(255,255,255,0.5);


  display: inline-block; 
 
}
  

    /* Gaming, Music, Culture */
    .grid-container-gaming,
    .grid-container-music,
    .grid-container-culture {
        font-size: small;
        grid-template-columns: auto;
        margin-bottom: 4em; 
        margin-top: 2em;
        grid-auto-rows: minmax(content, auto);
    }}