/*Wet Paint Font*/
@font-face {
    font-family: 'rubik_wet_paintregular';
    src: url('Fonts/Wet Paint Font/rubikwetpaint-regular-webfont.woff2') format('woff2'),
         url('Wet Paint Font/rubikwetpaint-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*General Formatting*/


body {
    background-image:url(Images/Backgrounds/background%20gif.gif);
    display:grid;
    margin: 0;
}

p {
    color: rgb(210,210,210);
    font-family: "courier new";
    font-weight: bold;  
}

h1{
    color: rgb(210,210,210);
    font-family: "rubik_wet_paintregular";
    
}

h2{
     color: rgb(210,210,210);
    font-family: "rubik_wet_paintregular";
}

.homeart {
    display:block;
    width:80%;
    margin: auto;
    border:thick double rgb(210,210,210);
    margin-top: 10%;
}


.headingalign{
    text-align: center;
}

.imagealign{
    width: 70%;
    display: block;
    margin: auto;
}

.standarddiv {
    background-image: url(Images/Backgrounds/5025.png);
    text-align: center;
    border:thick double rgb(210,210,210);
    width:80%;
    display: block;
    margin: auto;
    padding: 5%;
}

.navlist a {
    color: rgb(210,210,210);
    text-decoration: none;
    font-family: "courier new"
}

.linked a {
    color: (rgb(246,255,117));
    text-decoration: none;
}

.linked a:visited {
     color: (rgb(246,255,117))
}


.linkedleft {
    color: rgb(246, 255, 117);
    font-family: "courier new";
}

.linkedhead {
    color: rgb(246, 255, 117);
    font-size: 20px;
}

.imagegallery{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
        "gallcol1 gallcol2 gallcol3";
    grid-gap: 2%;
    margin:5%;
}

.imagegallery img {
    width:100%;
    margin-bottom: 3%;
    border: solid;
    border-color: rgb(210,210,210);
    border-width: thin;
}

.imagegallley img:hover{

}
.giphypet {
    width:314px;
    height:321px;
    display: block;
    margin: auto;
    border: thick double rgb(210,210,210);;
}

.gallerydiv {
    background-image:linear-gradient(black,transparent),url(Images/Backgrounds/TrippyTrees.gif);
    background-position:bottom;background-size:cover;
    background-color:black;border:thick double rgb(210,210,210);
    display: block;
    margin: auto;
    width:100%;
    max-width: 1100px;
}

.gallerycolumn {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "col1 col2 col3 col4 col5";
    margin: 3%;
    grid-gap: 10px;
}

.gallerycolumn img{
    margin-bottom: 5%;
    width:100%
}

.date {
    color:chartreuse;
    font-style:italic;
}
/*!!!!!!!HEADER Start!!!!!!!!*/
.header {
    background-image: url(Images/Backgrounds/pixil-layer-Background.png);
    background-position: right;
    background-repeat: repeat-x;
    background-size:contain;
    background-color:rgb(0, 77, 77);
    display: inline-block;  
    min-height: 350px;
}

    /*header navigation menu*/
    .topmenu {
        display: inline-block;  
        float: right;
        margin-right: 3%;
        width:70%;
        text-align: right;
        font-family: rubik_wet_paintregular;
    
}
    
    .header li{
        display:inline-block;
        margin-left: 4%
}

    .topmenu a,
    .topmenu a:visited{
        color:black;
        text-decoration: none;
        font-size: 17px;
        font-family: "rubik_wet_paintregular";
}

    .topmenu a:hover {
        color:rgb(246, 255, 117);
}
    
    .resizelogo{
        width:120px
}

    /*JellyBeast Drip*/ 
    .titledrip{
        display: block;
        margin: auto;
        width:55%;
}
/*!!!!!!HEADER End!!!!!!*/


/*!!!!!!MIDSECTION Start!!!!!!*/
.midcentering{
    display: block;
    margin: auto;
    width:100%;
    max-width: 1100px;
}
.midsection {
    display:grid;
    margin-left: 1%;
    margin-right: 1%;
    grid-template-areas: 
        "leftaside middlecontent rightaside";
    grid-template-columns: 3fr 8fr 3fr;
    column-gap: 1%;
}
.leftaside{
    grid-area: leftaside;
    background-image: linear-gradient(black, transparent), url(Images/Backgrounds/TrippyTrees.gif);
    background-position: bottom;
    background-size:cover;
    background-color: black;
    border: thick double rgb(210,210,210);
    border-radius: 5px;
    margin-top: 60px;
    padding-bottom: 10%
}
    /*Middle Content Below*/
.middlecontent{
    grid-area: middlecontent;
    background-color: black;
    background-image: linear-gradient(black, transparent), url(Images/Backgrounds/TrippyTrees.gif);
    background-position: bottom;
    background-size:cover;
    border: thick double rgb(210,210,210);
    border-radius: 5px;
    padding-bottom: 10%;
}

.mid2{
    border-top: thick double rgb(210,210,210);
    display:grid;
    grid-template-areas: 
        "mid2-1 mid2-2";
    grid-template-columns: 
        1fr 3fr;
}

.mid2-1 {
    border-right: thick double rgb(210,210,210);
}

.mid2-1 a {
    text-decoration: none;
}

.button1 {
    background-image: url(Images/Backgrounds/5025.png);
    padding: 5%;
    border:solid;
    border-color:rgb(210,210,210);
    border-width:thin;
    border-radius: 20px;
    margin:5%;
    color: rgb(210,210,210);
    font-family: "rubik_wet_paintregular";
}

.button1:hover {
    background-color: rgb(210,210,210);
    color: black;
    background-image: none;
}

.artbuttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
        "portfolio photos artarchive"
}

.artbuttons h3 {
    font-family: "courier new";
    text-align: center;
    color: rgb(210,210,210);
}

.artbuttons div {
    background-image: url(Images/Backgrounds/5025.png);
    width:90%;
    display: block;
    margin: auto;
    padding-top: 10%;
    border-radius: 10px;
    border:solid;
    border-color: rgb(210,210,210);
}

.portfolio h3{
    color: rgb(210,210,210);
}

.artbuttons div:hover{
    background-image: none;
    background-color: rgb(59,59,59);
}


.button3 {
    background-image: url(Images/Backgrounds/5025.png);
    text-align: center;
    display: block;
    width: 70%;
    margin: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    border: solid;
    border-color: rgb(210,210,210);
    border-radius: 5px;
    color: rgb(210,210,210);
    font-family: "courier new";
}

.button3:hover {
    background-color: rgb(210,210,210);
    background-image: none;
    color: black;  
}

.mid-3 {
    border-top: thick double rgb(210,210,210);
}

.centerbuttwall {
   
}


.rightaside{
    grid-area: rightaside;
    background-color: black;
    background-image: linear-gradient(black, transparent), url(Images/Backgrounds/TrippyTrees.gif);
    background-position: bottom;
    background-size:cover;
    border: thick double rgb(210,210,210);
    border-radius: 5px;
    margin-top: 60px;
    padding-bottom: 10%;
}
/*!!!!!!MIDSECTION End!!!!!!*/



/*!!!!!!FOOTER Start!!!!!!*/
.footer {
    background-color: black;
    padding-top: 30px;
}
/*!!!!!!FOOTER End!!!!!!*/