/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Day theme */
.day-theme {
    background-color: #f9f9f9;
    color: #b7b7b7;
    /* Other styling for day theme */
}
.day-theme .btn{
	color:#b7b7b7;
}
.day-theme  header{
    color: #000;
}
.day-theme .btn:hover{
	color:#fafafa;
	background:rgba(24,22,32,1);
	border-color:rgba(24,22,32,1);
}


/* Night theme */
.night-theme {
	background: linear-gradient(0deg, rgba(24,22,32,1) 0%, rgba(2,1,16,1) 100%);
    color: #fafafa;
    /* Other styling for night theme */
}
.night-theme .btn{
	color:#fafafa;
}
.night-theme .btn:hover{
	color:rgba(24,22,32,1);
	background:#fafafa;
	border-color: #fafafa;
}


/* Typography */
 body {
	font-family: "inter-variable", sans-serif;
    font-weight: 200;
    line-height: 1.4;
    display:flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
    text-rendering: geometricPrecision;
    font-kerning: normal;
    overflow-x: hidden;
    letter-spacing: -0.035em;
 }

 p {
    margin-bottom: 1em;
 }

 .btn {
	text-decoration: none;
	padding: 0.3em 0.5em 0.1em 0.6em;
	border-style: solid;
	border-radius: 3em;
	border-width: 0.1em;
}
.btn:hover {
	color:#fafafa;
	background-color: #2D64BC;
	border-color: #2D64BC;
}

/* Header styling */
header {
    padding: 3rem;
    font-family: "new-reason", sans-serif;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 500;
    font-style: normal;
}

/* Main layout */
main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 3rem;
}

.column {
    flex: 0 1 30%;
    margin: 0.5rem 0;
    padding: 1rem 0;
}

/* Footer styling */
footer {
    font-size: 0.75rem;
    padding: 3rem;
	margin-top:auto;
}

@media (max-width: 768px) {
    .column {
        flex: 0 1 100%;
    }
}