/* Css reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Css reset end */

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwkT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwAT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwgT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwcT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwsT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwoT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvnUwQT9mI1F54.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcvvYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcvmYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcvuYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcvhYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }
/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcvtYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcvsYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCo3FwrK3iLTcviYwYZ8UA3.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
/* latin-ext */
@font-face {
    font-family: 'Kavoon';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kavoon/v24/pxiFyp4_scRYhlUIPbD7XVlNEM-K.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
/* latin */
@font-face {
    font-family: 'Kavoon';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/kavoon/v24/pxiFyp4_scRYhlUIM7D7XVlNEA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root{
    --Teal :#4CA7C0;
    --Purple: #484FB7;
    --Lavender: #6B8FE7;
    --Yellow: #E9BB57; 
    --Pink:#D9526F;
    --Dark-gray:#1E1E1E; 
    --White:#ffffff; 
    }

    h1, h2 {
    font-family: 'Kavoon', cursive;
    }

    h1 {
    font-size: 3em;
    color: var(--White);
    text-align: center;
    padding: 30px 10px 0px;
    }

    header p{
        color: var(--White);
        text-align: center;
        padding: 10px 0px 40px;
    }

    h2, h3, h4, p, li {
    font-family: 'Inter', sans-serif;
    }

    nav h2 {
    font-size: 1.5em;
    color: var(--Dark-gray);
    }

    h2 {
    font-size: 2em;
    }   

    h3 {
    font-size: 1.5em;
    }

    h4 {
    font-size: 1.15em;
    }

    main{
        background-color: var(--Purple);
    }

    body{
        max-width: 450px;
        background-color: var(--Lavender);
        margin: auto;
    }

    body h2{
        color: var(--White);
        font-family: kavoon;
        padding: 15px 0px 5px 15px ;
    }

    body h3{
        color:#E9BB57;
        font-weight:bold;
        padding: 0px 10px 0px 15px;
    }


    header{
    background-color: var(--Purple);
    }

    nav{
        background-color: var(--Yellow);
        padding: 10px;
    }

    nav h2{
        color: var(--Dark-gray);
        font-family: Inter;
        font-weight: bold;
        font-style: italic;
        text-align: center;
    }

    nav li{
        background-color: var(--White);
        color: var(--Purple);
        font-weight: bold;
        text-align: center;
        padding: 10px;
        margin: 10px 20px 10px;
    }

    div{
        background-color: var(--White);
        margin: 20px;
        padding: 10px;
        border-radius: 10px;
    }

    div p{
        color:#1E1E1E;
        font-weight:normal;
        line-height: 20px;
        font-weight: 500;
        padding: 0px 15px 15px;
    }

    div h4{
        color: var(--Purple);
        font-weight: bold;
        margin-bottom: 10px;
        padding: 0px 15px;
    }

    div img{
        max-width: 100%;
        padding: 10px;
    }

    /* pink div styles */

    .pink{
        margin:0px;
        border-radius: 0px;
        padding: 0px;
        background-color: var(--Pink);
    }

    .pink ul{
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .teal {
        background-color: var(--Teal);
        border-radius: 10px;
        padding: 35px; 
        font-weight: bold;
        text-align: center;
        margin: 5px 15px 15px;
    }

    .blue {
        background-color: var(--Lavender);
        border-radius: 10px;
        padding: 35px; 
        font-weight: bold;
        text-align: center;
        margin: 5px 15px 15px 0px;
    }

    .yellow {
        background-color: var(--Yellow);
        border-radius: 10px;
        padding: 35px; 
        font-weight: bold;
        text-align: center;
        margin: 0px 15px 15px;
    }

    .white {
        background-color: var(--White);
        border-radius: 10px;
        padding: 35px; 
        font-weight: bold;
        text-align: center;
        margin: 0px 15px 15px 0px;
    }

    .pink p{
        color: var(--White);
    }


    /* table styles*/

    table{
        Margin: auto;
        background-color: var(--Yellow);
        font-family: inter;
        border: solid 2px var(--Yellow);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    td{
        padding: 10px;
        background-color: var(--White);
        border: solid 2px var(--Yellow);
    }

    th{
        padding: 15px;
        font-weight: bold;
    }

    /* button styles */

    button{
        font-weight: bold;
        font-family: Inter;
        background-color: var(--White);
        border: none;
        font-size: .7 rem;
        border-radius: 10px;
        box-shadow: 5px 5px 5px #1E1E1E;
        padding: 20px 120px; 
        margin: 5px 45px 10px;
        
    }

    footer{
        font-size: .7rem;
        font-family: Inter;
        color: var(--White);
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        height:80px;
        align-items: center;
    }

    footer a{
        color: var(--White);
    }