co /* Font Styles */
 html * {
     color: #2c2222;
 }
  
 h1,h2,h3{font-family:'Red Hat Display',sans-serif}
 h1 {
    font-size: 2.75em;
  }
  
 h2 {
    font-size: 1.5em;
  }
  
 h3 {
    font-size: 1.25em;
 }
 
 h4 {
font-family: 'Saira', sans-serif;
font-size: 1em;
 }
 
 
 h5{
     font-family: 'Saira', sans-serif;
 font-size: 45px;
}
 
 p {
font-family: 'Red Hat Display', sans-serif;
font-size: 1.1em; 
}
 
 #home-page-title {
letter-spacing: .03em;
margin: 0;
}
 
 #home-page-subtitle {
margin-bottom: 1em;     
margin-top: 5px;
}
 
 #home-page-sub-title {
font-size: 1.5em;
margin-top: 2em;
}


/* Collage */
 .header {  
  background:url(header.png);
  background-size:cover; 
  border: 20px; 
  height: 150px;      
  text-align: center; 
  width:100%; 
}
 
 * {
	box-sizing: border-box;
}
body {
  	background-image:url("default.png"); 
  	font-family:"Red Hat Display", sans-serif;
	margin: 0;
    max-width: 100%;
	min-height: 100vh;
}

ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}

a {
	text-decoration: none;
}

.logo {    
float:left;
max-height:75%;
margin-top: -0.6em;
margin-left:4em;
}

.main-nav { 
float:right;
margin-top: 5px;
margin-bottom:0;
text-shadow: 1px 1px 3px #000000;
 z-index:1;
}

.main-nav a {
color: white;	
display: block;
padding: 15px 15px;
text-align: center;
}

.main-nav a {
	font-size: .5em;
}

.main-nav a:hover {
background-color: deepskyblue;  
height: auto;
transition: all 0.3s ease;
}

.menu {
background-color:black ;
border:0;
height:75px;
padding-top: .75em;	
padding-bottom: .75em;
}

/* Animations (Header) */
.zoom {
   background-color: rgba(0, 0, 0, 0.096);   
   transition: transform .2s; /* Animation */
}

.zoom:hover {
    transform: scale(1.10); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }


/* Body - HomePage*/
.login {
float:right;
font-size:14px;
margin-left:72%;
}

#box { 
border-image-source:url(holo.jpg) 3px;  
display: flex;
flex-direction: column;
float: center;
font-size: 20px;
margin:1px;
max-height: 100%;
max-width: 100%;
position: relative;
text-align:center;
}

.loggedin {
 background: rgba(255,255,255,0.5);
 flex-direction: column;
 float:left;
margin-right:72%;
max-width:30vw;
position:relative;
text-align: left;
}


.container-top{    
align-items:center;

display: flex;
flex-direction:row;
width:100vw;
overflow:hidden;
}
.media{
margin-left:20px;  
max-width:45vw;
    
}
.hp-text {
align-items:center;
margin-top:40px; 
width:100%;
font-size: 1em;
}


.landing {
    margin-top:-50px;
    text-align: left;
margin-left:475px;
font-size: 1em;
    
}

.container-bottom{ 
align-items: center;
display:grid;
display: flex; 
gap: 1em;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
justify-content: center; 
justify-content:space-around;
margin:10px;
} 

.bottom-1 {   
box-shadow: 0 1px 2px 0 rgba(0, 0, 225, 1), 0 2.5px 5px 0 ;
display:flex;   
flex-direction: column;

}
.bottom-2{  
box-shadow: 0 1px 2px 0 rgba(0, 0, 225, 1), 0 2.5px 5px 0;
display:flex;   
flex-direction: column;}

.bottom-3{
box-shadow: 0 1px 2px 0 rgba(0, 0, 225, 1), 0 2.5px 5px 0;
display:flex;  
flex-direction: column;} 

.bottom-4{ 
box-shadow: 0 1px 2px 0 rgba(0, 0, 225, 1), 0 2.5px 5px 0;
display:flex; 
flex-direction: column;
 }

#home-page-title {
align-items: center;
color:black;
text-shadow: 
      1px 1.5px 1.5px rgba(0, 0, 100, 1), 
      1px 1.5px 1.5px rgba(0, 0, 100, 1);
}

/* Sub Title Class - Homepage */
.retroshadow {
    color: white;
    letter-spacing: .1em;
    margin-left:50px;
     margin-top:-10px;
      text-shadow: 1px 1.5px 1.5px rgba(0, 0, 225, 1), 
      1px 1.5px 1.5px rgba(0, 0, 225, 1);
      width: 90%;
  }

img {
    border-radius:5px;
}

/* Homepage Main Photo */
.home-portrait-photo {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6), 0 5px 10px 0 rgba(0, 0, 0, 0.6);
}

