/* BODY ALLE SCHERMEN ----------- */
body {
  
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;

padding: 0px;
margin: 0px;

width: 100vw;
height: 100vh;
min-height: -webkit-fill-available;

left: 0;
top: 0;

font-family: 'Bread'; font-size: 15px; line-height: 20px; text-align: justify; color: #282828;
text-align: center;
background-color: #282828;

scroll-behavior: smooth;
}


@font-face {
font-family: 'Bread';
src: url('fonts/Inconsolata-VariableFont_wdth,wght.ttf');
}


/* VIDEO ACHTERGROND VERBERG OP KLEINE SCHERMEN ----------- */
@media only screen and (max-width: 768px)
{video#myVideo {
display: none;
visibility: hidden;
z-index: -999;
width: 0;
height: 0;
}}


/* Style the video: 100% width and height to cover the entire window */
/* VIDEO ACHTERGROND ALLEEN VOOR GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{#myVideo {
position: fixed;
height: 100%;
width: 177.77777778vh; /* 100 * 16 / 9 */
min-width: 100%;
min-height: 56.25vw; /* 100 * 9 / 16 */
top: 0;
}}

/* Style the video: 100% width and height to cover the entire window */
/* VIDEO ACHTERGROND ALLEEN VOOR GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{#myVideo {
position: fixed;
height: 100%;
width: 177.77777778vh; /* 100 * 16 / 9 */
min-width: 100%;
min-height: 56.25vw; /* 100 * 9 / 16 */
top: 0px;
left: 0;
z-index: -11;
}}



/* FIXED BACKGROUND GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}}

/* FIXED BACKGROUND KLEINE SCHERMEN ----------- */
@media only screen and (max-width: 768px)
{body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("images/swan songs the saddest girl screenshot.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
}}








/* MENUBALK NIET TONEN OP KLEINE SCHERMEN ----------- */
@media only screen and (max-width: 768px)
{div.menu {display: none; }}


div.menu {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  width: 80vw;
  z-index: 999;
  background-color: transparent;
}

div.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}



/* menu item 1 HOME */
div.menu li:nth-child(1){
  float: left;
  width: 25%;
}

/* menu item 2 ABOUT */
div.menu li:nth-child(2){
  float: left;
  width: 25%;
}

/* menu item 3 CONTACT */
div.menu li:nth-child(3){
  float: left;
  width: 25%;
}

/* menu item 4 MUSIC */
div.menu li:nth-child(4){
  float: left;
  width: 25%;
}






