@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Courgette&family=Sacramento&family=Satisfy&family=Shadows+Into+Light&display=swap');

html{
font-size: 62.5%;
}

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

.container {
    background-color: black;
    width: 100%;
    height: 100vh;
}
h1 {
    color: rgba(247, 252, 244, 0.877);
    text-align: center;
    font-size: 7rem;
    padding: .2em 0 .2em 0;
    font-family: 'Satisfy', cursive;
}
.parent {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    margin: 0 10rem;

    }


    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }
    .div3 { grid-area: 1 / 3 / 2 / 4; }
    .div4 { grid-area: 1 / 4 / 2 / 5; }
    .div5 { grid-area: 1 / 5 / 2 / 6; }
    .div6 { grid-area: 1 / 6 / 2 / 7; }
    .div7 { grid-area: 1 / 7 / 2 / 8; }
    .div8 { grid-area: 2 / 1 / 3 / 2; }
    .div9 { grid-area: 2 / 2 / 3 / 3; }
    .div10 { grid-area: 2 / 3 / 3 / 4; }
    .div11 { grid-area: 2 / 4 / 3 / 5; }
    .div12 { grid-area: 2 / 5 / 3 / 6; }
    .div13 { grid-area: 2 / 6 / 3 / 7; }
    .div14 { grid-area: 2 / 7 / 3 / 8; }
    .div15 { grid-area: 3 / 1 / 4 / 2; }
    .div16 { grid-area: 3 / 2 / 4 / 3; }
    .div17 { grid-area: 3 / 3 / 4 / 4; }
    .div18 { grid-area: 3 / 4 / 4 / 5; }
    .div19 { grid-area: 3 / 5 / 4 / 6; }
    .div20 { grid-area: 3 / 6 / 4 / 7; }
    .div21 { grid-area: 3 / 7 / 4 / 8; }
    .div22 { grid-area: 4 / 1 / 5 / 2; }
    .div23 { grid-area: 4 / 2 / 5 / 3; }
    .div24 { grid-area: 4 / 3 / 5 / 4; }
    .div25 { grid-area: 4 / 4 / 5 / 5; }
    .div26 { grid-area: 4 / 5 / 5 / 6; }
    .div27 { grid-area: 4 / 6 / 5 / 7; }
    .div28 { grid-area: 4 / 7 / 5 / 8; }
    .div29 { grid-area: 5 / 1 / 6 / 2; }
    .div30 { grid-area: 5 / 2 / 6 / 3; }
    .div31 { grid-area: 5 / 3 / 6 / 4; }
    .div32 { grid-area: 5 / 4 / 6 / 5; }
    .div33 { grid-area: 5 / 5 / 6 / 6; }
    .div34 { grid-area: 5 / 6 / 6 / 7; }
    .div35 { grid-area: 5 / 7 / 6 / 8; }
    


    .smileyface {
        width: 55%;
        height: 15vh; 
        position: relative;
        border-radius: 50%;
        background: #ffe632;
        background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
        box-shadow: inset 0px -14px 14px rgba(218, 54, 54, 0.445), 0px 2px 20px rgba(46, 45, 45, 0.959);
        cursor: pointer;
        opacity: 0;

    }
        
    .eyes {
        width: 10%;
        height: 2.5vh;
        background: #222;
        border-radius: 100px/160px;
        position: absolute;
        top: 40px;
        box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
        }	
        
    p.eyes.lefteye {
        left: 8rem;
    }
            
    p.eyes.righteye {
        right: 8rem;
    }
            
    .smile {
        width: 60%;
        height: 7vh;
        border-bottom: .8rem solid black;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        position: absolute;
        bottom: 2.8rem;
        left: 2.6rem;
        box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
       
    }
        
    
/* small smiley face */
    .smallSmileyFace {
        width: 40%;
        height: 10vh; 
        position: relative;
        left:10rem;
        top:2.5rem;
        border-radius: 50%;
        background: #32ffb0;
        background: -webkit-gradient(linear, left top, left bottom, from(#79e4bb), to(#32ffb0));
        cursor: pointer;
    }
        
    .eyes1 {
        width: 6%;
        height: 12%;
        background: #222;
        border-radius: 100px/160px;
        position: absolute;
        top: 30%;
        box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
        }	
        
    p.eyes1.lefteye1 {
        left: 3rem;
    }
            
    p.eyes1.righteye1 {
        right: 3rem;
    }
            
    .smile1 {
        width: 60%;
        height: 5vh;
        border-bottom: .5rem solid black;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
       
    }