87 lines
1.8 KiB
CSS
87 lines
1.8 KiB
CSS
* Global Styles */
|
|
html {
|
|
font-size: 17px; /* Base font size for scaling */
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-family: 'Calibri', sans-serif;
|
|
font-size: 1rem; /* Default font size based on 16px */
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #bdd4da; /* Sky Bloom */
|
|
}
|
|
|
|
body h1 {
|
|
text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
|
|
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
|
|
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
|
|
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
|
|
}
|
|
|
|
|
|
|
|
/* Title Large (Arial Bold 30px) */
|
|
h1 {
|
|
font-family: 'Arial', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.875rem; /* 30px for title */
|
|
}
|
|
|
|
/* Title (Arial Bold 25px) */
|
|
h2 {
|
|
font-family: 'Arial', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.5625rem;
|
|
}
|
|
|
|
/* Subtitle (Comfortaa Normal 15px) */
|
|
h3 {
|
|
font-family: 'Comfortaa', sans-serif;
|
|
font-size: .9375rem ; /* 15px for subtitle */
|
|
}
|
|
|
|
/* Body Large (Calibri Normal 20px) */
|
|
p.body-large {
|
|
font-family: 'Calibri', sans-serif;
|
|
font-size: 1.25rem; /* 20px for body large */
|
|
}
|
|
|
|
/* Body Strong (Calibri Bold 16px) */
|
|
strong {
|
|
font-family: 'Calibri', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1rem; /* 16px for body strong */
|
|
}
|
|
|
|
/* Body (Calibri Normal 16px) */
|
|
p.body {
|
|
font-family: 'Calibri', sans-serif;
|
|
font-size: 1rem; /* 16px for regular body text */
|
|
}
|
|
|
|
/* Captions (Arial Bold 11px) */
|
|
figcaption {
|
|
font-family: 'Arial', sans-serif;
|
|
font-weight: bold;
|
|
font-size: .6875rem; /* 11px for captions */
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
html{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
} |