/* MENU ALLE SCHERMEN ----------- */
div.menu li a {
  display: block;
  letter-spacing: 3px;
  font-size: 14px;
  color: white;
  text-align: center;
  line-height: 50px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

/* MENU KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px) and (orientation: portrait)
{div.menu li a {
  font-size: 12px;
  display: block;
  color: white;
  text-align: center;
  line-height: 50px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}}


div.menu li:hover a {
color: #282828;
background-color: transparent;
}

/* HAMBURGERMENU NIET TONEN OP GROTE SCHERMEN----------- */
@media only screen and (min-width: 769px)
{div.topnav {display: none;}}




/* HAMBURGERMENU KLEINE SCHERMEN----------- */
@media only screen and (max-width: 768px)
{div.topnav {font-weight: 100; letter-spacing: 3px; display: block;}}


/* HAMBURGERMENU VOORDAT JE GEKLIKT HEBT */
.topnav a {display: none;}

.topnav {z-index: 777; position: fixed; top: 0; right: 0; overflow: hidden; text-align: left; background-color: transparent;}

body .topnav a.hamburger {text-decoration: none; margin-right: 10px; color: #ffffff; display: block; font-size: 34px; line-height: 50px;}

body .topnav a.hamburger:hover {color: #ffffff; font-size: 38px; background-color: transparent;}

.topnav a.times {display:none;}


/* HAMBURGERMENU NADAT JE GEKLIKT HEBT */
.topnav.responsive {position: fixed; top: 0; width: 100%; background-color: #282828;}

.topnav.responsive a {height: 25vh; font-size: 20px; line-height: 25vh; text-align: center; float: none; display: block; vertical-align: bottom;}
  
.topnav.responsive a.hamburger {display:none;}

.topnav.responsive a.times {position: absolute; top: 0; right: 0; text-align: right; margin-left: auto; margin-right: 10px; font-size: 60px; line-height: 60px;}

.topnav.responsive a:nth-child(1) {padding-top: 0;}
.topnav.responsive a:nth-child(5) {padding-bottom: 30vh;}


.topnav.responsive a:link {color: rgb(154,154,154); text-decoration: none;}
.topnav.responsive a:visited {color: rgb(154,154,154); text-decoration: none;}
.topnav.responsive a:active {color: #ffffff; text-decoration: none;}
.topnav.responsive a:hover {color: #ffffff; text-decoration: none; background-color: transparent;}


.topnav.responsive a.times:hover {color: #ffffff; text-decoration: none; background-color: transparent;}








/* div.opening KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.opening {
 position: relative;
 top: 5vh;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 50px;
 max-width: 500px;
}}



/* div.opening GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.opening {
position: relative;
top: 4vh;
width: 100%;
min-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
max-width: 1000px;
}}


/* The animation code */
@keyframes fadeinandfadeout {
  from {opacity: 0}
  to {opacity: 1}
}

/* The element to apply the animation to */
div.opening {
  opacity: 1;
  animation-name: fadeinandfadeout;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: linear;
}


/* img#artistname KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{img#artistname {
 width: 90%;
 max-width: 500px;
 margin-bottom: 0;
}}

/* img#artistname GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{img#artistname {
width: 400px;
margin-bottom: 0;
}}




/* div.videos KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.videos {
 position: relative;
 top: 5vh;
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 50px;
 max-width: 450px;
}}


/* div.videos GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.videos {
position: relative;
top: 4vh;
width: 100%;
min-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
max-width: 800px;
}}



/* embed-container-video ----------- */
.embed-container-video {
font-family: 'Name';
position: relative;
margin-top: 0;
margin-bottom: 0px;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}

/* embed-container-video ----------- */
.embed-container-video iframe, .embed-container object, .embed-container embed, .embed-container-video img {
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
}

/* embed-container-video KLEINE SCHERMEN ----------- */
@media only screen and (max-width: 768px) 
{.embed-container-video iframe, .embed-container object, .embed-container embed {width: 100%; height: 100%;}}

/* embed-container-video GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px) 
{.embed-container-video iframe, .embed-container object, .embed-container embed {width: 100%; height: 100%;}}



/* div.openingdiv1 KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.openingdiv1 {
 font-size: 20vw;
 font-size: 20vw;
 position: relative;
 color: #ffffff;
 margin-bottom: 7vw;
}}


/* div.openingdiv1 GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.openingdiv1 {
 font-size: 4vw;
 line-height: 4vw;
 position: relative;
 color: #ffffff;
 margin-bottom: 4vw;
}}



/* div.openingdiv2 KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.openingdiv2 {
 font-size: 6vw;
 line-height: 6vw;
 position: relative;
 color: #ffffff;
 margin-bottom: 7vw;
}}


/* div.openingdiv2 GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.openingdiv2 {
 font-size: 3vw;
 line-height: 3vw;
 position: relative;
 color: #ffffff;
 margin-bottom: 4vw;
}}


/* streaming KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.streaming {
letter-spacing: 3px;
font-weight: 100;
position: relative;
margin-top: 20px;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
max-width: 500px;
}}


/* streaming GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.streaming {
font-weight: 100;
position: relative;
margin-top: 20px;
width: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}}


div.streaming div {
 border: 1px #ffffff solid;
 position: relative;
 width: 100%;
 height: 37px;
 margin-bottom: 10px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 font-size: 14px;
 letter-spacing: 3px;
 line-height: 38px;
 border-radius: 5px;
}


div.streaming div:hover {background-color: #ffffff; color: #282828;}

div.streaming div a {position: absolute; left: 0; width: 100%; height: 100%; margin-left: auto; margin-right: auto; text-align: center;}

.streaming a:link {color: #ffffff; text-decoration: none; background-color: transparent;}
.streaming a:visited {color: #ffffff; text-decoration: none; background-color: transparent;}
.streaming a:hover {color: #282828; text-decoration: none; background-color: #ffffff;}
.streaming a:active {color: #ffffff; text-decoration: none; background-color: transparent;}



/* img#thesaddestgirl KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{img#thesaddestgirl {
 width: 22vw;
}}

/* img#thesaddestgirl GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{img#thesaddestgirl {
 width: 7vw;
}}





/* H1 GROTE SCHERMEN ALGEMEEN ----------- */
@media only screen and (min-width: 769px)
{h1 {
  position: relative;
  font-size: clamp(10px, 7vw, 80px);
  line-height: clamp(12px, 8vw, 90px);
  letter-spacing: 3px;
  color: #ffffff;
  margin-top: 0;
  font-weight: 100;
  margin-bottom: 8vw;
}}


/* H1 KLEINE SCHERMEN ALGEMEEN ----------- */
@media only screen and (max-width: 768px)
{h1 {
  position: relative;
  top: 0;
  font-size: 7vw;
  line-height: 8vw;
  letter-spacing: 3px;
  font-weight: 100;
  color: #ffffff;
  margin-top: 8vw;
  margin-bottom: 8vw;
  }}

/* H1 GROTE SCHERMEN HOMEPAGE ----------- */
@media only screen and (min-width: 769px)
{h1#homepage {
  margin-bottom: 0;
}}

/* H1 KLEINE SCHERMEN HOMEPAGE ----------- */
@media only screen and (max-width: 768px)
{h1#homepage {
  margin-bottom: 0;
}}


/* H1 GROTE SCHERMEN ABOUT ----------- */
@media only screen and (min-width: 769px)
{h1#abouth1 {
  font-size: clamp(10px, 8vw, 100px);
  line-height: clamp(12px, 9vw, 110px);
}}

/* H1 KLEINE SCHERMEN ABOUT ----------- */
@media only screen and (max-width: 768px)
{h1#abouth1 {
  padding-top: 0;
}}


/* H1 KLEINE SCHERMEN CONTACT ----------- */
@media only screen and (max-width: 768px)
{h1#contacth1 {

  padding-top: 0;
  padding-bottom: 10vh;
  font-size: 20vw;
}}

/* H1 KLEINE SCHERMEN MUSIC ----------- */
@media only screen and (max-width: 768px)
{h1#musich1 {
  top: 12vw;
  padding-top: 0;
  padding-bottom: 10vh;
  font-size: 20vw;
}}

/* H1 KLEINE SCHERMEN LYRICS ----------- */
@media only screen and (max-width: 768px)
{h1#lyricsh1 {
  top: 12vw;
  padding-top: 0;
  padding-bottom: 10vh;
  font-size: 20vw;
}}


