*,
*::before,
*::after {
    	box-sizing: border-box;
}

p{font-family: "Calibri";}

header, main {
	width: 75%;
	max-width: 2000px;
	background-color: #471c81;
	color: white;
	margin: auto;
}

body {
	background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/78246034_RXM90nLk0IwTt2W.png"); 
	background-repeat: repeat; 
	background-size: 200px;
}


#information, #onto-inventory{
	max-width: 90%;
	background-color: #582a98;
	margin: auto;
	text-align: center;
	padding: 25px;
	margin-top: 25px;
	border-radius: 10px;
}
main{
	padding: 25px;
	border-radius: 10px;
}

.banner { width: 100%; height: auto; display: block; }

nav { background-color: #7848ba; }

nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: left; }

nav li { margin: 0; flex: 1; }

nav a { display: block; padding: 15px 25px; color: white; text-decoration: none; font-weight: bold; text-align: center; }

nav a:hover { background-color: #008cba; }

#info-pic, #btn-pic{width: 50%;}

.btn {
    background: #d9c5ff;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn:hover {
    background: #008cba;
}

.btn:active {
    transform: scale(0.97);
}
.btn:disabled {
	background: #c1b0d9;
	transition: none;
	transform: none;
	cursor: not-allowed;
}

.input {
    width: 75%;
    padding: 12px 16px;
    border: 2px solid #d9c5ff;
    border-radius: 8px;
    background: #f7f2ff;
    color: #471c81;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 25px;
	margin-top: 25px;
}

.input:focus {
    border-color: #8c6cff;
    box-shadow: 0 0 6px rgba(140, 108, 255, 0.5);
    outline: none;
}

.vertical-center{
	display: flex;
}
.short{
	align-self: center;
}


.two-col {
    	display: flex;
    	gap: 20px;
	align-items: center;
}


.left,
.right {
    	flex: 1;
}	


#info-pic img, #btn-pic img {
    	width: 100%;
    	height: auto;
    	display: block;
}

@media (max-width: 1000px) {

    	.two-col {
        	flex-direction: column;
    	}

    	.left,
    	.right {
        	flex: none;   
        	width: 100%; 
    	}

    	#info-pic{
        	width: 100%;
        	box-sizing: border-box;
    	}
	#btn-pic{
		display: none;
	}
}
@media (max-width: 700px) {
	header, main{
		width: 100%;
	}
}