@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai&family=Lora:ital@1&family=Montserrat:wght@500&display=swap');

/* font-family: 'Hind Madurai', sans-serif; <- paragraphs
font-family: 'Lora', serif; <- sub-headings; taglines
font-family: 'Montserrat', sans-serif; <- headings */

*,::after,::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
} /*16px*/

:root{
    /* typography, fonts */
    --headingFont: 'Montserrat', sans-serif;
    --bodyFont: 'Hind Madurai', sans-serif;
    --taglineFont: 'Lora', serif;
    --smallText: 0.7em;

    /* colors */
    --primary-500-dark: #12263A;

    /* DARK */
    /* --primary-100: #cccfd8;
    --primary-200: #999fb1;
    --primary-300: #666e8b;
    --primary-400: #333e64;
    --primary-500: #000e3d;
    --primary-600: #000b31;
    --primary-700: #000825;
    --primary-800: #000618;
    --primary-900: #00030c; */
    /* primary */
    --primary-100: hsl(206, 82%, 91%);
    --primary-200: hsl(206, 84%, 83%);
    --primary-300: hsl(206, 83%, 75%);
    --primary-400: hsl(206, 84%, 66%);
    --primary-500: hsl(206, 83%, 58%);
    --primary-600: hsl(206, 61%, 46%);
    --primary-700: hsl(206, 61%, 35%);
    --primary-800: hsl(206, 61%, 23%);
    --primary-900: hsl(206, 62%, 11%);
    /* grey */
    --grey-50: hsl(210, 40%, 98%);
    --grey-100: hsl(210, 40%, 96%);
    --grey-200: hsl(214, 32%, 91%);
    --grey-300: hsl(213, 27%, 84%);
    --grey-400: hsl(215, 20%, 65%);
    --grey-500: hsl(215, 16%, 47%);
    --grey-600: hsl(215, 19%, 35%);
    --grey-700: hsl(215, 25%, 27%);
    --grey-800: hsl(217, 33%, 17%);
    --grey-900: hsl(222, 47%, 11%);


    --black: #222;
    --white: #fff;
    --red-light: #f8d7da;
    --red-dark: #842029;
    --green-light: #d1e7dd;
    --green-dark: #0f5132;

    /* rest of the vars */
    --backgroundColor: var(--grey-50);
    /* --textColor: var(--grey-900); */
    --textColor: var(--grey-900);

    --borderRadius: 0.25rem;
    --letterSpacing: 1px;
    --transition: 0.3s ease-in-out all;
    --max-width: 1120px;
    --fixed-width: 600px;

    /* box shadow */
    --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
    background: var(--backgroundColor);
    font-family: var(--bodyFont);
    font-weight: 400;
    line-height: 1.75;
    color: var(--textColor);
    padding: 1rem 2rem;
    max-width: 720px;
    margin: auto;
}

p {
    margin-bottom: 1.5rem;
    max-width: 40em;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    margin-bottom: 1rem;
    font-family: var(--headingFont);
    font-weight: 400;
    line-height: 1.3;
    text-transform: capitalize;
}

h1 {
    margin-top: 0;
    font-size: 1.75rem;
}

h2 {font-size: 1.5rem;}

h3 {font-size: 1.25rem;}

h4 {font-size: 1rem;}

h5 {font-size: 1rem;}

small, .text_small {
    font-size: var(--smallText);
}

/* .tagline{
    font-family: 'Lora', serif;
} */

a{
    text-decoration: underline;
}

ul{
    list-style-type: none;
    padding: 0;
}

/* IMAGES */
.img{
    width: 100%;
    display: block;
    object-fit: cover;
}


/* BUTTON */
.btn{
    cursor: pointer;
    color: var(--white);
    background-color: var(--primary-500);
    border: transparent;
    border-radius: var(--borderRadius);
    letter-spacing: var(--letterSpacing);
    padding: 0.375rem 0.75rem;
    box-shadow: var(--shadow-1);
    transition: var(--transition);
    text-transform: capitalize;
    display: inline-block;
}
.btn:hover{
    background-color: var(--primary-700);
    box-shadow: var(--shadow-3);
}
.btn-hipster{
    color: var(--primary-500);
    background-color: var(--primary-200);
}
.btn-hipster:hover{
    color: var(--primary-200);
    background-color: var(--primary-700);
}
.btn-block{
    width: 100%;
}

/* ALERTS */
.alert{
    padding: 0.375rem 0.75rem;
    margin-bottom: 1rem;
    border-color: transparent;
    border-radius: var(--borderRadius);
}
.alert-danger{
    color: var(--red-dark);
    background-color: var(--red-light);
}
.alert-success{
    color: var(--green-dark);
    background-color: var(--green-light);
}


/* FORM */
.form{
    width: 90vw;
    max-width: var(--fixed-width);
    background-color: var(--white);
    border-radius: var(--borderRadius);
    box-shadow: var(--shadow-2);
    padding: 2rem 2.5rem;
    margin: 3rem auto;
}

.form-label{
    display: block;
    font-size: var(--smallText);
    margin-bottom: 0.5rem;
    text-transform: capitalize;
    letter-spacing: var(--letterSpacing);
}

.form-input,.form-textarea{
    width: 100%;
    padding: 0.375rem 0.75rem;
    border-radius: var(--borderRadius);
    background-color: var(--grey-50);
    border: 1px solid var(--grey-200);
}

.form-row{
    margin-bottom: 1rem;
}

.form-textarea{
    height: 7rem;
}

::placeholder{
    font-family: inherit;
    color: var(--grey-400);
}

.form-alert{
    color: var(--red-dark);
    letter-spacing: var(--letterSpacing);
    text-transform: capitalize;
}

/* LOADING */
@keyframes spinner{
    to{
        transform: rotate(360deg);
    }
}

.loading{
    height: 6rem;
    width: 6rem;
    border: 5px solid var(--grey-400);
    border-radius: 50%;
    border-top-color: var(--primary-500);
    animation: spinner 0.6s linear infinite;
}

.loading{
    margin: 0 auto;
}

/* title */
.title{
    /* text-align: center; */
}

.title::before{
    /* content: '-'; */
    /* margin-right: 10px; */
}
.title-underline{
    background: var(--primary-500);
    width: 7rem;
    height: 0.25rem;
    margin: 0 auto;
    margin-top: -1rem;
}

/* added styles */
/* GENERAL */
/* body{
    border-top: 5px solid var(--primary-500);
} */

.header, .section{
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.section{
    /* margin: auto; */
    /* max-width: 40em; */
}

.info-container{
    margin-bottom: 1rem;
}

.list-title{
    display: inline;
}

li::before{
    content: "\003E";
    margin-right: 0.375rem;
}

.sub-list{
    margin-left: 2rem;
}

.sub-list-title{
    font-weight: 700;
}

.sub-list li::before{
    content: "\203A";
    margin-right: 0.375rem;
}

/* HEADER */
.name{
    line-height: 1;
    font-size: 1.75rem;
    display: inline;
}
.tagline{
    line-height: 1.2;
    font-size: 1.5rem;
    font-family: 'Lora', serif;
}
.degree{
    margin: 0;
    /* font-style: italic; */
    font-weight: 1.2rem;
    display: inline;
}

/* TOC */

/* TECHNICAL EXPERTISE */

/* PROJECTS */
.single-project{
    margin: 1.25rem 0;
}
.single-project p{
    margin: 0;
}

.project-1{
    margin-top: 0;
}


/* EDUCATION */
.contact p{
    /* background-color: red; */
    margin: 0.25rem 0;
}