html, body{
        height: 100%;
        /*margin: 0;*/
        padding: 0;
        }
        
        body{

            background-color:linear-gradient(to top, #1f5a72, #f0dcd7 );
            background-repeat: no-repeat;
            background-attachment: fixed;
        }



/*NAV BAR*/

        .nav{
        color: rgb(212, 255, 215);
        background-color: #eb67bf;
        /*background-color:linear-gradient(to top, #205e77, #f0dcd7 ); */
        transition: background-color 0.5s ease;
        justify-items: right;
        padding: 10px;
        margin: 20px;
        text-align: right;
        text-decoration: none;
        border-radius: 2pc;

        /* SLIDE IN EFFECT */
        transform: translateX(-100%);
        opacity:0;
        animation: slideinnav .5s ease-out forwards;
          }
          @keyframes slideinnav {
            to{
                transform: translateX(0);
                opacity: 1;
            }
          }

          .nav:hover{
            
            background-color: #ff9add;
          }

        a{
            color:rgb(212, 255, 215);
            
            text-decoration: none;
            padding: 20px;
            

        }

        a:hover{
        color:rgb(56, 255, 72);
        transition-duration: .2s;
        transform: scale(-.5deg) scale(1.01);
    
        }

/*Logo Icon*/

        #logo1{
            
            
        }

/*Grid Container*/

     .container{
                    font-family: "Manrope", sans-serif;
                    font-optical-sizing: auto;
                    font-weight: weight;
                    font-style: normal;
                    
                    min-width: 200px;
                
                    display: grid;
                    grid-template-columns: 60% 40%;
                    
                    grid-gap: 10px;
                    margin-top: 0;
                    margin-left: 250px;
                    margin-right: 250px;
                    height: 100hv;

                    /* SLIDE IN EFFECT */
                transform: translateY(100%);
                opacity:0;
                animation: slideinnav 1s ease-out forwards;
                }

        




        
        .container div{
            
            background-color: rgb(212, 255, 215);
            padding: 25px;
            text-align: center;
            border-radius: 2pc;
            transition: transform .5s ease, background-color .5s ease; ; 
            
            
        }

        .container div:hover{
            background-color: #76ff9f;
            
            
            transform: rotate(-.5deg) scale(1.01);

        }
       

        .header{
            grid-column-start: 1;
            grid-column-end: 3;
            
            font-size: larger;

        }

        .box1{
            grid-column-start: 1;
            grid-column-end: 2;
            font-size: larger;
            
        }

        .box2{
            grid-column-start: 2;
            grid-column-end: 3;
            align-content: center;
            justify-content: center;
            overflow: hidden;
            
            
        
        }
            .box2 img{
                align-content: center;
                justify-content: center;
                max-width:120%;
                
                height: auto;
                display: block;
                
            }

        .box3{
            grid-column-start:1;
            grid-column-end: 3;
            
        
        }
        .box4{
            grid-column-start:1;
            grid-column-end: 3;
            
        
        }

         .box5{
            grid-column-start:1;
            grid-column-end: 3;
            align-content: center;
            justify-content: center;
            overflow: hidden;
            
        
        }
        .box5 img{
                align-content: center;
                justify-content: center;
                max-width:120%;
                
                height: auto;
                display: block;
                
            }

         .box6{
            grid-column-start:1;
            grid-column-end: 3;
            align-content: center;
            justify-content: center;
            overflow: hidden;
            
        
        }

        .box6 img{
                align-content: center;
                justify-content: center;
                max-width:120%;
                
                height: auto;
                display: block;
                
            }

        .box7{
            grid-column-start:1;
            grid-column-end: 3;
           
                    height: auto;
                display: block;
        }

        .box7 img{
                align-content: center;
                justify-content: center;
                max-width:120%;
                
                height: auto;
                display: block;
                
            }

        .footer{
            grid-column-start: 1;
            grid-column-end: 3;

            }