@charset "UTF-8";
/* CSS Document */

/* colors
 Lilac :: #DFDFFF
 Purple :: #8648FF
Green :: #9EEA34
Pink :: #FA13E3
*/

/* import in div 1 
<script type="module" src="https://unpkg.com/@splinetool/viewer@1.0.66/build/spline-viewer.js"></script>
<spline-viewer loading-anim-type="none" url="https://prod.spline.design/Y-7zzyttIdaXvtak/scene.splinecode"></spline-viewer>
*/

body{
background-image: url("Assets/GRID.background.png");
	background-size: 100%; 
   color: #DFDFFF;
   text-align: center;
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
   padding-top: 100px;

}
h3 {
	font-size:32px;
	font-weight: 300; 
	line-height:5px;
	color: #8648FF;
}

h5{
	font-size: 25px; 
	font-weight: 400;
	line-height:5px;
	color: #8648FF;
}

/*/----- Links -----/*/
a {
	color: #FA13E3;
}


/*/----- Grid -----/*/
.wrapper{
    display: grid;
    margin: 0 auto; 
    max-width: 1200px;
	grid-template-columns: repeat(9,1); /*original was (9,1fr)*/
    grid-auto-rows: minmax(200px, auto);
    grid-gap: 15px;
}

.wrapper div{
    border: 3px solid #9EEA34;
    border-radius: 10px;
}

.grid1{
    grid-column: 1/6;
    grid-row: 1/3;
	width: 500px;
    }
.grid2{
	background:#141414;
	grid-column:6/10;
	grid-row:1/3; 
	align-content: center;
}

.grid3{
	background:#141414;
	grid-column: 6/10;
	grid-row: 3;
	align-content: center;
	padding: 20px;	
}

.grid4{
 grid-column: 1/6;
}

/*/----- Sticker -----/*/
.sticker-wrap{
	position: absolute;
	 top:350px;
    Left:75px;
	clear: left;
	float: left;
	z-index: 4;
	width: 50%;
	min-width: 450px;
	height: 200px; 
	align-items: center;
	
}
.sticker-paper{
	align-content: center;
	float:right;
	width: 350px; 
	height: 150px;
	border-radius: 25px;
	background: #9EEA34;

}

	/*
	grid-column: 1/5;
	grid-row: 3;
	*/


/*/----- MEDIA BUTTONS -----/*/
.social-media-buttons {
    display:flex;
    justify-content: center;
    gap: 1.5rem;
	padding: 10px;
}

.social-media-button {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    outline: 2px solid white;
    cursor: pointer;
    transition: all 0.3s;
    display: grid;
    place-items: center;
}

.social-media-button:hover {
    outline-offset: 3px;
    transition: all 0.3s;
}

.social-media-button img {
    transition: all 0.3s;
}

.social-media-button:hover img {
    transform: scale(1.15);
}

.social-media-button:hover:nth-child(1) {
    background:  radial-gradient(
        circle at 30% 107%, #fdf497 0%, 
        #fdf497 5%, #fd5949 45%,
        #d6249f 60%,#285AEB 90%
    ); 
}

.social-media-button:hover:nth-child(2) {
    background: #e52d27;
}
.social-media-button:hover:nth-child(3) {
    background: var(--spotify);
}
.social-media-button:hover:nth-child(4) {
    background: linear-gradient(pink,red);
}
:root {
    --youtube: #e52d27;
	--spotify: #1ED760;
	--applemusic: #FA2D48; #f94c57;
	
}

/*/----- MEDIA text -----/*/
	.social-text{
    display:flex;
    justify-content: center;
    gap: 1.5rem;
	padding: 1px;
}

.social-text p {
	font-size: 16px;
	color: #9EEA34;
}

/*/----- Footer -----/*/
.footer {
	height: 50px;
 	width: 100%;
  	background-color: black;
	padding: 15px;
  	color: white;
  	text-align: center;
	margin-top: 50px;
}
.footer a:link {
	color:white;
	text-decoration:none;
}
.footer a:visited {
	color:#DFDFFF;
	text-decoration:line-through;
	text-decoration-style:dotted;
}
	
.footer a:hover {
	color:#FA13E3;
	text-decoration: none;
}

@media (max-width: 1600px){
	body {
	background-image: url("Assets/GRID.long.png"); 
}
}

@media (max-width: 900px){
	body {
	background-image: url("Assets/GRID.Phone.png")
}
	/*/----- wrapper-----/*/
.wrapper{
    display: grid;
    margin: 0 auto; 
    max-width: 900px;
	grid-template-columns: repeat(9,1); /*original was (9,1fr)*/
    grid-auto-rows: minmax(200px, auto);
    grid-gap: 15px;
}

.wrapper div{
    border: 3px solid #9EEA34;
    border-radius: 10px;
	margin-right: 20px;
}
/*/-- grid changes order --/*/
.grid2{
	background:#141414;
	grid-column:2/5;
	grid-row:1/2; 
	align-content: center;
}
	
.grid4{
 grid-column:  2/5;
	grid-row: 2/3;
}

.grid1{
    grid-column: 2/5;
    grid-row: 3/5;
	align-content: center;
	width: 95%;
	}

.grid3{
	background:#141414;
	grid-column: 2/5;
	grid-row:5 /7;
	align-content: center;
	padding: 20px;	
}

/*/----- Sticker -----/*/
.sticker-wrap{
	position: absolute;
	 top:1150px;
    Left:75px;
	clear: right;
	float: right;
	z-index: 4;
	width: 85%;
	min-width: 200px;
	height: 150px; 
	align-items: center;
	
}
.sticker-paper{
	align-content: center;
	float:right;
	width: 350px; 
	height: 150px;
	border-radius: 25px;
	background: #9EEA34;

}
}
@media (max-width: 700px){
		
/*/----- Sticker -----/*/
.sticker-wrap{
	position: absolute;
	 top:1000px;
    Left:75px;
	clear: right;
	float: right;
	z-index: 4;
	width: 85%;
	min-width: 200px;
	height: 150px; 
	align-items: center;
	
}
.sticker-paper{
	align-content: center;
	float:right;
	width: 350px; 
	height: 150px;
	border-radius: 25px;
	background: #9EEA34;

}	
}