* {
	font-weight: 100;
	font-family: didot;
	margin:0;
	box-sizing: border-box;
}

body{
	--accent-color: #238989;
	--accent-color2: #237373;
	--background-color: #ddd;
	--background-color2: #fff;
	--text-color: #222;
	--text-color2: #111;
	--text-color3: #666;
	--hover-color: #2399a1;
	--hover-color2: #f0f0f0;
	--button-text-color: var(--background-color);
	--transition-delay: .3s;
	--transition-delay-sun-moon: 1.2s; 
	
	background-color: var(--background-color);
}

body.dark {
	--accent-color: #b579f8;
	--accent-color2: #c99fff;
	--background-color: #222;
	--background-color2: #000;
	--text-color: #fff;
	--text-color2: #aaa;
	--hover-color: #a45af7;
	--hover-color2: #0a0a0a;
}

.main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh
;	transition: var(--transition-delay);
	background-color: var(--background-color);
} 

.center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 2
}

.second-part {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	transition: var(--transition-delay);
	background-color: var(--background-color2);
}   

.about-me {
	display: flex;
}

.portrait {
	padding-right: 7vw;
	/* background-color: white; */
}

.about-me .text {
	width: 40vw;
	padding-top: 2vw;
}
.image {
	width: 25vw;
}

/* styleing for Toggle button */
.theme-toggle-button {
	background-color: var(--accent-color);
	
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 0.8em 1em;
	border-radius: .7em;
	border: none;
	outline: none;
	transition: var(--transition-delay);
	transform: scale(1);
}

.theme-toggle-button:hover,
.theme-toggle-button:active	 {
 	transform: scale(1.05);
	background-color: var(--hover-color);
}

.theme-toggle-button h2 {
	color: var(--button-text-color);
	font-size: 3vh;
	padding: 6px;
}

.sun-moon {
	fill: var(--button-text-color);
	width: 5vh;
	min-width: 40px;
	padding: 6px;
}

/* Styling for Spinning sun and moon */
.sun-moon-container {
  --rotation: 0;

  position: absolute;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  height: 250vmin;
  transform: rotate(calc(var(--rotation) * 1deg));
  transition: transform var(--transition-delay-sun-moon);
}

.sun,
.moon {
	position: absolute;
	transition: opacity, fill, var(--transition-delay-sun-moon);
	width: 4vh;
	min-width: 40px;
	fill: var(--accent-color);
}

.sun {
  top: 4%;
  opacity: 1;
}

.dark .sun {
  opacity: 0;
}

.moon {
  bottom: 4%;
  opacity: 0;
  transform: rotate(180deg);
}

.dark .moon {
  opacity: 1;
}

/* Styling for Line self protrait */
.front-page-art {
	position: absolute;
	pointer-events: none;
	left: 0%;
	top: 15%;
	width: 42.8vh;
 	z-index: 1; 
 /* Trouble shooting front-page-art size */
 /*	background-color: black; */
}

.hampus-portrait {
	fill: var(--accent-color2);
	transition: fill, var(--transition-delay);
}

/* Social icons Styling */
.social {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	width: 50vw;
	bottom: 3%;
	left: 50%;
	margin-left: -25vw;
}

.instagram, .youtube, .facebook {
	display: inline;
	fill: var(--accent-color);
	margin: 10px;
	width: 5vh;
	min-width: 40px;
}

.instagram:hover, .youtube:hover, .facebook:hover {
	transform: scale(1.05);
	transition: fill, var(--transition-delay);
	fill: var(--hover-color);
}

.social a {
    text-decoration:none
}


/* Footer styling */
.copyright {
	position: absolute;
	left: 2vh;
	top: 247vh;
}

/* Contact form styling */
.contact-form {
	position: absolute;
	top: 200vh;
	left: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 40vmin;
	min-width: 30vh;
	height: 50vh;
	background-color: var(--hover-color);
	transform: translate(-100%);
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	margin: 0;
}

.contact-form input, .contact-form textarea{
	width: 40%;
	height: 5vh;
	margin: 2%;

	border-radius: 6px;
	border-width: 2px;
	border-color: var(--accent-color2);
	border-style: solid;

	background-color: var(--background-color2);
	transition: background-color, var(--transition-delay);

	font-size: 1.5vh;
	color: var(--text-color2);
	padding-left: 1.2vh;
}

.fullname-email {
	display: flex;
	justify-content: center;
	width: 100%;
}

input#subject {
	width: 84%;
}

textarea#content {
	width: 84%;
	height:12vh;
	margin: 2%;
	resize: none;
	padding-top: 1.2vh;
	font-size: 1.5vh;
}

input[type=submit] {
	width: 13vw;
	min-width: 250px;
	max-width: 312.5px;
	height:3.3vw;
	min-height: 80px;
	max-height: 100px;
	border-radius: 15px;
	cursor: pointer;
	margin-top: 6%;
	padding: 0;
}

input[type=submit]:hover, input[type=submit]:active {
	transform: scale(1.05);
	background-color: var(--hover-color2);
}


/* Main part of the text styling */
h1 {
	text-align: center;
	color: var(--text-color);
	font-size: 5vh;
	padding: 0;	
	padding-bottom: .5em;
	transition: var(--transition-delay);
}

h2 {
	text-align: center;
	color: var(--text-color);
	font-size: 3vh;
	padding: 0;
	padding-bottom: .5em;	
	transition: var(--transition-delay);
}

p {
	color: var(--text-color2);
	font-size: 2vh;
	transition: var(--transition-delay);
}

.about-me .text h1 {
	text-align: left;
	padding: 0;
}

.copyright p{
	font-size: 1.5vh;
	color: var(--text-color3);
}

::-webkit-input-placeholder { /* Edge */
	color: var(--text-color3);
	font-size: 1.5vh;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: var(--text-color3);
	font-size: 1.5vh;
}

::placeholder{
	color: var(--text-color3);
	font-size: 1.5vh;
}