@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

body {
    background-image: linear-gradient(308deg,#F882F3 0%, #FFCEF2 34%, #FFA783 100%);
    height: auto;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Montserrat';
    text-align: left;
    font-size: 14px;
    }
    
    .big {
        display: grid; 
        grid-template-columns: 18% 58%; 
        grid-template-rows: repeat(7, min-content); 
        margin: 5%;
        height: min-content;
        border: double 6px #F882F3; 
        border-radius: 5px 5px; row-gap: 1%; 
        column-gap: 1%; 
        padding: 0.7%
    }
    
    .nameBanner {
        grid-column-start: 1;  
        grid-column-end: end; 
        grid-row-start: 1;  
        grid-row-end: 2; 
        border-radius: 5px 5px 0 0;
    }
    
    .linkBanner {
        grid-column-start: 1; 
        background-color: rgba(200, 200, 200, 0.4); 
        grid-column-end: end; 
        grid-row-start: 2;  
        grid-row-end: 3; 
        display: flex; 
        flex-direction: row; 
        justify-content: space-around;
        height: 25px;
    }
    
    .footerBanner {
        grid-column-start: 1;
        grid-column-end: end; 
        grid-row-start: 7; 
        grid-row-end: 8; 
        border-radius: 0 0 5px 5px;
    }
    
    .mainStrip {
        grid-column-start: 2;  
        grid-column-end: 3; 
        grid-row-start: 3; 
        grid-row-end: end;
    }
    
    .left1 {
        grid-column-start: 1;  
        grid-column-end: 2;  
        grid-row-start: 3;  
        grid-row-end: 4;
    }
    
    .left2 {
        grid-column-start: 1;  
        grid-column-end: 2;  
        grid-row-start: 4; 
        grid-row-end: 5;
    }
    
    .left3 {
        grid-column-start: 1;  
        grid-column-end: 2; 
        grid-row-start: 5;  
        grid-row-end: 6;
    }
    
    .right1 {
        grid-column-start: 3; 
        grid-column-end: 4; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
    
    .right2 {
        grid-column-start: 3; 
        grid-column-end: 4;  
        grid-row-start: 4; 
        grid-row-end: 5;
        
    }
    
    .right3 {
        grid-column-start: 3;  
        grid-column-end: 4;  
        grid-row-start: 5; 
        grid-row-end: 6;
    }
    
    .right4 {
        grid-column-start: 3;  
        grid-column-end: 4; 
        grid-row-start: 6;  
        grid-row-end: 7;
    }
    
    .boxTop {
        height: 16px; 
        border-radius: 2px 2px 0px 0px; 
        width: 92%;
        padding: 0% 4% 0% 4%; 
        font-size: 13px;
        background-color: #F882F3;
        overflow: hidden;
    }
    
    .workBar {
       width: 92%; 
       height: 12px; 
       padding: 0% 4% 0% 4%; 
       font-size: 10px; 
       background-color: rgba(200, 200, 200, 0.4); 
       text-align: left;
       border-bottom: solid 1px #aaa;
   }
    
    .boxBody {
        border-radius: 0px 0px 2px 2px; 
        width: 92%;
        text-align: left;
        background-color: rgba(200, 200, 200, 0.4);
        padding: 4%;
    }

   .boxWrapper {
       text-align: left;
       width: 100%;
   }
   
   a {
       text-decoration: none;
       text-align: left;
       color: black;
       border-bottom: solid 3px #F882F3;
   }
   
   a:hover {
       margin-top: 4px;
   }
    
    @media screen and (max-width: 700px) {
        
       .big {
            grid-template-rows: repeat(11, min-content);
            grid-template-columns: 30% 70%; 
        }
        
    	.right1 {
            grid-column-start: 1; 
            grid-column-end: 2; 
            grid-row-start: 6; 
            grid-row-end: 7;
        }
        
        .right2 {
            grid-column-start: 1; 
            grid-column-end: 2;  
            grid-row-start: 7; 
            grid-row-end: 8;
            
        }
        
        .right3 {
            grid-column-start: 1;  
            grid-column-end: 2;  
            grid-row-start: 8; 
            grid-row-end: 9;
        }
        
        .right4 {
        grid-column-start: 1;  
        grid-column-end: 2; 
        grid-row-start: 9;  
        grid-row-end: 10;
    }
        
        .footerBanner {
            grid-row-start: 10; 
            grid-row-end: 11; 
        }
    }