/*=============
Resetting CSS
==============*/
*, *::before, *::after {
    box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
    font: inherit;
}

html {
    color-scheme: dark light;
}

body {
min-height: 100vh;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    text-wrap: balance;
}

p,
li,
figcaption {
    text-wrap: pretty;
    max-width: 65ch;
}

header, 
footer,
main,
section,
article {
    container-type: inline-size;
}

/*==========================
Declaring Custom Properties
============================*/
:root {
    --body-bg-color: #2A2348; 
    --body-font-color: #F0E5F2;
    --links-color: rgb(174, 195, 229);
    --font-size-p: clamp(16px, 16px, 1rem);
    --font-family-p: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*=============
Styling Body
=============*/
.page {
    display: flex;
    flex-direction:column;
    flex-basis: 320px;
    flex-grow: 1;
    height: 100%;
    padding: 40px;
    background-color:var(--body-bg-color);
    color: var(--body-font-color);
    text-align: center; 
}

/*==============
Styling main
===============*/
main {
    overflow: auto;
    padding-bottom: 100px;
    height: 1000px;
}

.main-plot {
    height: 1400px;
}

.main-about {
    height: 1200px;
}

.main-contact {
    height: 1100px;
}

.main-thanks {
    height: 700px;
}

/*========================
Centering the paragraphs
==========================*/
.article-index {
    justify-items: center;
}

/*=====================
Styling the page titles 
=======================*/
h1 {
    font-size: 2rem;
    text-shadow: 5px 2px 4px rgb(168, 130, 238);
    margin-bottom: 2rem;
    margin-top: 4rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: oblique;
}

h2, 
h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    margin-top:4rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: oblique;
}

h3 {
    font-size: 2rem;
}
/*==============================
Extra styling for the text fonts
(not the links)
================================*/
main p, 
footer p {
    word-spacing: 1px;
    line-height: 1.3rem;
}

main p, 
footer p, 
nav ul p {
    font-family: var(--font-family-p);
    font-size: var(--font-size-p);
}

/*=======================
Styling external links
=========================*/
a:link {
    text-decoration: none;
    color:var(--links-color); 
}
a:visited {
    color:var(--links-color);
}
a:hover {
    background-color: hsl(250  40%  50%);
}
a:active {
    color:#9763f8;
}

/*====================
Styling site nav menu
======================*/
nav ul {
    list-style-type: none;
    overflow: hidden;
}

ul {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}
/*=====================
Styling site nav links 
========================*/
#nav-active {
    color: rgb(200, 174, 246);

}

#nav-link-1, 
#nav-link-2,
#nav-link-3 {
    color: var(--links-color);
}

a:hover p {
    background-color: hsl(250  40%  50%);
}

/*=============
Styling images
==============*/
figure {
    display: flex;
    justify-content: center;
    justify-self: center;
    margin-block: 3rem;
    width: max(45%, 50%);
}
img {
    border-radius: 10px;
}
.image-maastricht {
    margin-top: 5rem;
}
.centrum-maastricht {
    width:100%;
}
/*====================================
Styling Urdu writing and writing icon
on Contact page
======================================*/
.urdu {
    justify-items: center;
}
.icon {
    font-size: 3rem;
    color: hsl(292, 33%, 72%);
    margin-left: 0.3rem;
}

/*==================
Styling book quotes 
===================*/
blockquote {
    background-color: hsl(200 40%  50%);
    margin-block: 2rem;
    height: 4rem;
    max-width: 25ch;
    border-radius: 10px;
    padding: 3px;
    justify-self: end;
    font-size: min(16px, 18px);
}

.quote-2 {
    height: 8rem;
}

/*===================
Styling contact form
=====================*/
form {
    display:flex;
    flex-direction: column;
    background-color:hsl(215 40%  50%) ; 
    padding: 5px;
    border-radius: 10px;
    margin-top: 5rem;
}

label {
    display:flex;
    justify-content:flex-start;
    margin-left: 1rem;
    margin-block: 0.3rem;
}
/*-----------------------------------
Styling form input fields and button
-------------------------------------*/
input,
textarea,
.btn {
    border-radius: 10px;
    padding: 5px;
}
.submit-btn {
    margin-block: 2rem;
}
.btn  {
    background-color: whitesmoke;
}
.btn:hover {
    color: hsl(250  40%  50%);
    background-color: rgb(219, 233, 219);
    cursor: pointer;
}
/*=====================================
Styling form focus, styling form input
=====================================*/
input,
textarea {
    outline: none;
    border: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 13rem;
}

input:focus,
textarea:focus,
.btn:focus {
    border: 3px solid hsl(205, 80%, 22%);
}
/*===========================
Styling validation for input
==============================*/
/*----------------------------------------
To make validation bg colors only appear
when needed, used :not(:placeholder-shown)
------------------------------------------*/
input:not(:placeholder-shown):invalid {
    background-color: hsl(0, 71%, 87%);
}

input:focus:invalid {
    background-color: whitesmoke;
}

input:not(:placeholder-shown):valid, 
.btn:input:not(:placeholder-shown):valid {
    background-color: rgb(223, 237, 223);
}
/*============================
Styling the form placeholders
===============================*/

input::placeholder,
textarea::placeholder {
    color: #a9a9a9;
    font-family: var(--font-family-p);
    font-size: var(--font-size-p);
}
/*==============
Styling footer
===============*/
footer {
    position: relative;
    height: 100px;
    margin-top: -100px;
    clear: both;
    color:var(--links-color); 
    justify-items: center;

    /*Link color doesn't work on all pages,
    so added here as well.*/
}