/* Body - Gaming Page, Music Page */
.grid-container-gaming {
align-items: center;
display: grid; 
gap: 4em;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
justify-content: center;
margin-top: 4em;
}


.box1-gaming{ 
align-items:center;
display: flex;
flex-direction: column;
justify-content: center;
max-height:600px;
max-width:350px;
position:relative;
}

.box-gaming-text {
font: "Red Hat Display";
max-height:95px;
overflow:scroll;
}

.grid-container-music {
align-items: center; 
display: grid; 
gap: 4em;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
justify-content: center;
margin-top: 4em;
}

.image1-music,
.image2-music, 
.image3-music {   
align-items: center;
display: flex;
flex-direction: column;
}

/* Body - Culture Page */
.grid-container-culture {
align-items: center;  
display: grid; 
gap: 4em;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
justify-content: center;
margin-top: 4em;
}

.box-culture {
align-items: center;    
display: flex;
flex-direction: column; 
font-size: small;
justify-content: center;
}

.culture-text {
font: "Red Hat Display";
max-height:95px;
overflow:scroll;
}

/* Body - Articles */
.box-grunge {
     align-items:center;   
     background: rgba(255,255,255,0.5); 
   justify-content: center;
    margin: auto;
    position:relative;
  width:75vw;

}
.text-container {
  align-items:center;   
   justify-content: center;
    margin: auto;
    position:relative;
      text-align: justify;
     width:70vw;  
}
.responsive-photo {
    float: right;
    margin: 1em;
    overflow:auto;
    
}

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

.comment {
align-items:center;     
background: rgba(255,255,255,0.5);  
border: solid 10px;
border-color:black;
justify-content: center;
margin: auto;
max-height:300px;    
max-width:50%;
 position:fixed;    
 text-align: justify;
}

.category {
 
color: white;
letter-spacing: .1em;
margin-top:40px;
text-shadow: 1px 1.5px 1.5px rgba(0, 0, 225, 1), 
      1px 1.5px 1.5px rgba(0, 0, 225, 1);
width: 90%;
  }

p a:link {
  color: #001a33;
  font-weight: 800;
}
#logo,
#home-menu-link,
#gaming-menu-link,
#music-menu-link,
#culture-menu-link {
color: white;   
font-size: 1.25em; 
font-weight: 100;
line-height: .25em;
margin-right: .175em;
}

.dropbtn {
background-color: #04AA6D; 
border: none;
color: white;  
font-size: 16px;
padding: 16px;
}

.dropdown {
display: inline-block;   
position: relative;
}

/* Add some padding and a grey background color to containers */
.newsletter {
align-items:center;    
background-color: rgba(255,255,255,0.5); 
display:flex;
flex-direction:column;
max-width:100%;
padding: 5px;
}

/* Style the input elements and the submit button */
input[type=text], input[type=submit] {
align-items:center;   
border: 1px solid #ccc;
box-sizing: border-box;
display: inline-block;
margin: 8px 0;   
max-width: 75%;
padding: 5px;
background:rgba(255,255,255,0.5)
}

/* Add margins to the checkbox */
input[type=checkbox] {
  margin-top: 10px;
}

/* Style the submit button */
input[type=submit] {
  background-color:rgba(255,255,255,0.5);
  border: none;  
  color: hotpink;
}

input[type=submit]:hover {
  opacity: 0.8;
}

body {
  overflow-x: hidden;
}

.container {
align-items: center;
border-image-source:url(holo.jpg) 3px;
display: flex;
flex-direction: column;
float: center;
justify-content: center;
max-height: 100%;
max-width: 100%;
text-align:center;
}

.swiper-container {
display:flex; 
height:100%; 
justify-content: center;
max-height:100%;  
overflow-y:visible;
  width:100vw;
}

.swiper-wrapper {
 display:flex;
 height:100%;
 max-width:78%;    
 overflow-x: scroll;
 overflow-y:hidden;
}

p {
  font-size: 1.7rem;
  font-weight: 500;
}
.swiper-slide {
  border-radius: 5px;  
 margin:15px;
 transition: all 300ms ease-in-out;
}

.swiper-slide img {
   
  border-radius: 5px; 
  cursor: grab;
  max-width: 600px;
}

.swiper-slide img:active {
  cursor: grabbing;
}

.swiper-slide:hover {
  transform: scale(1.2);
  transition: all 300ms ease-in-out;
  transition-delay: 300ms;
  z-index: 0;
}

.swiper-slide:hover img {
   box-shadow: 0 0 5px 1px rgba(0,0,0,0.5); 
   transition-delay: 300ms;
}

body {
    
}
.form {   
background: white; 
margin: 50px auto;
padding: 30px 25px;
width: 300px;
}

h1.login-title {
    color: #666;
    font-size: 25px;
    font-weight: 300;   
    margin: 0px auto 25px;
    text-align: center;
}

