/* The universal settings applied to any device */

/* Disables the selection */
.disableselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge*/
	 user-select: none;          /* Non-prefixed version, currently not supported by any browser */
}
  
/* Disables the drag event (mostly used for images) */
.disabledrag{
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}


/* make there a grey hover over images */
.display-img:hover {
		opacity: 75%;
	/*	transition: .1s ease-in-out;*/
}


/* makes is so like width includes padding and font is white */
* {
	box-sizing: border-box;
	color: white;
}

/* for shifting the copyright right and my email left */
.right-align {
	float: right;
	right: 3px;
}
.left-align {
    float: left;
    left: 3px;
}

 .center {
	text-align: center;
 }
 
 
/* On screens that are 900px wide or less */
@media only screen and (max-width: 900px) {	
	#mobilehide {
		display: none;
	}
	
	.images {
		display: inline-block;
		column-count: 2;
		column-gap: 10px;
	}
	
	.display-img {
		display: inline-block;
		margin: auto;
		width: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	/* center the logo and add spacing ig */
	.logo {
		display: block;
		margin: auto;
		padding: 10px;
		width: 80px;
		height: 80px;
	}
	/* center the logo and add spacing ig */
	.big-logo {
		display: block;
		margin: auto;
		padding: 10px;
		width: 25%;
	}

	/* center the logo and add spacing ig */
	.super-big-logo {
		display: block;
		margin: auto;
		padding: 10px;
		width: 100%;
	}
	
	/* for the page that opens an individual image */
	.big-img {
	    display: block;
	    width: 85%;
	    margin: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	/* For the back button on the large image page */
	.back-btn {
        color: white;
        padding: 4px 11px;
        text-align: center;
        text-decoration: none;
        /*display: inline-block;*/
        font-size: 13px;
        background-color: black;
        border: 1.5px solid white;
        cursor: pointer;
		font-weight: bold;
		margin: auto;
        /*position: absolute;
        /*bottom: 0;*/
	}
	
	.topnav a {
		float: left;
		color: white;
		width: 100%;
		text-align: center;
		padding: 8px 9px;
		text-decoration: none;
		font-size: 19px;
	}
	
	/* left button for hand-made image carousel */
	.left-btn {
		background-color: black;
		border: none;
		color: white;
		text-align: center;
		position: absolute;
		font-size: 70px;
		float: left;
		margin-left: 10px;
		top: 85%;
		cursor: pointer;
		line-height: 0;
		padding: 0;
	}
	
	/* right button for hand-made image carousel */
	.right-btn {
		background-color: black;
		border: none;
		line-height: 0;
		padding: 0;
		color: white;
		text-align: center;
		position: absolute;
		font-size: 70px;
		right: 0;
		float: right;
		margin-right: 15px;
		top: 85%;
		cursor: pointer;
	}
	
	/* greyed out button on end */
	#greyed {
		cursor: not-allowed;
		color: grey;
		/*pointer-events: none;*/
	}
}




/* Add a black background color to the top navigation */
.topnav {
	background-color: black;
	overflow: hidden;
}

/* Add a color to the active/current link */
.topnav a.active {
	background-color: white;
	color: black;
}

/* Change the color of links on hover */
.topnav a:hover {
	background-color: #c9c9c9;
	color: black;
}


@media only screen and (min-width: 900px) {
	/* Style the links inside the navigation bar */
	.topnav a {
		float: left;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 19px;
	}
	
	/* center the logo and add spacing ig */
	.logo {
		display: block;
		margin: auto;
		padding: 10px;
		width: 93px;
		height: 93px;
	}

	/* center the logo and add spacing ig */
	.big-logo {
		display: block;
		margin: auto;
		padding: 10px;
		width: 170px;
		height: 170px;
	}

	/* center the logo and add spacing ig */
	.super-big-logo {
		display: block;
		margin: auto;
		padding: 10px;
		height: 90%;
	}

	.images {
		display: inline-block;
		column-count: 4;
		column-gap: 10px;
	}
	
	/* format the images so they um aren't shitty? */
	.display-img {
		margin: auto;
		width: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	/* for the page that opens an individual image */
	.big-img {
	    display: block;
	    height: 87%;
	    margin: auto;
		padding-top: 10px;
		padding-bottom: 10px;
		z-index: -1;
	}
	
	/* For the back button on the large image page */
	.back-btn {
        color: white;
        padding: 4px 11px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        background-color: black;
        border: 2px solid white;
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        margin-left: 20px;
        top: 10%;
        -ms-transform: translateY(-10%);
        transform: translateY(-10%);
	}
	
	
	/* left button for hand-made image carousel */
	.left-btn {
		background-color: black;
		border: none;
		color: white;
		text-align: center;
		position: absolute;
		font-size: 70px;
		float: left;
		margin-left: 15px;
		top: 50%;
		cursor: pointer;
		line-height: 0;
		padding: 0;
	}
	
	/* right button for hand-made image carousel */
	.right-btn {
		background-color: black;
		border: none;
		line-height: 0;
		padding: 0;
		color: white;
		text-align: center;
		position: absolute;
		font-size: 70px;
		right: 0;
		float: right;
		margin-right: 15px;
		top: 50%;
		cursor: pointer;
	}
	
	/* greyed out button on end */
	#greyed {
		cursor: not-allowed;
		color: grey;
		/*pointer-events: none;*/
	}

	.down {
		position: absolute;
		bottom: 0;
	}
}