body, div, main, section, article {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(to right, #B650FF, #64279F);
}

header img {
    width: 500px;
    max-width: 98%;
}

.container {
    container-type: size;
}

.wrapper {
	display: grid;
    margin: auto;
    max-width: 98%;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3,1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.writeHeader {
    grid-area: 1 / 2 / 2 / 3;
}

.latest-video {
    grid-area: 2 / 1 / 3 / 2;
	/*position: static;
	margin: auto;
	top: 50%;
	left: 50%;
	translate(-50%, 0);*/
}

.blog {
    grid-area: 2 / 3 / 3 / 4;
}

.bsky {
	grid-area: 3 / 2 / 4 / 3;
}
.comic-link {
    grid-area: 2 / 2 / 3 / 3;
    text-align: "center";
}

header, h1, h2, h3, h4, h5, p {
  font-family: 'Inconsolata', monospace ;
  color: white;
}

@container (max-width: 45em) {
    .wrapper {    
        display: grid;
        margin: auto;
        max-width: 98%;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }
    .writeHeader {
        grid-area: 1 / 1 / 2 / 2;
    }
    .latest-video {
	    grid-area: 2 / 1 / 3 / 2;
    }
    .comic-link {
        grid-area: 3 / 1 / 4 / 2;
    }
    .blog {
        grid-area: 4 / 1 / 5 / 2;
    }
    iframe {
        aspect-ratio: 16/9;
        width: 100%
    }
}