.login-input {
    border: 1px solid #ccc;  
    font-size: 15px;
    height: 25px;  
    margin-bottom: 25px;
    padding: 10px;
    width: calc(100% - 23px);
}

.login-input:focus {
    border-color:#6e8095;
    outline: none;
}

.login-button {
    background: #55a1ff;
    border: 0;    
    color: #fff;  
    cursor: pointer;  
    font-size: 16px;   
    height: 50px;
    outline: 0;
    text-align: center;
   width: 100%;
}

.link {
    color: #666;
    font-size: 15px; 
    margin-bottom: 0px;
    text-align: center;
}
.link a {
    color: #666;
}
h3 {
    font-weight: normal;
    text-align: center;
}

/* Footer */
.footer {     
 align-content: center;
align-items: center;  
background-color: black;
bottom: 0;
display: flex;
flex-direction:row;
height: 70px;
justify-content: center;
justify-items: center;
position: fixed;
width: 100%;
}

#patreon {
 color: #0a66c2;
display:inline-flex;
font-size: 2.5em;
margin:20px;   
max-width:20vw;
}

#upwork {
background-color: #14a800;
display:inline;
font-size: 2.5em;
margin:20px;
max-width:20vw;
}

#fiverr {
  font: white;
  font-size: 2.5em;
    margin: 20px;
}

#redbubble {
  font: white;
  font-size: 2.5em;
    margin: 20px;
}

#linkedin {
color: #0a66c2;
display:inline;  
font-size: 2.5em;
margin:20px;  
max-width:20vw; 
}

#twitch
{
    color:purple;

font-size: 5em;
margin-right: 10px;    
max-width:20vw;
}

#footer-bottom-page {
    position: absolute;
}

/* visited link */
a:visited {
  color:darkblue;
}

/* selected link */
a:link {
  color: black;
}  

.toggle-button {
display: none;  
flex-direction: column; 
height: 21px; 
justify-content: space-between; 
position: absolute;  
right: 1rem;
top: 1.32rem;
width: 30px;
  
    
}

.toggle-button .bar {
    background-color: white;
    border-radius: 10px;  
    height: 3px;
    width: 100%;
  
}

/* Media Queries */

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

@media (min-width: 700px) {
	.header {
		flex-direction: row;
		justify-content: space-evenly;
        max-width: 100%;
	}

}


/* Tablet & Mobile */


@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);
width: 100%;
flex-direction: column;
    }

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

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

    .navbar-links.active {
        display: flex;
    }

.media{
max-width:90vw;    
margin:0px;    
    
}
    

    
 #box { 
border-image-source:url(holo.jpg) 3px;
font-size: 20px;
margin: 1px;
max-height: 100%;
max-width: 100%;
position: relative;
}  

.container-top{ 
align-content:center;

display: flex;
flex-direction: column;
max-height:50%;
max-width:100%;   
}

.hp-text {
 margin-left:-300px;

}

.landing {
    margin-top:200px;

}
.retroshadow {
    color: white;
    letter-spacing: .01em;
    margin-left:10px;
    margin-top:-20px;
        align-content:center;
      text-shadow: 1px 1.5px 1.5px rgba(0, 0, 225, 1), 
      1px 1.5px 1.5px rgba(0, 0, 225, 1);
      width: 90%;
    
  }
  

.container-bottom{
display: flex;
flex-direction:column; 
gap:10px;   
justify-content:space-between;
} 

.bottom-1 { 
align-items:center;
display:flex;
flex-direction:column;
justify-content: center;
max-height:600px;
max-width:400px;
position:relative;    
}

.bottom-2{    
align-items:center;
display:flex;
flex-direction:column;
justify-content: center;
max-height:600px;  
max-width:350px;
position:relative;   
}

.bottom-3{    
align-items:center;
display:flex;
flex-direction:column;
justify-content: center;
max-height:600px;    
max-width:350px;
position:relative;  
}

.bottom-4{
        display:flex;
    flex-direction:column;
     justify-content: center;
    align-items:center;
     max-width:350px;
    max-height:600px;
    position:relative;  
}
.newsletter{
    max-width:100%;
 
}
.button{   margin-left:-50px;
    max-width:100%;
}
    .footer {
        position: relative;
    }

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

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

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

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

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

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

    .retroshadow {
        width: 100%;
    }
    
   .home-text {
       margin:15px;
}

.topright {
align-items:center; 
flex:2;
justify-content: center;
margin-right: 10px;
max-width:70%;
}

.footer {
        position: relative;
    }

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



}
@media screen and (max-width: 599px) {
.swiper-slide img {
    max-width: 14rem;
  }
.swiper-button-next,
.swiper-button-prev {
    display: none;
  }
}

@media screen and (max-width: 400px) {
.swiper-slide img {
   border-radius: 2px;  
   max-width: 10.5rem;
   
  }
}