@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Luckiest+Guy&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{
    --primary: orange;
    --primaryVarient: darkorange;
    --onPrimary: #111;

    --outline: #bbb;

    --surface: #fff;
    --surfaceVarient: #f5f5f5;

    --onSurface: #222;
    --onSurfaceVarient: #666;

    --red-bg: crimson;
    --red: #eee;
    
    --blue-bg: royalblue;
    --blue: #eee;

    --green-bg: mediumseagreen;
    --green: #eee;

    --border-radius: 10px;

    --width-card: 300px;
	--width-card-medium: 520px;
	--width-card-wide: 1000px;
	--width-content: 1100px;

    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Bricolage Grotesque', sans-serif;
    --font-small: 'Poppins', sans-serif;

}
:root[data-theme="dark"]{
    --primary: darkorange;
    --primaryVarient: darkorange;
    --onPrimary: #111;

    --outline: #666;

    --surface: #111;
    --surfaceVarient: #222;

    --onSurface: #EEE;
    --onSurfaceVarient: #999;
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-display);
}

body{
    background-color: var(--surface);
    color: var(--onSurface);
    min-height: 100vh;
}

small{
    font-family: var(--font-small);
    font-size: 14px;
}

input {
    padding: 14px 16px;
    border-radius: var(--border-radius);
    border: 1px solid var(--outline);
    background-color: var(--surface);
    color: var(--onSurface);
    font-size: 16px;
    margin-bottom: 24px;
    transition: border-color 0.2s;
}

input:focus {
    outline: none;
    border-color: var(--primary);
}

input::placeholder {
    color: var(--onSurfaceVarient);
    opacity: 0.5;
}

.filled-btn,
.outlined-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}

.filled-btn {
  background: var(--primary);
  color: var(--onPrimary);
}

.filled-btn:hover {
  background: var(--primaryVarient);
  color: var(--onPrimary);
}

/* Outlined */
.outlined-btn {
  background: transparent;
  color: var(--primary);
}

.outlined-btn:hover {
  background: var(--primary);
  color: var(--onPrimary);
}

header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	background-color: var(--primary);
	position: sticky;
	z-index: 10;
	top: 0;
}
header *{
	color: var(--onPrimary);
}
header .brand{
	display: flex;
	gap: 8px;
	align-items: center;
    overflow: hidden;
}
header .brand span{
	display: flex;
	gap: 3px;
	flex-direction: column;
}
header img{
	border-radius: 8px;
	border: 1px solid var(--outline);
}
header h2{
	font-size: 18px;
}
header small{
	font-size: 10px;
	color: var(--onPrimary);
}
header div a{
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
}
header svg{
	width: 24px;
	height: 24px;
	margin: 4px;
}
header div a:hover{
	background-color: var(--surfaceVarient);
}
header div a:hover svg{
    fill: var(--onSurface);
}
header .profile-btn {
    font-weight: 900;
    color: var(--onSurface);
    background: linear-gradient(135deg, var(--surface), var(--surfaceVarient));
    border: 1px solid var(--outline);
}
header .profile-btn:hover {
    color: var(--primary);
}

@media (max-width: 600px) {
    header {
        padding: 12px 16px;
    }
    header svg {
        width: 20px;
        height: 20px;
    }
}

main{
	margin: 40px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.breadcrumb{
	display: flex;
	gap: 4px;
	align-items: center;
	flex-wrap: wrap;
	color: var(--onSurfaceVarient);
}

.breadcrumb a:hover small{
	color: var(--primary);
}

main h2 span{
	color: var(--primary);
}

main small{
	color: var(--onSurfaceVarient);
}

@media (max-width: 600px) {
	main{
		margin: 40px 16px;
	}
	header{
		padding: 12px 16px;
	}
}