/* Custom properties/variables  */
:root {
  --main-white: #f0f0f0;
  --main-red: #be3144;
  --main-blue: #45567d;
  --main-gray: #303841;
}

html {
/* Set font size for easy rem calculations
   * default document font size = 16px, 1rem = 16px, 100% = 16px
   * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
  */
  font-size: 40%;
  scroll-behavior: smooth;
}
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/
/* 1200px / 16px = 75em */
/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 50%;
  }
}
/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 48%;
  }
}
/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 40%;
  }
}
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem; /* 18px */
  font-weight: 400;
  line-height: 1.4;
  background-color:black;
  color:black; 10:35 09.05.2020
max-width:100%;
	
a:hover{background-color:gray;}
}
#seealso{
	font-size: 3rem; 
	text-align:right; 
	color: white; 
	padding-bottom: 0; 
	padding-right: 0;}
h1,
h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size:4rem;
  text-align:center;
}
p{ font-size: 2rem;}

h1 {
  font-size: 6rem;
}

h2 {padding:2rem;
  font-size: 4.2rem;
}
h3{font-size: 3rem;}
Section h3{font-size:3rem; text-align:center;}
body h4{font-size:3rem; font-style: normal;}
body div a{color:inherit;;}
a {text-decoration: none; color: black;}
a:hover{background-color:gray; text-decoration: none;}

nav { margin:auto;width:100%; background-color:	#98cee3 ;
  text-decoration:none;
  z-index: 2;
  border-bottom:solid black 1px;
  top:0; left:0; padding:0px; margin:0px;
  padding:0px; line-height:5rem;
    font-size:3rem;
  }


.nav-link{text-decoration:none;
  color:black;

size:2rem;

  margin-top:1rem;
  margin-bottom:1rem;

  margin-right:2rem;
  font-size:3rem;

  }
#contact h2 a {color: white}
#contact h2 a {color: white}
.dropdown-item {font-size:3rem; background-color: #98cee3;}
nav .dropdown-menu {background-color:	#98cee3;}
.navbar-brand {font-size:3rem; padding-right:15vw;}
#navbar a:hover{background-color:gray;}

#home{height:2rem;}
section{ padding-left:2rem; padding-right:2rem;  padding-top:5rem}
#welcome-section{background-image: url("../images/img3.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:;
display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
	 color:black; z-index:1;
  height: 100vh;
   padding-top:0rem; padding-bottom:0rem;
	 }

#titluri {text-align:center; margin-top:0; padding-top: 0;
    margin-top:0;}

hr {background-color:white; color:white;}
#cloud{display:inline; width:100%;height: 100%; position:relative; z-index:-2;  }

#musiclinks iframe{padding:5rem; }

#musicheader{ color:black;}
#Compositions{background-color:#98cee3; text-align: center; margin:auto;}
#Bolintin{color:white;}
#Bolintin iframe {height:65vh; width:100%;}
#Music{
  /*display: flex; flex-flow:column;
  text-align:center;
justify-content: center;
align-items: center;*/

   background-color:
  	#73b2cb; width:100%; height:100vh;
    padding-right:0;padding-left:0; color:black;}
    #Music {color: black;}
#Production { width:100vw; height:100vh; }
#Production h2,h3{font-style:normal;}
#Production iframe{padding-top:6rem;}
body h2 {font-size:2.8 rem; align-items: center; margin:auto;}
.navbar-brand {font-style: normal; size:2rem;}

#description { color:black;
   margin-top:0; padding-top:0;}

iframe {display:flex;
      flex-flow: row wrap;
      align-items:center;
      text-align:center;
      justify-content:center; max-width:60vw;
 }

Section iframe {text-align:center;
justify-content:center; margin:auto; }
#Soundtracks {color:white;}
Section h2{padding:3rem;}
Section p{padding:3rem;}
#Balkan{background-color: #73b2cb;}

#Bio{color:blac; background-color:#73b2cb; FONT-SIZE:40%;}
#Bio h3{padding-top:3rem;text-align:center;}
#Bio p{text-align:center;}
#Contact{color:white;}

#Contact h2{ }
.contact-links
{display:flex; justify-content:center; align-items:center;
     width:100%;
  font-size:3rem;
  text-decoration: none; }

.contact-links a{font-size: 3rem; text-decoration:none; color: white; padding-right:2rem; text-shadow: 2px 2px 1px #1f1f1f;
  ;}
.contact-links a:hover{font-size: 3rem; transform: translateY(8px);transition: transform 0.3s ease-out}

 /* phone fix
@media (max-width: 40em) {
  html {
    font-size: 45%;
  }
  section h2{padding-top:10rem;}

}*/



.carousel-inner{
    height: 85vh;
    width:60vw;
    text-align:center;
    margin:auto;
}
.carousel-item {
    height:85vh;
    width: 60vw;
    text-align:center;
    margin:auto;
}
.carousel-item iframe{ height:60vh;width:60vw;text-align:center;margin:auto;}
.carousel-control-prev{height:10vh; margin:auto; }
.carousel-control-prev:hover {background-color: inherit;}
.carousel-control-next:hover {background-color: inherit;}
.carousel-control-next{height:10vh; margin:auto; }
#production .carousel-control-prev{margin:auto; position:absolute; float:center;}
#Production {color: white;}
#Production h2 {color: white;}
#Production a {color: white;}
  #carousel-caption h4 a{color:inherit; line-height:normal;}
  #carousel-caption p {color:inherit; position:'relative'; line-height:normal;}




  /* Dropdown
  */
  /* Dropdown Button */
.dropbtn {

  border: none;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
  display: inline;
  cursor:pointer;
  width:100%;


}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {float:left;
  display: none;
background-color:#89c7c7;
  min-width: 0px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border:solid 1px black;
  padding-left: 1rem;
  padding-right: 1rem;
width:100%;
}

/* Links inside the dropdown */
.dropdown-content a{
  color: black;
  text-decoration: none;
  display: inline;
  font-size: 0.5rem;
}
#navbar .dropdown-content a{font-size:3rem; }
/* Change color of dropdown links on hover */
.dropdown-content a:active {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:active .dropdown-content {
  display: block;
  color: black;
text-decoration: none;  padding-left:2rem;
padding-right:2rem;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:active .dropbtn {background-color: gray  ;padding-bottom:5px;}

#contrastblue {background-color:#73b2cb; }
/* Dropdown
*/
/* Dropdown Button */
.dropbtn {

border: none;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
display: inline;
cursor:pointer;
width:100%;
}
body p{font-size: 2.5rem;}
/*
a {border: 0.5px solid black;
  padding:5px;}
  */