@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

@-ms-viewport{
	width: device-height;
}
.affiliate :hover{
	cursor: help;
}
.text3d {
	text-align: center;
    text-transform: uppercase;
    font-family: verdana;
    font-size: 2em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        .5px 2px 1px #919191,
		.5px 1.5px .5px #919191,
		0.5px 2px 0.5px #919191,
		0.5px 2.5px 0.5px #919191,
		0.5px 3px 0.5px #919191,
		0.5px 3.5px 0.5px #919191,
		0.5px 4px 0.5px #919191,
		0.5px 4.5px 0.5px #919191,
		0.5px 5px 0.5px #919191,
		0.5px 9px 3px rgba(16,16,16,0.4),
		0.5px 11px 5px rgba(16,16,16,0.2),
		0.5px 12.5px 17.5px rgba(16,16,16,0.2),
		0.5px 15px 30px rgba(16,16,16,0.4);
}

body{
	background-color:  rgb(15, 15, 15);
	color: white;
	font-family: 'Roboto', Arial Black, sans-serif;
	margin: 0 auto;

	flex-direction:column;
	width: 95%;
	justify-content: center;
	align-items:center;

}
.affiliate span{
	color: black;
	content: ;
}
a{
	color: rgb(255, 107, 137);
	text-shadow: 0 0 1px grey;
}

nav{
	text-align: center;
	margin-bottom:0;
	padding: 0;
	margin:0;
	margin-top: 60px;
	
}
ul{
	text-align:center;
}
.mode{
	position: fixed;
	bottom: 5%;
	width: 100%;
	font-size: 28px;
	background-color: rgb(60, 60, 60);
	color: white;
	box-shadow: 3px 3px black;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 2px 2px black, 1px 1px grey
}
.mode:hover{
	color: grey;
}
p a:hover{
	background-color: rgb(45, 45, 45);
}
li a:hover{
	background-color: rgb(65, 65, 65);
}
a:hover{
	background-color: rgb(45, 45, 45);
	cursor: pointer;
}
.hover{
	cursor:pointer;
}
nav li{
	
	display: inline-block;
	padding: 1px;
	padding-right: 8px;
	padding-left: 8px;
	margin: 0;
	font-weight: bold;
	font-size: 27px;
	border-color: black;
	text-transform: capitalize;
	color: rgb(130, 130, 130);
}
nav li:hover{
	transform:scale(.95);
	background-color: rgb(65, 65, 65);
	cursor: pointer;
	color: white;
}
footer{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width: 100%;
	margin: 0 auto;
	padding: 1%;
	padding-top: .5%;
	bottom: 0;
}
.topheader{
	border: thin double rgb(130, 130, 130);
	background-color: rgb();
	display:flex;
	flex-direction: column;
	
	border-radius: 7px;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 0; 
	padding: 1%;
	padding-top: auto;
	box-shadow: 5px 5px black;
	width: 100%;
}
.bdd,.bddd{
	display:flex;
	text-align:center;
	justify-content: center;
}
.row2{
	text-align: left; 
	padding-right: 15px;
}

