html{
    font-size: 100%;
}

body{ /*Overall body styling and padding*/
    font-size: 100%;
    margin: 0;
    padding: 1%;
    /*Mesh gradient*/
    filter: contrast(170%) brightness(100%);
  background-image:#ff0000;
  background-image:  
  radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0, transparent 50%),  
  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0, transparent 50%),  
  radial-gradient(at 0% 50%, hsla(355,85%,93%,1) 0, transparent 50%),  
  radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0, transparent 50%),  
  radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0, transparent 50%),  
  radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0, transparent 50%),  
  radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0, transparent 50%);;
    overflow: hidden;
    

}



h1{/*H1 Zytiling i think imma use this for the nav*/
    font-family: Helvetica;
    font-weight: 100;
    font-size: 100%;
    color: black;
    text-decoration: none;
}

h2{/*Big yohermry tag styling H2*/
    font-family: 'Adamina', serif;
    font-size: 600%;
    color: black;
    line-height: 90%;
}

h3{/*Tagline stlying H3 with fancy webkit stroke we love you w3shool*/
    font-family: 'Adamina', serif;
    font-size: 550%;
    color: transparent;
	-webkit-text-stroke: .7px black;
    line-height: 100%;
}

h4,h5,h6{/*Extra Tags im not using but that are essendtal for smantics ju hurdddddd*/
    font-family: Arial, Helvetica , sans-serif;
    line-height: 1.8rem;

}

p{ /*body text styling*/
    font-size: 1rem;
    font-family: Amiri;
    font-weight: 100;
    font-size: 2vw;
    color: black;
}

.parent { /*yayyyyy i did the grid by myself lets gooooooo oh fir future refernce this is my grid*/
    display: grid; 
    grid-template-columns: .25fr repeat(2, 1fr); 
    grid-template-rows: .5fr repeat(4, 1fr); 
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    }
    .nav { grid-area: 1 / 1 / 2 / 4; } 
    .lookatme { grid-area: 1 / 2 / 2 / 4; } 
    .div3 { grid-area: 3 / 2 / 4 / 3; } /*ion think ill use this tbh*/
    .about { grid-area: 4 / 2 / 2 / 3; } 
    .gif { grid-area: 4 / 3 / 2 / 3; } 

.logo{/*lockup logo styling uhhh after sharpie thingy we may change this*/
    padding: .25%;
     
}

.wrapper{/*Flex nav styling and stuff*/
    width: 100%;
    box-sizing: border-box;
    padding: 1%;
    z-index: 10;
    
}

.flex-container{ /*flex styling and container*/
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid white;
}

.flex-container > div{ /*flex assigmnet to all div properties, all div in class */
    width: 15%;
    min-width: 1%;
    min-height: 1%;
    margin: 0px;
    text-align: center;
    line-height: .1rem;
    font-size: 100%;
}

.lookatme{/*Moving my name tag down in the grid*/
    margin-top: 100px;
}


.gif{ /*Dream more gif positioning*/
    margin-top: -250px;
    
}

a:hover { /*hover styling on nav items*/
    TEXT-DECORATION: none; 
    
}

.blobs{ /*large mesh bg image*/
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;

    z-index: -1;
}

.blobs img{ /*now we mush make the mesh cover the screen*/
    position: absolute; 
    top: 50; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;

}