/* H1 GROTE SCHERMEN PRESS ----------- */
@media only screen and (min-width: 769px)
{h1 {
  font-size: clamp(10px, 6vw, 80px);
  line-height: clamp(12px, 7vw, 90px);
}}

/* H1 KLEINE SCHERMEN PRESS ----------- */
@media only screen and (max-width: 768px)
{h1#pressh1 {
  padding-top: 0;
}}



h2 {
  position: relative;
  color: #282828;
  font-size: 24px;
  letter-spacing: 3px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 3px;
  text-align: left;
}

h2.homepage {
  font-size: 18px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: #ffffff;
  margin-top: 0;
}


h2.music {
 margin-top: 0;
 font-size: 30px;
}


h2.streaming {
 position: relative;
 color: #ffffff;
}


h2.lyrics {
margin-top: 0;
}


h3.homepage {
color: #ffffff;
letter-spacing: 3px;
font-weight: 100;
}


/* SKELETEONS  ----------- */
div.skeletons {
 width: 100%;
 text-align: center;
 margin-bottom: 40px;
}

img.skeletons {
 width: 120px;
}


/* CROW  ----------- */
div.crow {
 width: 100%;
 text-align: center;
 margin-bottom: 40px;
}

img.crow {
 width: 50px;
}


/* SWAN  ----------- */
div.swan {
 width: 100%;
 text-align: center;
 margin-bottom: 40px;
}

img.swan {
 width: 100px;
}


/* div albumname KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.albumname {
 font-size: 13.7vw;
 font-weight: 100;
 letter-spacing: 3px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 100px;
 color: #ffffff;
}}


/* div albumname GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.albumname {
 font-size: 15vw;
 font-weight: 100;
 letter-spacing: 3px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 100px;
 color: #ffffff;
}}




/* albumcover KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{img.albumcover {
 width: 70vw;
}}

/* albumcover GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{img.albumcover {
 width: 27.6vw;
}}





/* albumcover KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{img.albumcover:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}}

/* albumcover GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{img.albumcover:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}}


a#albumcover:hover {
background-color: transparent;
}





/* CENTER ALLE SCHERMEN ----------- */
div.center {
position: relative;
text-align: justify;
max-width: 1000px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding: 50px;
border-radius: 5px;
}

/* CENTER KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px) and (orientation: portrait)
{div.center {
 width: 90%;
 padding: 5vw;
 display: block;
 margin-top: 0;
 margin-bottom: 0;
 padding-top: 50px;
}}


a:link {color: #282828; text-decoration: underline;}
a:visited {color: #282828; text-decoration: underline;}
a:active {color: #282828; text-decoration: underline;}
a:hover {color: #ffffff; text-decoration: none; background-color: #282828;}


div.formcontainer {
width: 100%;
max-width: 500px;
position: relative;
margin-left: auto;
margin-right: auto;
}

/* CONTACT FORM ------------*/
form {
height: auto;
background-color: transparent;
font-size: 15px;
}


input {
font-size: 15px;
width: 100%;
max-width: 500px;
padding: 10px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
color: #282828;
padding: 5px;
font-size: 16px;
}



textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 12px;
width: 100%;
max-width: 500px;
resize: none;
padding-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
padding-left: 10px;
margin: 8px 0;
height: 300px;
vertical-align: top;
color: #282828;
}

