@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');

html{
    margin: 0;
    font-family: 'Balsamiq Sans', cursive;
}

body{
    background-image: url(../img/Games-Launchpad.jpg);
    background-size: cover;
    margin: 0;
}

#mainContent{
    text-align: center;
}

#panel-1{
    background: #ffffff7a;
    margin: 10px;
    padding: 5px;
    box-sizing: border-box;
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    border-radius: 5px;
    
    
}

#panel-2{
    font-size:36px
}

.launchIcons{
    max-height: 30vh;
}

.launchLinks{
    border: 3px solid #000;
    color: #000;

    background: #ffffff7a;
    margin: auto;
    padding: 5px;
    box-sizing: border-box;
    width: 80vw;
    border-radius: 20px;

    
    text-align: center;
}

#breakoutIcon{
    position: absolute;
    top: 3vh;
    left: 0;
    right: 0;
}

#herosIcon{
    position: absolute;
    top: 50vh;
    left: 0;
    right: 0;
}


.fancyButton{
	/* text */
	text-decoration: 		none;
	font-weight: 			bold;
    font-size:36px;
	text-shadow: 			1px 1px 0 hsl(88, 70%, 30%),
	-1px -1px 0 hsl(88, 70%, 30%),
	1px -1px 0 hsl(88, 70%, 30%),
	-1px 1px 0 hsl(88, 70%, 30%),
	0px 1px 0 hsl(88, 70%, 30%),
	1px 0px 0 hsl(88, 70%, 30%),
	0px -1px 0 hsl(88, 70%, 30%),
	-1px 0px 0 hsl(88, 70%, 30%),rgba(255,255,255,.5) 0 1px 0;	
		
	/* layout */
	padding: .1em .4em 0 .4em;
	display: inline-block;
	border-radius: 	8px;
	/* margin-bottom: 30px; */
		
		
	/* effects */
		border-top: 		1px solid rgba(255,255,255,0.8);
		color: 				hsl(0, 0%, 100%) !important;
		
		background-color: 	hsl(88, 70%, 60%);
		-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
								hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
								rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
		-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
								hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
								rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
		box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
								hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
								rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
		border: 1px solid rgba(2, 42, 19, 0.21) !important;
}

.fancyButton[data-size="medium"]{
  font-size: 1.2em;
}
.fancyButton[data-color="red"]{
  background-color: 	hsl(0, 70%, 60%);
  box-shadow: inset rgba(255,254,254,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */          hsl(20, 70%, 40%) 0 .1em 3px, hsl(15, 70%, 30%) 0 .3em 1px, /* color border */         rgba(255,0,0,0.2) 0 .5em 5px
}