body {
    background-color:#170709;
}

main {
	padding-top:10vh;
}

	h1,
	h2.alt_head {
		font-size:4vw;
		margin-bottom:0.5em;
		width:100%;
	}

	main .text {
		padding-left:37.5%;
	}

.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap:5%;
}

	.about .text {
		align-self: center;
		text-align: left;
	}

.block {
	display:grid;
	grid-template-columns:1;
	grid-gap:3em;
	margin-bottom:2em;

    &:has( .img img){
        grid-template-columns: 37.5fr 62.5fr;
        margin-bottom:5em;
    }
}

	.block .text {
		width:100%;
		padding:0;
	}

	.block .img img {
		width:100%;
		border-radius:100%;
	}

.red-overlay {
    display:none;
}

.head {
    position: relative;
    background-color:#700f20;

    & > div {
        padding-right:calc(100vh / 5.6 + 5vw);
        padding-left:5vw;
    }

    & .corner {
        position:absolute;
        width:10%;
        z-index:-1;
    }

    & .inner {
        position: relative;
        isolation: isolate;
    }

    & .top {
        padding-block-start:5rem;
        background-color:#e2371b;
        padding-block-end:5vw;

        & .inner {
            padding:3vw 3vw 0;
        }
    }

    & .mid {
        background-color:#700f20;

        & #banner {
            display:block;
            transform:translateY(-2vw);
        }

        & .two {
            position:relative;
            z-index:2;
            display:grid;
            grid-template-columns: 1fr 1.5fr;
            gap:2rem;
            align-items:end;
            padding-inline:16vw;
            margin-top:-15vw;
        }
    }

    & .lower {
        background-color:#891228;
        padding-block:1rem;

        & img {
            margin-inline:auto;
            width:min(100%,500px);
        }
    }
}

#corner-tl {
    left:0;
    top:0;
}

#corner-tr {
    scale:-1 1;
    right:0;
    top:0;
}

#corner-bl {
    scale:1 -1;
    left:0;
    bottom:3vw;
}

#corner-br {
    scale:-1 -1;
    right:0;
    bottom:3vw;
}

#presented {
    margin-bottom:3vw;
}


@media screen and (max-width:1199px) {

}

@media screen and (max-width:1099px) {

}

@media screen and (max-width:999px) {

	@keyframes slide_in {
		0% {
			left:110%;
		}
		100% {
			left:4%;
		}
	}

	h1,
	h2.alt_head {
		font-size: 4em;
	}

	.main {
		width:calc(85vw - (100vh / 5.6));
	}

    #presented {
        margin-bottom:1.5vw;
    }
}


@media screen and (max-width:800px) {
    .head .mid .two {
        grid-template-columns: 1fr;
        margin-top:-7vw;
        gap:0;
    }
}

@media screen and (max-width:699px) {

	.block,
    .block:has(.img img) {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width:599px) {

	h1 {
		margin-bottom:2em;
	}
}

@media screen and (max-width:479px) {

}

@media screen and (max-width:459px) {
	main {
		width:100%;
		margin-top:0;
	}

		main .text {
			padding-left:0;
		}

		h1 {
			font-size:3.5em;
			padding-right:5vw;
		}

    #logo {
        display:none;
    }

    .head {

        & > div {
            padding-right:5vw;
        }

        & .top {
            padding-block-start: 2rem;
        }
    }
}

@media screen and (max-width:399px) {

}