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

html {
  scroll-behavior: smooth;
}
body {
    background-image: url("IMAGES/MR-background.svg");
    background-size: cover;
}
.lg-logo {
    display: 100%;
}
.sm-logo {
    display: none;
}
.logo-box {
    background-image: url("IMAGES/MR-hfader_desk.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2.5%;
    margin-top: -2.5%;
}

.logo-box img {
	position: inherit;  
	display: inline-block;
    width: 65%;
    margin-left: 27%;
    padding-top: 11%;
    padding-bottom: 5%;
}
main {
	margin-left:0%;
}
.menu img {
    height: 33px;
    float: left;
}
#menu {
	visibility: hidden;
}
.mascot img {
	animation: rotation 15s infinite linear;
	position: absolute;
    width: 27%;
    margin-left: 0%;
    margin-top: -10%;
	margin-right:0%;
	margin-bottom: 0%;
}
@keyframes rotation {
	from
	{
		transform: rotate(0deg) translateX(5px)rotate(0deg);
	}
	to {
		transform: rotate(360deg) translateX(5px)rotate(-360deg);
	}
}
/*navigation section below*/
nav {
	margin-top: -3.5%;
	position: relative;
    width: 100%;
}
nav ul {
	margin-left:28%;
	padding:0%;
	margin-right: 1%;
}
nav ul li {
    display: inline-block;
    margin-right: 1%;
}

.name img{
	height: 1.15em;
}
#paperkami{
	height: 1.15em;
	margin-bottom:-.12em;
}
#paperkami:hover {
    opacity: .5;
}
#design:hover {
    opacity: .5;
}
#consultant:hover {
    opacity: .5;
}
/*construction sign*/
/*.construction {
    margin-bottom: -1.5%;
}
.desktop img{
    display: block;
    width: 555px;
    margin-top: -15px;
}
.tablet img{
    display: none;
}
.phone img{
    display: none;
}*/

/*social media section below*/
.social-box {
    background-image: url("IMAGES/MR-ffader_desk.svg");
    background-size: 100%;
    background-repeat: no-repeat; 
    margin: 2.5%;
	padding-left:25.5%;
    padding-bottom: 35%;
}
.soc-icon img{
    padding-top: 0%;
    display: block;
    float: left;
}
.soc-icon img {
    height: 30px;
    margin-right: 2%;
    margin-top: 4%;
}
.soc-part {
    opacity: .5;
    padding-right: 10px;
    padding-left: 10px;
}
#email:hover {
    opacity: .5;
}
#resume:hover {
    opacity: .5;
}
#lookbook:hover {
    opacity: .5;
}
#phone:hover {
    opacity: .5;
}
#facebook:hover {
    opacity: .5;
}

.stack{
	position: absolute;
	display: grid;
	margin-top: 2.75%;
	margin-left: 63%;
	margin-right: 37%;
	opacity: 1;
}


#discord_select {
	transition-delay: 0ms;
	margin-top:-30px;
	grid-row: 1;
	grid-column: 1;
	opacity: 0;
}
#discord_select:hover {
	transition: 4s;
	grid-row: 1;
	grid-column: 1;
	opacity: 1;
}
#discord{
	animation: redstone 5s infinite ease-in-out;
	opacity: 0.1;
	grid-row:1;
	grid-column: 1;
}
@keyframes redstone {
	0%, 40%, 90%, 95% {
		opacity: 0.05;
	}
	92%{
		opacity: 0.3;
	} 
	100% {
		opacity: 0.2;
	}
}

#discord, #discord_select {
	position: static;
    display: block;
	height: 30px;
	
}
#instagram:hover {
    opacity: .5;
}
#pinterest:hover {
    opacity: .5;
}
#youtube:hover {
    opacity: .5;
}
#square:hover {
    opacity: .5;
}
/*year updated*/
.update-year img{
    float: right;
    height: 40px;
    opacity: .25;
    margin-right: 7.5%;
    margin-top: -10%;
    padding-bottom: 6%;
}
.update-year {
    margin-right:2.5%;
}

/*tablet*/
@media (max-width : 800px ){
    body {
        background-size: 140%;
        background-repeat: no-repeat;
    }
    .logo-box {
        background-image: url("IMAGES/MR-hfader_tab.svg")
    }
    .logo-box img {
        display: block;
        width: 85%;
        margin-left: 7.5%;
        padding-top: 10%;
        margin-bottom: 4%;
		padding-bottom: 3.5%;
    }
    nav {
    }
    nav ul {
		width: 45%;
		margin-bottom: 0%;
		margin-left: 32%;
		padding-left:0%;
    }
    nav ul li {
		display: inline-grid;
		width: 100%;
    }
    .name img{
		display: block;
		margin-left: 0%;
		margin-right: 0%;
        height: inherit;
		width: 100%;
		margin-top: 5%;
		margin-bottom:1%;
    }
    .skill {
        display: inline-block;
		width: 30%;
		margin-right: 0%;
		margin-left: 0%;
    }
    .skill img{
    }
	#design{
		margin-left:16%;
	}
    .nav-part {
        display: none;
    }
    .mascot img{
		position: absolute;
        width: 35%;
        margin-left: -5%;
        margin-top: -5%;
    }
	#menu{
		visibility: hidden;
	}
    .menu img {
    }
    .construction {
    }
    .desktop img{
        display: none;
    }
    .tablet img{
		margin-left: 30%;
		width: 55%;
        display: block;
		padding-top: .5%;
    }
    .phone img{
        display: none;
    }
    .social-box {
        background-image: url("IMAGES/MR-ffader_tab.svg");
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 2.5%;
		padding-left: 9%;
        padding-bottom: 65%;
    }
    .soc-icon  {
        margin-left: 23%;
        margin-top: 2% 
    }
    .soc-icon img{
        height: 24px;
        display: block;
        margin-top: 5.5%;
    }
