@font-face {
    font-family: "Source Code Bold";
    src: url(./src/source-code-pro/SourceCodePro-Bold.ttf) format('truetype');
}
@font-face {
    font-family: "Source Code Italic";
    src: url(./src/source-code-pro/SourceCodePro-SemiBoldItalic.ttf) format('truetype');
}    

@font-face {
    font-family:"Bold Poppins";
    src: url(./src/poppins/Poppins-Black.ttf) format('truetype');
}
@font-face {
    font-family: "Italic Poppins";
    src: url(./src/poppins/Poppins-MediumItalic.ttf) format('truetype');
}
@font-face {
    font-family: 'Bitter';
    src: url(./src/Bitter/Bitter/static/Bitter-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'Bold Bitter';
    src: url(./src/Bitter/Bitter/static/Bitter-ExtraBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Italic Bitter';
    src: url(./src/Bitter/Bitter/static/Bitter-Italic.ttf) format('truetype');
}
main{
    padding: 0 80px;
}
body{
    background-color: white;
}
h1{
    font-family: oswald,sans-serif;
    margin-left: 110px ;
}

h2{
    font-family: oswald,sans-serif;
}

p{
    font-family: Poppins, sans-serif;
}


#colors, #fonts, #text-styles {
    border: 2px solid grey;
    margin: 30px;
    padding: 20px 10px;
}
section div {
    display: inline-block;
    margin: 10px;
    text-align: center;
    width: 150px;
    height: 100px;
    border-radius: 7px;
}
#cool-blue{
    background-color: #2d5dcc;
    color: white;
}
#pink {
    background-color: #d957d9;
    color:black ;
}
#mint{
    background-color: #4fe0b0;
}
#beige{
    background-color: #efd9ca;
}
#source-code-pro h3{
    font-family: 'Source Code Pro', sans-serif;
}

#source-code-pro p {
    text-align: left;
    font-family: 'Source Code Pro',sans-serif;
}
#source-code-pro #two {
    font-family: 'Source Code Bold',sans-serif;
}

#source-code-pro #three {
    font-family: 'Source Code Italic',sans-serif;
}
#poppins h3 {
    font-family: poppins;
}
#poppins p{
    font-family: poppins, sans-serif;
}
#poppins #y{
    font-family: 'Bold Poppins',sans-serif;
}
#poppins #z {
    font-family: 'Italic Poppins',sans-serif;
}
#bitter h3 {
    font-family: Bitter,serif;
}
#bitter #i{
    font-family:Bitter,serif ;
}
#bitter #j{
    font-family: 'Bold Bitter',serif;
}
#bitter #k{
    font-family: 'Italic Bitter',serif;
}

#text-styles #h1-text {
    text-align: left;
    margin-left: 0;
    font-family: 'Bold Poppins';
    font-size: 26px;
}
li{
    font-family: 'Poppins';
    font-size: 14px;
}