.main-body-box {
    align-self: center;
    width: 80%;
    height:fit-content;
    border-style: groove;
    border-width: 0.5vw;
    border-color: rgb(50, 50, 50);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.531);
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    'about-me misc-info'
    'about-me muh-containment';
}

.about-me {
    grid-area: about-me;
    border-style: groove;
    border-width: 0.5vw;
    border-color: rgb(50, 50, 50);
    border-style: none ridge none none;
}

.about-me p {
    margin: 2%;
    padding: 0;
    font-family: Exclusive-Editorial;
    color: white;
    font-size: 1.6vmax;
    text-align: justify;
    text-shadow:  0px 0px 2px rgba(247, 197, 15, 0.978);
}

#hello {
    color:#ffe4a5;
    text-shadow:  0px 0px 5px rgba(255, 255, 255, 0.978);
}

#name {
    color:#3cffbe;
    text-shadow: 0px 0px 2px #3cffbe;
}

#ukraine {
    text-shadow: none;
    background: linear-gradient(to bottom, #0057B7, #0057B7, #0057B7, #0057B7, #FFDD00, #FFDD00, #FFDD00, #FFDD00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:  0px 0px 1px rgba(255, 255, 255, 0.207);
}

#house {
    transition: text-shadow 0.1s;
    text-shadow:  0px 0px 2px rgba(247, 197, 15, 0.978);
}

#house:hover {
    text-shadow: 3px 3px 1px rgb(19, 23, 255);
}


.misc-info {
    grid-area: misc-info;
    border-style: groove;
    border-width: 0.5vw;
    border-color: rgb(50, 50, 50);
    border-style: none none ridge none;
}

.misc-info p {
    margin: 2%;
    padding: 0;
    font-family: Exclusive-Editorial;
    color: white;
    font-size: 1.5vmax;
    text-align: justify;
    text-shadow:  0px 0px 4px rgba(247, 197, 15, 0.978);
}

#WIP {
    color: rgb(255, 234, 3);
}

#blog {
    color: rgb(135, 0, 231);
    text-shadow:  0px 0px 4px rgba(77, 0, 139, 0.978);
}

#PHP {
    color: rgb(0, 94, 255);
    text-shadow:  0px 0px 4px rgba(0, 30, 139, 0.978);
}

#muh-text {
    font-family: HeyComic;
    font-size: 1.3vmax;
    text-shadow:  0px 0px 2px rgba(247, 197, 15, 0.978);
}

.muh-containment {
    grid-area: muh-containment;
    display: grid;
    grid-template-columns: 4fr 3fr;
    grid-template-rows: 1fr 5fr 1fr;
    grid-template-areas:
    'muh-title-1 muh-title-1'
    'muh muh-arrow'
    'muh-title-2 muh-title-2';
}
.muh-containment div {
    margin: 0;
    padding: 0;
}

.muh-title {
    grid-area: muh-title;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.muh-title p {
    margin: 0 1.5vw;
    margin-top: -0.5vh;
    margin-bottom: 0.3vh;
    padding: 0;
    background: linear-gradient(0deg, red, rgb(255, 153, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 2vw;
    font-family: X-Scale;
    text-align: justify;
}

.muh-title img {
    height: 1.6vmax;
}

#muh-title-1 {
    grid-area: muh-title-1;
    border-style: groove;
    border-width: 0.5vmax;
    border-color: rgb(50, 50, 50);
    border-style: none none ridge none;
}

#muh-title-2 {
    grid-area: muh-title-2;
    border-style: groove;
    border-width: 0.5vmax;
    border-color: rgb(50, 50, 50);
    border-style: ridge none none none;
}


.muh {
    grid-area: muh;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
}

.muh img {
    width: 80%;
    padding: 1%;
    border-style: double;
    border-width: 0.6vw;
    border-radius: 1vmax;
    border-color: #4a78ff;
    outline: 0.2vw dotted rgb(9, 255, 218); /* outer border */
    outline-offset: -0.35vw; /* gives some space between two borders */
}

.muh-arrow {
    padding: 0;
    margin: 0;
    grid-area: muh-arrow;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.muh-arrow p {
    padding: 0;
    margin-top: 2vh;
    margin-bottom: 2vh;
    background: linear-gradient(0deg, red, rgb(255, 153, 0));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 2vmax;
    font-family: X-Scale;
    text-align: justify;
}

.muh-arrow img {
    height: 2.5vmax;
}

#muh {
    font-family: HeyComic;
    font-size: 1vmax;
    color:#ffffff;
}

@media (max-width: 768px) { 

    #home {
        grid-area: home;
    }

    #blog {
        grid-area: blog;
        text-align: center;
    }

    #writing {
        grid-area: writing;
        text-align: center;
    }
    #gallery {
        grid-area: gallery;
        text-align: center;
    }

    #other {
        grid-area: other;
        text-align: center;
    }

    .misc-info {
        grid-area: misc-info;
        border-style: groove;
        border-width: 0.5vw;
        border-color: rgb(50, 50, 50);
        border-style: ridge none ridge none;
    }

    .main-body-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
        'about-me'
        'misc-info'
        'muh-containment';
    }
}