@import url("./tailwind.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

:root {
	--main-color: #1b4996;
}

.app-width {
	width: 1280px;
	max-width: 100%;
	height: 100%;
	padding: clamp(1rem, 5vw, 1.2rem);
}

.nav-logo {
	max-width: clamp(120px, 25vw, 180px);
	height: auto;
	object-fit: contain;
}

.user-icon {
	color: var(--main-color);
	font-size: clamp(28px, 6vw, 36px);
	display: flex;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
}

.menu {
	min-width: clamp(150px, 25vw, 200px);
}

.logo {
	width: 60px;
	height: 60px;
	border-radius: 12px;
}

.notice-text h1 {
    font-size: 32px;
}

.notice-text h3 {
	font-size: 24px;
}

.notice-text p {
	font-size: 18px;
}

.notice-text span[style*="background-color"] {
    padding: 12px 24px;
}

 .card {
       height: clamp(240px, 25vw, 300px);
       transform: scale(clamp(1, 1, 1.05))
    }

    @media (min-width: 1024px) {
        .card {
            height: 300px;
			scale: (1);
        }
    }