/* main build */
/* sets layout for þe first contentgrid section, under þe header*/
.maingrid{
		grid-template-columns: 1fr 2fr;
		grid-template-rows: 0.2fr 2fr 2fr 0.2fr;
		grid-template-areas: 'nav main' 'nav main' 'nav main' 'nav main';
}
/* sets layout for second contentgrid section */
.secondarygrid{
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: 1fr 0.1fr 1fr;
		grid-template-areas: 'SOTW null null' 'SOTW stamp updates' 'null2 null2 updates';
}

.scroll {
    height: 23rem;
}

/* maingrid section styliŋs*/

nav{
		grid-row: 1 / span 4;
		margin: 0.5rem 2rem 1rem 0.5rem;
}

main{
		border:2px solid black;
		grid-row: 2 / span 3;
		margin-bottom: -1.65rem;	
		margin-right: -1.5rem;
		background-color: white;
    border-radius: 10px;
    background: linear-gradient(223deg, rgba(247,83,177,85%) 0%, rgba(150,228,255,85%) 60%, rgba(146,229,249,85%) 61%, rgba(83,247,153,85%) 81%);
}
/* styliŋs for content wiþin "main" */
main > .flexgroup {
		padding: 0rem 0.5rem;
		gap: 12%;
}

main p{
		max-width: 40ch;
}
main img{
		width: 12rem;
		margin-bottom: 2rem;
}
/* styliŋs for þe nav links*/
nav li {
    color: #f20b8f;
    list-style: none;
    font-size: 20px;
}
nav li:hover {
    font-weight: bold;
}

/* makes "sub-links" have a file tree effect */
/* .connect li::before{
                content: "";
                border-bottom: 1px solid #f20b8f;
                width: 1rem;
                position:relative;
                bottom: 5px;
                right: 4.5%;
                display:inline-block;
            }
            .connect li:hover{
                list-style-type: "▪"
            } */

/* sets pink dashed underline on nav h3*/
li h3::after{
    content: "";
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #f20b8f;
    top: 4px;
    height: 2px;
    width: 2rem;
}

/*secondary grid section styliŋs*/
#updates{
    grid-row: 2 / 4; 
}

#status .minibox {
    /*  padding-bottom: 3.5rem; */
    padding-left: 1rem;
}
#stampbelt{
    grid-row: 2;
    grid-column: span 2;
}
#stampbelt img {
		margin-bottom: 1rem;
    width: unset;
}
#SOTW .minibox{
		/*  padding-bottom: 1.6rem;*/
}
#SOTW p {
		font-size: 15px;
}

.date{
    font-weight: bold;
    margin-left: 1rem;
}

#latestart .imgwrapper{
		flex: 1 1 0;
		/* max-width: 20rem;*/
    height: 15rem; 
    grid-row: 2;
}

#latestart .imgwrapper img {
    position: relative;
    object-fit: cover;
    width: 100%;
}

/* I GIVE UP. GO GO MEDIA QUERY */
@media (max-width: 1000px) {
	#latestart .imgwrapper img {
		    right: 35%;
		    object-fit: scale-down;
		}
}


/* specific styliŋs for þe 'latestblog' part of þe secondarygrid*/
#latestblog .minibox{
		overflow: scroll;
		max-height: 22rem;
}

#latestblog > * {
    flex-basis: 50%;
}
.blgdtl{
		font-size: 12px;
}
#latestblog article{
		font-size:12px;
		max-width: 40ch;
}
#latestblog h3{
		font-size: 14px;
}
.blgdtl .imgwrapper{
		padding: 0;
		width: 5rem;
		height: 5rem;
}
.blgdtl .imgwrapper img {
		position: relative;
		height: inherit;
}
#latestblog{
		display: flex;
		gap: 0.2rem;
}

/* colors n shit */

/* changes layout for mobile */

/*NOTE: ÞIS MEDIA QUERY IS STUPID. */
/* TODO: JUST MAKE ÞE LAYOUT ÞE WAY IT IS ON ÞE SMALLER SCREENS, FOR LESS BULLSHIT.*/
@media (max-width: 950px){
    .maingrid{
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
    }
    nav {
        grid-row: 1 / 2;
        margin: 0.2rem;
    }
    nav ul{
        margin: 0 auto;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
		    display: flex;
		    flex-flow: column wrap;
		    justify-content: center;
        width: 50%;
    }
    main{
        grid-row-start: 2;
        margin: 0;
		    height: unset;
    }
    main p{
			  max-width: 45ch;
		}
		main .flexgroup {
			  gap: 2rem;
		}

    .mainhead {
        grid-column: span 2;
        margin: 0;
    }
    .headimg {
        grid-row: 1 / 2;
        position: absolute;
        visibility: hidden;
    }
    .secondarygrid{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
    }
    #latestart{
        grid-column-start: 1;
		    grid-column-end: 2;
        grid-row-start: 1;
    }

		#latestart article > div.flexgroup {
		    flex-flow: column;
		}

		#latestart .imgwrapper {
		    flex: unset;
		    max-width: 10rem;
		}

		#latestart .imgwrapper img {
			  right: 10%;
		}

    #latestblog{
        grid-column: span 3;
    }
    #updates{
        grid-column-start: 1 / 2;
		    grid-row-start: 3;
    }
    #SOTW{
		    grid-column-start: 2;
		    grid-column-end: 4;
		    grid-row-start: 1;
    }
		#SOTW .minibox{
			  height: 33.8rem;
		}

		#status {
		    grid-row-start: 3;
		    grid-column: 2 / 4;
		}
    #stampbelt{
		    grid-row-start: 2;
        grid-column: span 3;
    }
    
}
/* changes layout again for even smaller screens*/
@media (max-width:560px){
		nav ul{
			  width: 70%;
		}
		.secondarygrid{
			  display: flex;
			  flex-flow: column;
		}
		.secondarygrid > * {
			  grid-column: 1 / 2;
		}
		#SOTW{
			  grid-row: 2;
		}
		#SOTW .minibox{
			  height: unset;
  		  }
	

		#latestblog{
			  grid-row: 5;
			  flex-flow: column;
		}
}