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


*{
    /*cursor:pointer;*/
}



body {
    /*background-image: linear-gradient(45deg, rgba(238,174,202,1) 0%, rgba(245,245,245,1) 50%);*/
	
	background-image: linear-gradient(45deg, rgba(255,249,241,1) 0%, rgba(245,245,245,1) 50%);
	/*background-color:lightcoral;*/
	/*background: linear-gradient(170deg, rgba(255,251,246,1) 17%, rgba(242,255,246,1) 100%);*/
	/*background: linear-gradient(170deg, rgba(252,252,252,1) 17%, rgba(230,230,230,1) 100%);*/
    margin: 0;
	background-repeat: repeat;
	height: auto;
    /*overflow: hidden;*/
	/*background-image:url("images/Background.png");
	background-size:100%, auto;
	background-repeat: no-repeat;*/
}

a {
    text-decoration: none;
	color: black;
}

.links:hover {
	color: red;
	transition: 0.1s;
}


#topbar {
	height:1.8vw;
	width: 100%;
	position: fixed;
	z-index: 10;
	top: 0;
	background-color: white;
}



#redline {
    width: 100%;
    border-bottom: 0.3em solid red;
	position:fixed;
	z-index: 100;
	bottom:0;
	animation-name: example;
  animation-duration: 10s;
	/*animation-timing-function: linear;*/
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {transform:translateX(-100%);}
  50% {transform:translateX(0%);}
  100% {transform:translateX(-100%);}
}



/*HOVER--------------------*/

/*

#OOS:hover {
	background-image:url("images/OOS_01.jpg");
	transition: 0.1s;
	color:white;
}


#HW:hover {
	background-image:url("images/HW_01.jpg");
	transition: 0.1s;
	color:white;
}

#BGD:hover {
	background-image:url("images/Background.png");
	transition: 0.1s;
	color:white;
}

#GH:hover {
	background-image:url("images/GH_01.jpg");
	transition: 0.1s;
	color:white;
}

#TORSO:hover {
	background-image:url("images/TORSO_02.jpg");
	transition: 0.1s;
	color:white;
}

#TV:hover {
	background-image:url("images/TV_02.jpg");
	transition: 0.1s;
	color:white;
}

#CT:hover {
	background-image:url("images/CT_01.jpg");
	transition: 0.1s;
	color:white;
}


#LAMENT:hover {
	background-image:url("images/LAMENT_01.jpg");
	transition: 0.1s;
	color:white;
}

#IWW:hover {
	background-image:url("images/TORSO_02.jpg");
	transition: 0.1s;
	color:white;
}

#BF:hover {
	background-image:url("images/BF_01.jpg");
	transition: 0.1s;
	color:white;
}

#DM:hover {
	background-image:url("images/DM_01.jpg");
	transition: 0.1s;
	color:white;
}


#OOB:hover {
	background-image:url("images/01.jpg");
	transition: 0.1s;
	color:white;
}

#WFTS:hover {
	background-image:url("images/WFTS_01.jpg");
	transition: 0.1s;
	color:white;
}



#social:hover {
	background-color:black;
	transition: 0.1s;
	color:white;
}

#social2:hover {
	background-color:black;
	transition: 0.1s;
	color:white;
}

*/

/*-----------------------*/







h1 {
    font-family: "Runda";
    font-size: 7vw;
    font-weight:550;
    margin-top: -1.25%;
    margin-left: 1vw;
	margin-right: 1vw;
	letter-spacing: -0.50vw;
	filter:grayscale(100);
	margin-block-end: 0;
	
	/*text-shadow: rgba(255, 255, 255, 0.2) 1px 0 1px;*/
}

h2 {
    font-family: "Runda";
    font-weight: lighter;
    /*padding-top: 0.4em;*/
    margin-bottom: 0;
    margin-top: 0;
    margin-left: 1vw;
}

#Vincent {

	left: 1vw;
	color:black;
	max-width: 100%;
	transition: 0.1s;
	z-index:11;
}

#Vincent:hover {
	color: red;
}

#Contact {

	right: 1vw;
	color:black;
	max-width: 100%;
	transition: 0.1s;
	z-index:11;
	
}

#Contact:hover {
	color: red;
}

.worktitles {
	left: 50%;
    transform: translateX(-50%);
	color:black;
	text-align:center;
	max-width: 100%;
	
}

span {
	font-family: "Runda";
    font-weight: lighter;
    padding-top: 0.4em;
    margin-bottom: 0;
    margin-top: 0;
	font-size: 1rem;
	position: fixed;
}