.stack{
	margin-top: 3.5%;
	margin-left: 58%;
	margin-right: 42%;
	
	}
#discord_select { 
	grid-row:1;
	grid-column: 1;
	margin-top:-24px;
	}
#discord{
	opacity: 0;
	grid-row:1;
	grid-column: 1;
	}
#discord{
	opacity: .2;
	grid-row:1;
	grid-column: 1;
	}
#discord, #discord_select {
	height: 24px;
	}
.soc-part {
        opacity: .5;
        padding-right: 10px;
        padding-left: 10px;
    }
.social-box {
        margin-right: 2.5%;
    }
.update-year img{
        float: right;
        margin-right: 5.5%;
        margin-top: -23%;
    }
}
/*phone*/
@media (max-width : 501px ){
    .lg-logo {
        display: none;
    }
    .sm-logo {
        display: block;
    }
	body {
        background-size: 400%;
        background-repeat: no-repeat;
    }
    .logo-box {
        background-image: url("IMAGES/MR-hfader_phone.svg");
        margin-right: 5%;
        margin-left: 5%;
		padding-bottom: 30%;
    }
    .logo-box img {
        display: block;
        width: 85%;
        margin-left: 7.5%;
        margin-bottom: -38%;
        padding-top: 10%;
        padding-bottom: 20.5%;
    }
    nav {
		width: 90%;
		margin:5%;
        margin-top: 10%;
		padding:0;
    }
    nav ul {
		width:100%;
		margin-top: 50%;
		margin-left:0%;
		margin-right:0%;
		Padding-left:0%;
        padding-bottom: 0%;
    }
    nav ul li {
		margin-left: 0%;
		margin-right:0%;
        display: block;
    }
    .name img{
		width: 100%;
		height: 38px;
		display: block;
		padding-left: 0%;
		padding-right: 0%;
		padding-top: 0%;
		padding-bottom: 2%;
		margin-top:-38%;
    }
	.nav-part{
		display: none;
	}
	.skill a {
		display: block;
		width: 32%;
		height: inherit;
		margin-right: 0%;
		margin-left: 0%; 
		margin-top: 2%;
		margin-bottom: 2%;
		padding-left: 0%;
		padding-right: 0%;
	}
    .skill img{
		max-height: 1.2em;
		max-width: 9em;
		min-width: 7em;
    }
	#paperkami {
		margin-left: 0%;
	}
	#design {
		margin-left: 0%;
	}
	#consultant {
		margin-left: 0%;
	}
/*
    .construction {
        margin-top: -3%;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 4%;
    }
*/
    .desktop img{
        display: none;
    }
    .tablet img{
        display: none;
    }
    .phone img{
        display: block;
    }
	#menu{
		position: absolute;
		visibility: visible;
		z-index: 1;
	}
    .menu img {
        display: inline-block;
        height: 42px;
        margin-top: -27.5%;
		margin-bottom:23%;
        margin-left: 11.25%;
		padding: 0%;
		padding-left: 0%;
		
    }
    .mascot img{
		position: absolute;
        width: 107.5%;
		margin-left: -11%;
        margin-top: -30%;
    }
    
    .social-box {
        background-image: url("IMAGES/MR-ffader_phone.svg");
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 5%;
        margin-top: 8%;
        padding-top: 130%;
        padding-bottom: 290%;
    }
    .soc-icon  {
        margin-left: 25%;
        margin-top: -35% 
    }
    .soc-icon img{
        display: block;
        width: 50%;
        height: 70px;
        margin-bottom: 20%;
    }
	
	.stack{
		width: 50%;
		margin-top:350%;
		margin-left: 2%;
		margin-right: 0%;
		padding-right:0%;
	}
	#discord_select { 
		grid-row: 1;
		grid-column: 1;
		margin-top:-120px;
	}
	#discord{
		grid-row:1;
		grid-column: 1;
	} 
	#discord, #discord_select {
		height: 70px;
	}
	
    .soc-part {
        display: block;
        transform: rotate(0.25turn);
        opacity: .5;
        margin-left: -3.25%;
        margin-bottom: -3%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .social-box {
    }
    .update-year img {
        display: block;
        height: 70px;
        width: 100%;
        margin-right: -2%;
        margin-top: 50%;
        padding-bottom: 15%
    }
}