@keyframes Big2small {
    from {
        width: 248.3px;
        height: 200px;
    }
    to {
        width: 300px;
        height: 220px;
    }
}

@keyframes small2Big {
    from {
        width: 300px;
        height: 220px;
    }
    to {
        width: 248.3px;
        height: 200px;
    }
}
@keyframes PostBig2Small {
    from {
        width: 80vw;
        max-width: 800px;
    }
    to {
        max-width: 900px;
        width: 90vw;
    }
}
@keyframes PostSmall2Big {
    to {
        width: 80vw;
        max-width: 800px;
    }
    from {
        max-width: 900px;
        width: 90vw;
    }
}


.MainOptionContainer {
    margin: auto;
    position: relative;
    display: block;
    top: 50%;
    transform: translateY(7%);
    text-align: center;
}


.opt {
    display: inline-block;
    cursor: pointer;
    padding: 20px;
    max-height: 160px;
    
}

.opt h1 {
    margin-top: 12%;
}

.opt img {
    height: 60px;
    width: 60px;
}  

.MenuButtons {
    display:inline-block;
    margin-inline: 1%;
    text-decoration: none;
    color: hsl(101, 100%, 60%);
    outline-width: 5pt;
    outline-color: rgb(115, 255, 1);
    outline-style:solid;
    transition: 0.2s ease-out;
    animation: small2Big 0.2s ease-in;
}

.MenuButtons:hover {
    /*outline-width: 3pt;
    outline-offset: 2pt;
    outline-color: hsl(101, 100%, 60%);
    outline-style: solid;*/

    color: hsl(102, 100%, 61%);
    background-color: hsla(101, 100%, 60%, 0.429);
    
    font-size:xx-large;
    text-decoration: underline;
    transition: 0.2s ease-in;

    width: 300px;
    height: 220px;
    animation: Big2small 0.2s ease-in;
}

.ImageMeger {
    margin: auto;
    display: block;
    height: 100px;
    width: 100px;
}

.Content_blocks {
    padding-top: 20px;
    margin: auto;
    margin-top: 2%;

    width: 80vw;
    max-width: 800px;


    outline-width: 5pt;
    outline-color: rgb(115, 255, 1);
    outline-style:solid;
    transition: 0.2s ease-out;
    animation: PostBiSmall2Big 0.2 ease-out;
}

.BigBoyTitle {
    display: flex;
    padding-right: 20px;
}

.SmallBoyCont {
    padding-bottom: 2px;
    padding-inline: 12px;
    display: inline-block;
}

.Date {
    display: inline-block;
}
.Status {
    display: inline-block;
    padding-left:300px;
}
.Description {
    display: block;
}

h2 {
    margin: 6px;
}

.Content_blocks img {
    margin-left: 20px;
    margin-right: 70px;
    height: 100px;
    width: 100px;
    filter: grayscale(80%);
    filter: saturate(20%);
    filter: contrast(70%);
    mix-blend-mode:screen;
    
}

.Content_img {
    margin-left: 20px;
    margin-right: 70px;
    filter: grayscale(80%);
    filter: saturate(20%);
    filter: contrast(80%);
    mix-blend-mode:screen;
    
}

.Contents {
    background-color: rgba(255, 255, 255, 0.863);
    padding-inline: 10px;
    margin-inline: 20px;
    margin-top: 20px;
    color: rgb(32, 32, 32);
    font-family: Fancy;
}

hr {
    border-style: solid;
    border-width: 5px;
    color: rgb(115, 255, 1);
}

.PostButton {
    text-decoration: none;
    color: hsl(101, 100%, 60%);
}

.PostButton:hover {
    /*outline-width: 3pt;
    outline-offset: 2pt;
    outline-color: hsl(101, 100%, 60%);
    outline-style: solid;*/

    color: hsl(102, 100%, 61%);
    background-color: hsl(101, 100%, 50%);
    
   
    transition: 0.2s ease-in;
}
.Content_blocks:hover {
    background-color: hsla(101, 100%, 50%, 0.291);
    animation: PostBig2Small 0.2 ease-in;
    max-width: 900px;
    width: 90vw;
}

.ProjPosts {
    margin: auto;
    position: relative;

    width: 80vw;

    max-width: 800px;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 2vw;

    outline-width: 3pt;
    outline-color: rgb(115, 255, 1);
    outline-style:solid;
    margin-top: 5%;

}