#container {
	display:flex;
	flex-direction:column;
	background-color: rgb(15, 15, 15);
	width: 100%;
	justify-content: center;
	align-content: center;
	margin: 0 auto;
}
.container {
  max-width: 1100px;   /* or 1100px, adjust as you like */
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.bod {
	display:flex;
	flex-direction:column;
	background-color: rgb(15, 15, 15);
	max-width: 1920px;
	margin: 0 auto;
	padding: 0.5em;
	
}
a:link{
	text-decoration: none;
}
img{
	width: 475px;
	padding-top: 10px;
}
img:hover{
	transform:scale(.98);
	cursor: pointer;
	
	flex-shrink: 0;
}
.itemlink:hover{
	transform:scale(.98);
	cursor: pointer;
	background-color: black;
	flex-shrink: 0;
}


h1,h4{
	text-align: center;
	margin:0;
}
.b_w_link{
	color: white;
	font-weight: bold;
}
.bd{
	display: grid;
	text-align:center;
	white-space: nowrap;
	vertical-align: top;
	padding: .5%;
}
.bd4, .bd6{
	display: flex;
}
.column{
	
	padding: 0;
	padding-top: 5px;
	margin: 0;
	text-align: center;
}
.column2{
	
	padding: 0;
	margin: 0;
	text-align: left;
}
.socials {
  display: flex;
  flex-direction: row;
   flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px; /* space between icons */
  background: none;
  box-shadow: none;
}
.socials img {
  width: 200px; /* or whatever size you prefer */
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}
@media (max-width: 700px) {
  .socials {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }
}
.socials:hover{
	background-color: rgb(15, 15, 15);
	box-shadow: 0px 0px black;
}
.item{
	font-size: 150%;
	text-align: center;
	font-weight: bold;
	padding:0;
	margin:0;
}
.minimize1,.minimize2,.minimize3,.minimize4,.minimize5,.minimize6,.minimize7,.minimize8,.minimize9, .minimize10{
	padding: .1%;
	padding-left: 1%;
	padding-right: 1%;
	align-self: flex-end;
	background-color: rgb(60, 60, 60);
	color: white;
	box-shadow: 3px 3px black;
	margin-top:5px;
	
}
.minimize{
	padding: .1%;
	padding-left: 1%;
	padding-right: 1%;
	align-self: flex-start;
	background-color: rgb(60, 60, 60);
	color: white;
	box-shadow: 3px 3px black;
}
button:hover{
	color:rgb(255, 107, 137);
}
modeButton{
	margin: 0;
}
.screws,.case,.orings,.cable,.springs,.sound,.keycaps,.alternate,.videos,.intro2, .gamingMonitor, .ultrawide  {
	border:  solid black;
	background-color: rgb();
	display:flex;
	flex-direction:column;
	justify-content: center;
	text-align:center;
	align-content: center;
	border-radius: 7px;
	margin: 0 auto;
	padding: 1%;
	padding-top: .5%;
	box-shadow: 5px 5px black;
	width: 100%;
}
.screws h1,.case h1,.case2 h1,.orings h1,.cable h1,.springs h1,.sound h1,.keycaps h1,.alternate h1,.videos h1, .gamingMonitor h1 {
	text-transform: uppercase;
	color: white;
}
.case2{
	
	background-color: rgb();
	display:flex;
	flex-direction:column;
	justify-content: center;
	text-align:center;
	align-content: center;
	
	margin: 0 auto;
	padding-top: .5%;
	width: 100%;
}
.gallery{
	border:  solid black;
	background-color: rgb();
	display:flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	align-items: center;
	border-radius: 7px;
	padding: 1%;
	box-shadow: 5px 5px black;
	top: 6px;
	
	
}

header {
  border: thin double rgb(15, 15, 15);
  background-color: rgb(15, 15, 15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1% 0;
  box-shadow: 2px 2px rgb(15, 15, 15);
  width: 100%;
  max-width: 1100px; /* Match your .container max-width */
}

.row{
	border: thin solid rgb(60, 60, 60);
	display:flex;
	flex: 1;
	justify-content: center;
	align-content: center;
	flex-direction: row;
	align-items: center;
	border-radius: 12px;
	
	padding: 2%;
	padding-top: auto;
	margin-left:0;
	box-shadow: 5px 5px black;
	
}
img:.row{
	
}
.intro {
	border: thin solid rgb(60, 60, 60);
	background-color: rgb(15,15,15);
	display:flex;
	flex-direction:column;
	justify-content: center;
	text-align:center;
	align-content: center;
	border-radius: 7px;
	margin: 0 auto;
	padding: 1%;
	padding-top: .5%;
	margin-top: .5%;
	width: 100%;
	margin-bottom: 10px;
}
p{
	font-size: 18px;
	text-align: jusitfy;
}
.modeButtons{
	display: flex;
	flex-direction: column;
	
	border:  solid black;
	
	border-radius: 12px;
	box-shadow: 10px 10px black;
	top: 6px;
	
}
.modeButton, .modeButtonUp {
    width: auto;
    max-width: 150px;
    min-width: 80px;
    padding: 8px 16px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: rgb(60, 60, 60);
    color: white;
    box-shadow: 3px 3px black;
    border: thin solid black;
}
.modeButton: hover, .modeButtonUp: hover{
	color: color: rgb(255, 92, 124);
}
.alternate2{
	border:  solid black;
	background-color: rgb();
	display:flex;
	flex-direction:column;
	justify-content: center;
	text-align:left;
	align-content: center;
	border-radius: 7px;
	margin: 0 auto;
	padding: 1%;
	padding-top: .5%;
	box-shadow: 5px 5px black;
	width: 100%;
}

/* Make images and videos responsive */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive container for rows/columns */
.row, .row2, .column, .column2 {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

/* Responsive navigation */
nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
nav ul li {
  margin: 5px 10px;
}

/* Responsive text */
body, p, h1, h2, h3, h4 {
  word-break: break-word;
}
/* Responsive video container For Youtube*/
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 700px) {
  .intro, .gallery, .gallery2, .gamingMonitor, .ultrawide, .case, .case2, .alternate, .videos, .keycaps, .sound, .springs, .orings, .screws, .modeButtons, .modeButton, .modeButtonUp, .row, .row2, .column, .column2, .topheader, footer, #container {
    width: 100%;
    max-width: 100vw;
    padding: 0 5px;
    box-sizing: border-box;
  }
  body {
    padding: 0;
    zoom: 100%;
  }
  .text3d {
    font-size: 1.2em;
  }
  .bd4, .bd6 {
    flex-direction: column;
    align-items: stretch;
}
.row, .bd4, .bd6 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .row > div,
  .bd4 > div,
  .bd6 > div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 20px;
  }
  .row img,
  .bd4 img,
  .bd6 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
.view-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
@media (max-width: 700px) {
  .view-toggle {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .modeButton, .modeButtonUp {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .gallery {
    display: flex;
    flex-direction: column !important;
    align-items: stretch;
  }
  .gallery > .column {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
    display: block;
  }
}





@media (max-width: 700px) {
  .socials img {
    width: 150px;   /* or any size you prefer */
    max-width: 150px;
  }
}
/* Desktop: image on right */
.gallery2 {
  display: flex;
  flex-direction: row; /* Image will be on the right */
 align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0 auto;

  border:  solid black;
	background-color: rgb();
	
	border-radius: 7px;
	margin: 0 auto;
	padding: 1%;
	padding-top: .5%;
	box-shadow: 5px 5px black;
	
}
.gallery2 img {
  display: block;
  margin: 0 auto;           /* Center image horizontally in its column */
  max-width: 100%;
  height: auto;
}

/* Mobile/tablet: stack image above links */
@media (max-width: 900px) {
  .gallery2 {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .gallery2 img {
    max-width: 75%;
    padding-top: 10px;
  }
  .gallery2 .case2 {
    margin-left: 0 !important;
    padding: 5px;
  }
}
.case2 h1 {
  margin: 8px 0;   /* or your preferred value */
  padding: 0;      /* remove extra padding if any */
  font-size: 1.3em; /* optional: adjust size if needed */
  text-align: left; /* optional: align left if you prefer */
}
.case2 .itemlink {
  display: block;
  margin: 6px 0;   /* vertical spacing between links */
  padding: 0;      /* remove extra padding */
}
.itemlink {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.itemlink h1 {
    margin: 0;
  padding: 0;
  font-size: 1.3em;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  display: inline-block;
  text-align: right;  /* Align text to the right edge */
  letter-spacing: 1px;
}
.item-desc {
  font-size: 1em;
  color: rgb(255, 107, 137);
  display: inline;
  text-transform: none;
}

.photogallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: solid black;
  border-radius: 7px;
  box-shadow: 5px 5px black;
  padding: 1%;
  margin-bottom: 24px;
  background: rgb(15, 15, 15);
  width: 100%;
}

.photogallery > h1 {
  text-align: center;
  margin-bottom: 16px;
  width: 100%;
}

.photogallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  gap: 16px;
}

.photogallery-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 150px;
}

.photogallery-img {
  width: 100%;
  max-width: none;
  height: auto;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 2px 2px 8px #111;
}

@media (max-width: 700px) {
  .photogallery-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .photogallery-col {
    width: 100%;
    max-width: 100%;
    flex: none;
  }
  .photogallery-img {
    max-width: 100%;
  }
}
@media (max-width: 700px) {
  .photogallery,
  .gallery,
  .sound,
  .case,
  .orings,
  .cable,
  .springs,
  .keycaps,
  .alternate,
  .videos,
  .intro2,
  .gamingMonitor,
  .ultrawide {
    padding: 0 !important;
    margin: 0 !important;
    border-width: 2px;
    border-radius: 0;
    width: 100% !important;         /* Use 100% instead of 100vw */
    max-width: 100% !important;
    box-sizing: border-box;
    box-shadow: none !important;
  }
  .photogallery-row,
  .gallery2,
  .row,
  .bd4,
  .bd6 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;         /* Use 100% instead of 100vw */
    max-width: 100% !important;
    box-shadow: none !important;
  }
  .container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;         /* Use 100% instead of 100vw */
    max-width: 100% !important;
  }

  .gallery ul,
  .gallery ol,
  .photogallery ul,
  .photogallery ol,
  .sound ul,
  .sound ol,
  .case ul,
  .case ol,
  .ultrawide ul,
  .ultrawide ol,
  .alternate ul,
  .alternate ol {
    list-style-position: inside;
    padding-left: 1.2em;
    margin-left: 0;
  }
}