@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

html, body {
    overflow-x: hidden;
    margin: 0;
    height: 100%;
}

div {
    display: flexbox;
    width: 100% auto;
    height: 100%;
    background: radial-gradient(ellipse at top left, rgba(97, 13, 93, 1) 0%, rgba(38, 12, 59, 0.5) 100%), url("content/bg-image.jpg");
    background-size: 1920px;
}

#Top-Text {
    width: 100%;
    height: 75px;
    background: rgba(20, 20, 20, 0.75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid #6e25713f;
    border-left: none;
    border-top: none;


    font-family: "Chivo Mono", monospace;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

#Top-Text > h1 {
    padding-left: 10px;
    margin: 0px;
    color: #ad5196;
    font-size: 45px;
}

#Top-Text > h3 {
    padding-left: 10px;
    margin: 0px;
    color: #ffffff70;
    font-size: 15px;
    -webkit-text-stroke: 1px rgb(46, 0, 25);
    paint-order: stroke fill;
}

#Main-Content {
    display: grid;
    grid-template-rows: repeat(auto-fill, min-content);

    overflow-y: auto;
    overflow-x: hidden;
    row-gap: 15px;
    background-image: none;
    margin-left: 25px;
    height: 50%;

    margin-left: 25px;
    width: 100%;
    border-radius: 0px 0px 0px 50px;
    background: #ffa60018;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 60px 100px -50px rgba(0, 0, 0, 0.8);
    border: 2px solid #ffebc620;
    border-left: none;
    border-top: none;
    padding-bottom: 15px;
    padding-left: 16px;
}

/**
    #Main-Content > * {
        margin-top: 0px;
        min-height: 15.5vh;
        border-radius: 0px 0px 0px 20px;
        box-shadow: inset 35px 40px 30px -50px rgba(36, 1, 56, 0.466);
        background: rgba(33, 0, 5, 0.2);   
        border-bottom: 1px solid #ffebc62d;
        overflow: hidden;
    }
*/

.Sub-Main {
    margin-top: 0px;
    height: max-content;
    min-height: 147px;
    border-radius: 0px 0px 0px 20px;
    box-shadow: inset 35px 40px 30px -50px rgba(36, 1, 56, 0.466);
    background: rgba(33, 0, 5, 0.2);   
    border-bottom: 1px solid #ffebc62d;
    overflow: hidden; 

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 15px;
    align-items: center;
}

#Main-Content > :nth-child(1) img {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100px;
    object-fit: cover;
}

#Main-Content > :not(:first-child):not(:last-child) {
    border-radius: 20px 0px 0px 20px;
}

#Main-Content > :last-child {
    border-radius: 20px 0px 0px 50px;
}

.blog-img {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100px;
    object-fit: cover;

    margin-left: 25px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 200, 250, 0.664);
    border: 2px solid #ffffff;
    border-left: none;
    border-top: none;
}

.blog-title {
    grid-column: 2;
    grid-row: 1;

    height: 25px;
    font-family: "Caveat Brush", cursive;
    color: white;
    text-shadow: 5px 5px 10px    black;
}

.blog-text {    
    vertical-align:bottom;
    height: auto;
    font-size:22px;
    line-height: 1;
    font-family: "Caveat Brush", cursive;
    color: rgba(255, 255, 255, 0.544);
    text-shadow: 2px 2px 5px    rgba(0, 0, 0, 0.532);
}