/* css/main.css */

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Inconsolata:wght@200..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --darkBlue: rgb(47, 55, 127);
    --darkGray: rgb(34, 31, 28);
    --white1: rgb(171, 187, 193);
    --Cobalt-blue: hsl(234, 85%, 45%);
    --Royal-blue: hsla(241, 87%, 24%, 0.233);
    --Font-Size-Normal: 18px;
    --Font-Size-Title: 25px;
    --Font-Size-Header: 25px;
    --Font-Size-Footer: 22px;
    --Font-Family-Normal: Nunito;
    --Font-Family-Title: Roboto;
    --Font-Family-Name: Hind;
    --Page-Width-Max: 1600px;
    --Page-Width-Min: 600px;
    --Header-Height: 100px;
    --Card-Image-Height: 190px;
    --Card-Image-Column: 42%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: black;
    /* border: 1px purple dashed; */
    font-family: var(--Font-Family-Normal), Arial, sans-serif;
    font-size: var(--Font-Size-Normal);
}


header,
main,
footer {
    max-width: var(--Page-Width-Max);
    margin: auto;
}

header,
footer {
    background-color: green;
    color: white;
}

body {
    min-width: var(--Page-Width-Min);
}

.round {
    border-radius: 50%
}

.center {
    text-align: center
}

.bold {
    font-weight: 700
}

.white-font {
    color: white
}

.green-font {
    color: darkgreen
}

.underline {
    text-decoration: underline
}

.clickable {
    cursor: pointer
}

.relative {
    position: relative;
}

.marginTop10 {
    margin-top: 10px
}

.marginTopMinus30 {
    margin-top: -30px
}

.marginTop20 {
    margin-top: 20px
}

.marginTop40 {
    margin-top: 40px
}

.marginTop60 {
    margin-top: 60px
}