/* reset */
h1, h2, h3, h4, h5, h6, p, ul, li {
	margin-top: 0;
	margin-bottom: 0;
}

/*  */
.d {
    display: inline;
}

.t {
    margin: 2vh;
}

.s2, .s3 {
    display: None;
}

.s45 {
    height: 300px;
}

.s46 {
    height: 200px;
}

.s46:empty {
    display: none;
}

.s55 {
    /* width: 50%; */
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.s6 {
    justify-content: center;
    align-items: center;
}


.s7 {
    justify-content: center;
    align-items: center;
}

.s78 {
    justify-content: center;
    align-items: center;
}


#comp6_SELECTclick_randsquare {
    height: 65px;
    width: 200px;   
}

#comp7_SELECTclick_playbutton {
    height:65px;
    width: 200px;
}

#comp78_SELECT_clear {
    height: 65px;
    width: 200px;
}

.mantine-Button-root {
	transition: all 0.15s ease-in-out;
}
.mantine-Button-root:hover {
	box-shadow: 1vh 1vh 1vh lightgray;
	transform: translate(0, -1vh);
}



.ms10 {
    grid-row: 4 / 5;
    grid-column: 1 / 5;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 0.1fr 1fr;
}

.ms10_0 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.ms10_1 {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin: inherit 0;
    padding: inherit 0;
}

.ms10_2 {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
}

.ms10_3 {
    grid-row: 1 / 2;
    grid-column:1 / 2;
}

.ms10_4 {
    grid-row: 1 / 2;
    grid-column:3 / 4;
}

.nv0 {
    font-family: "Nova Square", serif;
    font-weight: 800;
    font-size: 40px;
}

.nv1 {
    font-size: 22px;
    margin-bottom: 0;
    padding-bottom: 0;
    font-weight:500;
}

.nv_m {
    font-weight: 500;
    font-size: 24px; 
    color: gray;
}

.nv2 {
    font-size:12px;
    font-weight: 500;
    margin-bottom: 0;
}

.hidden {
    display: none;
    margin: 0;
    padding: 0;
}

.e {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*  */

#comp4_FIGfig_mob{
    height: 300px;
}

/*  */

.f {
    height: 30vh;
    background-color: #6be48a;
    display: grid;
    grid-template-rows: 19fr 1fr;
    grid-template-columns: 8fr 1fr 1fr 1fr 1fr 1fr 8fr;
    margin: 0;
    padding: 2vh 1vw;
}

.footnt {
	display: flex;
	align-items: center;
	justify-content:center;
	padding: 2vh;
}

.bb {
	transition: all 0.15s ease-in-out;
}

.bb:hover {
	transform: translate(0, -1vh);
}

.comp20_footer0_github {
	grid-column: 2 / 3;
}

.comp21_footer1_linkedin {
	grid-column: 3 / 4;
}

.comp22_footer2_email {
	grid-column: 4 / 5;
}

.comp23_footer3_spotify {
	grid-column: 5 / 6;
}

.comp24_footer4_soundcloud {
	grid-column: 6 / 7;
}

.footertinytext {
	color: white;
	font-size: 10px;
	grid-row: 2 / 3;
	grid-column: 1 / 8;
	display: flex;
	justify-content: center;
	align-items: center;
}
/*  */

.tit {
    width: 100%;
    height: 30vh;
    background-color: rgb(109 181 255);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tit_ex {
    font-size: 18px;
}


/*  */
@media all and (min-width: 1000px) {

    .d-top {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .d-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;    }


    .s4 {
        display: None;
    }
    
    .t {
        margin: 2vh 1vw;
    }

    /* top */
    .s6 {
        grid-row: 1 / 2;
        grid-column: 4 / 5;
    }        
    
    .s0 {
        grid-row: 1 / 2;
        grid-column: 2 / 4;
    }
    .s1 {
        grid-row: 1 / 2;
        grid-column: 5 / 7;
    }
    
    .s2 {
        grid-row: 2 / 3;
        grid-column: 1 / 3;
        display: inline;
    }
    
    .s3 {
        grid-row: 2 / 3;
        grid-column: 6 / 8;
        display:inline;
    }
       
    .s45 {
        align-items: center;
        justify-content: center;
        grid-row: 2 / 3;
        grid-column: 3 / 6;
        height: 500px;
    }

    /* bottom */
    .s5 {
        grid-row: 1 / 2;
        grid-column: 3/6;
        width: 25vw;
        justify-self:center;
        align-self: center;
    }
    .s55 { 
        grid-row: 2/ 3;
        grid-column: 1/4;
        display: flex;
        align-items: flex-end;
    }


    .ms10 {
        grid-row: 3/ 4;
        grid-column: 2/7;
        width: 50vw;
        justify-self: center;
    }    
    
    .s11 {
        grid-row: 2 / 3;
        grid-column: 5 / 8;
        font-size: 28px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .s7 {
        grid-row: 2 / 3;
        grid-column: 4 / 5;
        justify-content: center;
        align-self: center;
        justify-self:center;
        width: 20vw;
    }

    .s46 {
        grid-row:4/5;
        grid-column: 2 / 7;
        height: 500px;
    }

    .s78 {
        grid-row:5/6;
        grid-column: 3/6;
    }

    .s9 {
        grid-row: 6/7;
        grid-column: 3 / 6;
        
        justify-self: center;

        /* width: 60vw; */
    }
    
    #comp6_SELECTclick_randsquare {
        height: 60px;
        width: 60px;
    }

    #comp7_SELECTclick_playbutton {
        height: 60px;
    }
    

    .nv0 {
        font-family: "Nova Square", serif;
        font-weight: 800;
        font-size: 50px;
    }

    .nv3 {
        font-family: "Nova Square", serif;
        font-weight: 800;
        font-size: 100px;
    }

    .nv_m {
        font-family: "Nova Square", serif;
        font-weight: 800;
        font-size: 100px; 
        color: gray;
    }
    
    
    .nv1 {
        font-size: 22px;
        font-weight: 600;
    }

    .nv2 {
        font-size:22px;
    }    
}