*
{
	box-sizing: border-box;
	font-family: 'Alata', sans-serif;
}

h1, h2
{
	font-family: Climate Crisis, cursive;
    font-size: 48px;
    font-weight: normal;
	color: rgb(83, 231, 128);
	text-align: center;
	outline-color: invert;

	outline-width: 12px;
	border-color: aliceblue;
	border: thick;
	border-radius: 50px;
	outline: auto;
	outline-style: auto;
	mask-image: linear-gradient(black, black, transparent);
	display: block;
	font-display: initial;
	text-shadow: -4px 5px 0px rgb(82, 29, 61);
	
}
h2
{
	font-size: 35px;
	mask-image: linear-gradient(black, black, black,transparent);
	outline: none;
	font-family: 'Alata', sans-serif;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-shadow: none;
}
p, #text
{
	font-family: 'Alata', sans-serif;
    font-size: 20px;
    font-weight: normal;
	font-style: normal;
    color: rgb(233, 233, 233);
	text-align: center;
}
body
{
	background-color: rgb(19, 19, 24);
	background-image: linear-gradient(black, transparent);
	background-size: cover;
	background-repeat: no-repeat;
	/*background-image: url("Images/bg1.png");
	background-repeat: repeat;*/
}

img
{
	width: 40%;
	height: 20%;
	margin-left: 5%;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 15px;
	border-radius: 50px;
	border-color: rgb(83, 231, 128);
	border-style: solid;
	border-width: 5px;
	mask-image: linear-gradient(black, black,black, transparent);
	object-fit: contain;
	object-position: center;
	display: flexbox;
	justify-content: center;
}

@media only screen and (max-width: 600px){
    h1
    {
        font-size: 25px;
    }
    img
    {
        width: 90%;
    }
    p
    {
        font-size: 15px;    
    }
}

#icon
{
	width: 125px;
	height: 125px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 25px;
	outline-color: rgb(83, 231, 128);
	outline: auto;
	outline-style: initial;
	outline-width: 100px;
	mask-image: linear-gradient(black, black, transparent);
	
}
#socialLinks
{
	width: 50px;
	height: 50px;
	display: inline;
	margin: auto;
}

tinypp
{
    font-style: bold;
	font-size: 17px;
	mask-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgba(255, 255, 255, 0.89), rgba(255, 255, 255, 0.616), transparent);
	mask-mode: alpha;
	
}

#smallMargin
{
	margin: 20px;
}
#separation
{
	margin: 100px;
}

#Presentation
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5%;
	padding-right: 5%;
}

.GameDiv
{
	display: block;
	background-color: rgba(90, 82, 88, 0.219);
	border-radius: 1px;
	border-left: 5px;
	border-style: solid;
	border-color: rgba(255, 92, 247, 0.315);
	mask-position: -55px, -25px;
	mask-repeat: repeat;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom: 15px;
}

#Work
{
	border-color: rgb(83, 231, 128);
}

#gameTitle
{
	font-family: 'Alata', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: rgb(233, 233, 233);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgb(83, 231, 128);
	text-transform: uppercase;
	mask-image: linear-gradient(black, black, black, black,transparent);
}
#app
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#gameVideo
{
	flex: 0 0 40%;
	margin: auto;
	width: 450px;
	height: 270px;
	border-color: rgb(98, 42, 151);
	border-radius: 50px;
	justify-content: center;
}
#gameDescription
{
	font-family: 'Alata', sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: rgb(233, 233, 233);
	text-align: center;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 5px;
}

#Contact
{
	background-color: rgba(90, 82, 88, 0.219);
	mask-image: radial-gradient(black, black, black,transparent);
	border-color: aliceblue;
	border-radius: 5px;
	margin: 10%;
	padding: 5px;
}

#inlineVideo
{
	display: -webkit-inline-flex;
	margin-left: 8%;
	margin-right: 2%;
	min-width: 20%;
	max-width: 45%;
	border-color: rgb(98, 42, 151);
	border-radius: 50px;
	align-items:stretch;
	width: fit-content;

}

li
{
	font-family: 'Alata', sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(233, 233, 233);
	text-align: center;
	padding-right: 35px;
	justify-content: space-evenly;
}

button
{
	width: 35%;
	font-family: 'Alata', sans-serif;
	font-size: 18px;
	font-size-adjust: inherit;
	font-weight: bold;
	
	font-style: normal;
	text-align: center;
	color: rgb(0, 0, 0);
	background-color: rgb(83, 231, 128);
	border-color: rgb(83, 231, 128);
	margin-left: 40%;
	margin-right: 40%;
	padding : 10px;
	text-wrap: pretty;
	white-space: pretty;
	justify-self: center;
	display: block;
	
	
}
button:hover
{
	background-color: rgb(0, 0, 0);
	border-color: rgb(83, 231, 128);
	color: rgb(83, 231, 128);
	cursor: pointer;
}

#SteamButton
{
	margin-left: 38%
}

#Skills
{
	display: inline-flexbox;
	padding-bottom: 10px;
	width: 40%;
	margin-left: 30%;
	margin-right: 30%;
}