@font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/lato/v22/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    @font-face {
        font-family: 'Poppins';
        font-style: italic;
        font-weight: 200;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/poppins/v19/pxiDyp8kv8JHgFVrJJLmv1pVF9eO.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    @font-face {
        font-family: 'Roboto Mono';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotomono/v21/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_Xvq_ROW4.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    @font-face {
        font-family: 'Nunito Sans';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/nunitosans/v11/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    body {
        margin: 0% 10%;
        background-image: url(recources/more-leaves-on-green.png);
    }
    
    li {
        font-size: 30px;
    }
    
    .lato {
        font-family: 'Lato';
        font-weight: bold;
    }
    
    .poppins {
        font-family: 'Poppins';
        font-weight: bold;
    }
    
    .roboto {
        font-family: 'Roboto mono';
        font-weight: bold;
    }
    
    .pharlap {
        color: hsl(351, 17%, 56%);
    }
    
    .deepblush {
        color: hsl(346, 72%, 67%);
    }
    
    .thistle {
        color: hsl(304, 15%, 79%);
    }
    
    .intro {
        border: solid 1px black;
        border-radius: 15px;
        width: auto;
        background-color: rgb(7, 192, 177);
    }
    
    .container {
        border-radius: 15px;
        margin: 10px auto;
        padding: 10px;
        border: solid 2px black;
        background-color: rgb(7, 192, 177);
    }
    
    .color-container {
        width: 100%;
        text-align: center;
    }
    
    .colors {
        margin: 10px;
    }
    
    .pharlap:hover {
        background-color: hsl(351, 17%, 56%);
    }
    
    .deepblush:hover {
        background-color: hsl(346, 72%, 67%);
    }
    
    .thistle:hover {
        background-color: hsl(304, 15%, 79%);
    }
    
    .color-panel {
        display: inline-block;
        width: 32%;
        text-align: center;
        margin: 20px auto;
        min-height: 100px;
    }
    
    .pharlap1 {
        background-color: hsl(352, 100%, 50%);
    }
    
    .deep-blush1 {
        background-color: hsl(346, 72%, 67%);
    }
    
    .thistle1 {
        background-color: hsl(304, 15%, 79%);
    }
    
    .font-text.lato {
        text-align: left;
        font-size: 19px;
        text-decoration: underline;
    }
    
    .font-text.poppins {
        text-align: left;
        font-size: 19px;
        text-decoration: underline;
    }
    
    .font-text.roboto {
        text-align: left;
        font-size: 19px;
        text-decoration: underline;
    }
    
    .Nunito {
        font-family: 'Nunito Sans';
    }