:root {
	--color-base: #f88645;
	--color-accent: #c85e2d;
	--color-text: #392a1d;

    --bgimage: url("images/backgrounds/bg01.png");
	--texture-card: url("images/textures/shattered-dark.png");

    --radius: 12px;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.16);     
}

    .theme2 {
    --color-base: #ebf3ff;
	--color-accent: #4da3ff;
	--color-text: #60708a;

	--bgimage: url("images/backgrounds/bg03.png");
	--texture-card: url("images/textures/shattered-dark.png");
}
    .theme3 {
    --color-base: #121933;
	--color-accent: #6b8bff;
	--color-text: #e5ebff;
	
	--bgimage: url("images/backgrounds/bg04.png");
	--texture-card: url("images/textures/shattered.png");
}

/*Scrollbar Webkit */
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
}
	::-webkit-scrollbar-track {
		background: transparent;
}
	::-webkit-scrollbar-thumb {
		border-radius: 999px;
			border: hsl(from var(--color-base) h s calc(l + 15));
			background: var(--color-accent);

		transition: 
			background .2s ease, 
			transform .1s ease;
}
	::-webkit-scrollbar-thumb:hover {
			background: hsl(from var(--color-accent) h s calc(l + 2));
}
	::-webkit-scrollbar-thumb:active {
			background: var(--color-accent);
}

* {
margin: 0;
}

body {
    min-height: 100dvh;
	min-width: 400px;
    
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-image: var(--bgimage);
    color: var(--color-text);
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    height: 45rem;
    gap: 1rem;
}
.ycontainer {
    display: grid;
    justify-content: start;
    text-align-last: left;
    gap: rem;
    margin: 0 1rem 1rem 0;
}

.xcontainer {
    display: flex;
    width: 25rem;
    gap: 1rem;
}

.card {
    text-align: center;
    flex-wrap: nowrap;
    padding: 1rem;
    width: 23rem;
    
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    
    background: hsl(from var(--color-base) h s calc(l + 5));
}
p {
    font-size: 20px
}
b {
    font-size: 25px;
}
a {
	text-decoration: none;
	padding: .45rem .9rem;
	border-radius: 999px;

        	color: var(--color-text);

  transition:
        background .18s ease,
        color .18s ease,
        transform .06s ease;
}
a:hover {
    transform: translateY(-1px);
		
			background: var(--color-base);
			color: var(--color-text);
}

button {
    text-align: center;
    cursor: pointer;
    flex-grow: 1;
    
    padding: .35rem .75rem;
    font-size: 2rem;
    font-weight: 700;
    
    border: 1px solid transparent;
    border-radius: 12px;
    
    color: var(--color-text);
    background: hsl(from var(--color-accent) h s calc(l + 5));
}

button:hover {
	transform: translateY(-1px);
    background: hsl(from var(--color-accent) h s calc(l - 1));
    color: whitesmoke;
}