p {
	font-family: "Runda";
    font-weight: lighter;
    padding-top: 0.4em;
	padding-bottom: 0.4em;
    margin-bottom: auto;
    margin-top: auto;
	font-size: 1rem;
	max-width: 75%;
	color: black;
	text-align: left;
	margin-left: 1vw;
	display: block;
	/*margin-left: auto;*/
	margin-right: 50%;
}

.paragraph {
    width: 100%;
    /*height: 7vw;*/
    color: black;
    border-bottom: 0.08vw solid black;
	border-top: 0.08vw solid black;
	margin-bottom: 8vh;
}

.menu {
    width: 100%;
    /*height: 7vw;*/
    color: black;
    border-bottom: 0.08vw solid black;
	    position: relative; /* Required for the pseudo-element */
    overflow: hidden; /* Prevents pseudo-element overflow */
}

.menu2 {
    width: 100%;
    /*height: 7vw;*/
    color: black;
	text-align: right;
    border-bottom: 0.08vw solid black;
	    position: relative; /* Required for the pseudo-element */
    overflow: hidden; /* Prevents pseudo-element overflow */
}

.menu::before, .menu2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position:top;
    opacity: 0;
    transition: opacity 0.3s ease; /* Smooth transition */
    z-index: -1; /* Place it behind the content */
}

#OOS::before {
    background-image: url("images/OOS_01.jpg");
}

#HW::before {
    background-image: url("images/HW_01.jpg");
}

#BGD::before {
    background-image: url("images/Background.png");
}

#GH::before {
    background-image: url("images/GH_01.jpg");
}

#TORSO::before {
    background-image: url("images/TORSO_02.jpg");
}

#TV::before {
    background-image: url("images/TV_02.jpg");
}

#CT::before {
    background-image: url("images/CT_01.jpg");
}

#LAMENT::before {
    background-image: url("images/LAMENT_01.jpg");
}

#IWW::before {
    background-image: url("images/TORSO_02.jpg");
}

#BF::before {
    background-image: url("images/BF_01.jpg");
}

#DM::before {
    background-image: url("images/DM_01.jpg");
}

#OOB::before {
    background-image: url("images/01.jpg");
}

#WFTS::before {
    background-image: url("images/WFTS_01.jpg");
}

/* Hover Effect */
.menu:hover::before {
    opacity: 1; /* Fade in the background image */
}
.menu2:hover::before {
    opacity: 1; /* Fade in the background image */
}

.menu h1, .menu2 h1 {
    color: black; /* Initial text color */
    transition: color 0.3s ease; /* Smooth color transition */
}

.menu:hover h1, 
.menu2:hover h1 {
    color: white; /* Change text color on hover */
}


/*section {
    background-color: black;
}*/

#social:hover, #social2:hover {
	background-color: black;
	transition: 0.3s;
}



img {
    /*height:75%;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*width: 75%;*/
  max-height: 100vh;
  max-width: 75%;
  /*padding-top: 10vh;*/
  padding-bottom: 6vh;
}

iframe {
	  display: block;
  margin-left: auto;
  margin-right: auto;
  /*width: 75%;*/
  max-height: 100vh;
  max-width: 75%;
  /*padding-top: 10vh;*/
  padding-bottom: 6vh;
}

/*.work01 {
    max-width: 20%;
    white-space: nowrap;
}

.show {
    display: inline-block;
}
*/

.section {
	margin-bottom: 5vh;
	padding-top: 10vh;
}








/* For mobile phones: */
@media (orientation:portrait)  {
	h1 {
		font-size: 9vw;
		margin-top:0;
	}
	.menu {
    width: 100%;
    height: 11vw;
	
    color: black;
    border-bottom: 0.2vw solid black;
}

	
	p {	margin-right: auto;
	}
	
	#Vincent,#Contact {
		font-size: 5vw;
	}
	
.menu2 {
    width: 100%;
    height: 11vw;
    color: black;
	
	text-align: right;
    border-bottom: 0.2vw solid black;
}
	
	.worktitles {
		filter:opacity(0);
	}
	
	span {
		font-size: 3rem;
	}
	
	#topbar {
	height:8vw;
	width: 100%;
	position: fixed;
	z-index: 10;
	top: 0;
	background-color: white;
}
	
	iframe {
		max-height: 75vw;
	}
	
	#redline {
	border-bottom: 0.5em solid red;
	}
}


@media (orientation:landscape)  {
	h1 {
		font-size: 8vw;
		display: inline-block;
		vertical-align: middle;
	}
	.menu {
    width: 100%;
    height: 7vw;
		padding-top: 0%;
    color: black;
    /*border-bottom: 0.3vw solid black;*/
}

.menu2 {
    width: 100%;
    height: 7vw;
	padding-top: 0%;
    color: black;
	text-align: right;
    /*border-bottom: 0.3vw solid black;*/
}
	
		.worktitles {
		filter:opacity(100);
	}
	
}