input[type=submit] {
width: 17vh;
height: 7vh;
font-size: 3vh;
background-color: #282828;
border: 1px solid #ffffff;
border-radius: 1px;
color: white;
text-decoration: none;
cursor: pointer;
border-radius: 5px;
}

input[type=submit]:hover {
background-color: #1E83F8;
border: 1px solid #1E83F8;
color: #ffffff;
}


/* div.empty KLEINE SCHERMEN ----------- */
@media only screen and (max-width: 768px) 
{div.empty {height: 25vh;}}


/* div.empty GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px) 
{div.empty {height: 25vh;}
}


/* LYRICS PAGE ----------- */
body#lyrics div.center {
 text-align: center;
}

div.lyrics {
position: relative;
display: inline-block;
text-align: center;
margin-top: 0;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 40px;
}


/* div.songlyric KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px)
{div.songlyric {
 width: 90vw;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 250px;
}}



/* div.songlyric GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.songlyric {
 width: 50vw;
 margin-bottom: 250px;
 margin-left: auto;
 margin-right: auto;
}}



div.songlyric div.center {
 text-align: center;
 top: 200px;
}


/* quote ALLE SCHERMEN ----------- */
div.quote {
  color: #ffffff;
  font-size: 1.7vw;
  line-height: 2vw;
  font-weight: 100;
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
  width: 100%;
}

/* quote SMALLE SCHERMEN ----------- */
@media only screen and (max-width: 768px)
{div.quote#small{
  font-size: 4vw;
  line-height: 4vw;
}}



/* quote SMALLE SCHERMEN ----------- */
@media only screen and (max-width: 768px)
{div.quote#big{
  display: none;
}}


/* quote GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.quote#small{
  display: none;
}}





/* MUSIC PAGE  ----------- */
div.musiccontainer {
position: relative;
display: inline-block;
margin-bottom: 20px;
}

/* iframe.bandcampplayer ALLE SCHERMEN  ----------- */
iframe.bandcampplayer {
position: relative;
display: inline;
float:left;
vertical-align: top;
border: 0;
width: 35%;
min-width: 280px;
height: 790px;
margin-bottom: 5%;
padding-right: 4%;
}

/* iframe.bandcampplayer KLEINE SCHERMEN  ----------- */
@media only screen and (max-width: 768px) and (orientation: portrait)
{iframe.bandcampplayer {
height: 770px;
width: 100%;
}}



div.albuminfo {
position: relative;
display: table;
text-align: justify;
margin-bottom: 40px;
}

/* div.albuminfo KLEINE SCHERMEN  ----------- */
@media only screen and (max-width: 768px) and (orientation: portrait)
{div.albuminfo {
}}






/* FOOTER */
div.footer {
  width: 100vw;
  z-index: 999;
  background-color: transparent;
  text-align: center;
}


/* div.footer ul SMALLE SCHERMEN ----------- */
@media only screen and (max-width: 768px)
{div.footer ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 90%;
 max-width: 500px;
 
 margin-left: auto;
 margin-right: auto;
 
 text-align: center;;
}}


/* div.footer ul GROTE SCHERMEN ----------- */
@media only screen and (min-width: 769px)
{div.footer ul {
  list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 30vw;
 
 margin-left: auto;
 margin-right: auto;
 
 text-align: center;;
}}



/* footer item 1 BANDCAMP */
div.footer li:nth-child(1){
 float: left;
 width: 20%;
}

/* footer item 2 SPOTIFY */
div.footer li:nth-child(2){
 float: left;
 width: 20%;
}

/* footer item 3 INSTAGRAM */
div.footer li:nth-child(3){
 float: left;
 width: 20%;
}

/* footer item 4 YOUTUBE */
div.footer li:nth-child(4){
 float: left;
 width: 20%;
}

/* footer item 5 BLUESKY */
div.footer li:nth-child(4){
 float: left;
 width: 20%;
}




/* FOOTER ALLE SCHERMEN ----------- */
div.footer li a {
  display: block;
  font-size: 2vw;
  color: white;
  text-align: center;
  line-height: 50px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

/* FOOTER KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px) and (orientation: portrait)
{div.footer li a {
  font-size: 3vw;
  display: block;
  color: white;
  text-align: center;
  line-height: 50px;
  padding: 0;
  margin: 0;
  text-decoration: none;
}}


div.footer li:hover a {
background-color: transparent;
}



/* SVG ALLE SCHERMEN ----------- */
svg {
 width: 25px;
 height: 25px;
 position: relative;
}

/* SVG KLEINE SCHERMEN PORTRAIT ----------- */
@media only screen and (max-width: 768px) and (orientation: portrait)
{svg {
 width: 25px;
 height: 25px;
 position: relative;
}}



svg path {
  background-size: 30px 30px;
  fill: #ffffff;
}

li:hover svg path {
  fill: #282828;
}