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

div.mobile {display:none;}

@media only screen and (max-width: 720px){
	div.mobile{display:block;}
	div.desktop {display:none;}
}


@font-face 
{font-family: "Proxima Soft";
	src: url("fonts/ProximaSoft-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;}


@font-face 
{font-family: "Quinella";
	src: url("fonts/Quinella.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;}

@font-face 
{font-family: "Cofo Robert";
	src: url("fonts/CoFo Robert.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;}

body.homepage
{
	background-color:#F6E8FF;
	background-image: url("images/background designs.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.about-page
{
	background-color:#F6E8FF;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.gallery-page
{
	background-color:#F6E8FF;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.contact-page
{
	background-color:#F6E8FF;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.logo 
{
 width:120px;
 height:120px;
	margin-top: 15px;
}

h2.website-name 
{
	text-decoration-color: #F6E8FF;
	font-family: "Cofo Robert";
	color:#8256B7;
	margin-top: -100px;
	margin-left:140px;
	font-size: 25pt

	
	
}

.header-links-container 
{
	margin-top: -86px; 

}
.header-links 
{
	font-family: "Proxima Soft";
	padding: 0px 40px;
	text-decoration:none;
	color:#461C6D;
	font-size: 24pt;
}

.header-links:hover 
{
	transition: all 0.3s ease;
	text-decoration: underline;
	text-decoration-color: #ECA9FF;
}


.hey-its-me 
{
	margin-top: 120px;
	margin-left:-225px;
	width:85%;
	height:85%;
}

.kieara-drawn 
{
	width:60%;
	height:60%;
	margin-right: -870px;
	margin-bottom: -250px
}

.my-work-button 
{
width:450px;
height:138px;
	margin-left:-100px;
}

.my-work-button:hover
{
	width:500px;
	height:154px;
	transition: all 0.3s ease;
}


.menu-checkbox 
{
	display:none;
	
}

.menu-button 
{
 position: absolute;
	top: 40px;
	right: 40px;
	z-index: 1000;
	cursor: pointer;
}

.menu-button span {
  display: block;
  width: 40px;
  height: 4px;
  background-color: #461C6D;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 3px;
}

.menu-checkbox:checked ~ .menu-button span:nth-child(1) 
{
  transform: rotate(-45deg) translate(-9px, 6px);
}

.menu-checkbox:checked ~ .menu-button span:nth-child(2) 
{
  opacity: 0;
}

.menu-checkbox:checked ~ .menu-button span:nth-child(3) 
{
  transform: rotate(45deg) translate(-8px, -6px);
}

.menu-checkbox:checked ~ .nav-menu {
  max-height: 300px;
  opacity: 1;
}


.nav-menu{
  margin-top: -30px;
  margin-left: 220px;
  max-height: none;
  opacity: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  position: fixed;
  z-index: 999;
  
}

.nav-menu ul 
{
	list-style-type: none;
	background-color:rgba(130,86,183,0.82);
	padding: 15px 0px;
	max-height: none;
	border-radius: 25px;
}

.nav-menu li a 
{
	text-decoration: none;
	margin-left: 20px;
	color:#461C6D;
	font_family:"Proxima Soft";
}

.nav-menu li a:hover {
  color: #ECA9FF;         
  text-decoration: none;    
  transition: all 0.3s ease; 
}

.hey-its-me-moble 
{
	width: 100%;
	height: 100%;
	margin-top: -70px
}


.kieara-drawn-mobile 
{
	width: 60%;
	height: 60%;
	margin-left:190px;
	margin-bottom: -90px
}



.my-work-button-mobile 
{
	width: 90%;
	height: 90%;
}

.my-work-button-mobile:hover 
{
	width: 100%;
	height: 100%;
	 transition: all 0.3s ease;
}