@font-face {
font-family: 'Kolbano';
src: url('../assets/fonts/Kolbano-regular.otf') format('opentype');
}
@font-face {
font-family: 'KolbanoItalic';
src: url('../assets/fonts/Kolbano-regularItalic.otf') format('opentype');
}
:root {
--orange: 
#fb2e0f;
--blue: 
#16358E;
--white: 
#efefef;
--grey:
#31302f;
--title-font: 'Kolbano';
--fs-0: 10rem;
--fs-1: clamp(0.5rem, 4vw , 6rem);
--fs-2: clamp(0.5rem, 3vw , 3rem);
--fs-3: clamp(0.5rem, 2vw , 3rem);
--fs-4:clamp(0.5rem, 1.5vw , 3rem);
--fs-5: clamp(0.5rem, 1vw , 3rem);
}

body {
width: 100vw;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
margin: 0;
padding: 0;
background-color: var(--white);
}
main{
width: 100vw;
height: 85vh;
padding: 0;
margin: 0;
scroll-snap-align: start;

}
footer {
background-color: var(--white);
text-align: center;
padding: 1rem;
}
nav{
  margin-top: 2vh;
  display: flex;
height: 6vh;
align-items: center;
justify-content: center;
}
ul{
display: flex;
justify-content: center;
list-style-type: none;
gap: 3rem;
font-family: var(--title-font);
font-size:  var(--fs-3);
}
a{
text-decoration: none;
color: var(--grey);
}
a:hover {
color: var(--orange);
}
#art-container {
display: flex;
justify-content: center;
gap : 2rem;

}
.artwork{
font-size: var(--fs-4);
font-family: var(--title-font);
}
.artwork:hover {
color: var(--orange);
}

#artwork-container{
width: 85vh;
height: 85vh;
overflow-y: auto;

}

#artwork-container::-webkit-scrollbar {
display: none;
}

#artwork-name-container{
overflow-y: auto;
height: 85vh;
width: 20vw;
}

#artwork-name-container::-webkit-scrollbar {
display: none;
}
#cartel {
    height: 85vh;
    width: 20vw;
    padding-left: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:7vh;
    font-family: var(--title-font);
    font-size: var(--fs-4);
}

#buttons-container>*{
     display: flex;
    
}
#artist-name{
    font-weight: bold;
}
.artistInfo{
  font-size: var(--fs-5);
}
#success-message {
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
#contact-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button, input, textarea {

  
  margin: 0;
  font-size: var(--fs-5);
}


input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

#contact-form {
  border: solid 3px var(--grey);
  max-width: 40vw;
  margin: 6vw auto;
  position: relative;
}

form {
  padding: 4vh;
  margin: 50px 0;
}

.email {
	float: right;
	width: 45%;
}

input[type='text'], [type='email'], textarea {
	background: none;
  border: none;
	border-bottom: solid 2px #474544;
	color: #474544;
	font-size: var(--fs-5);
  font-weight: 400;
  letter-spacing: 1px;
	margin: 0em 0 1.875em 0;
	padding: 0 0 0.875em 0;
font-family: Arial, Helvetica, sans-serif;

}

input[type='text']:focus, [type='email']:focus, textarea:focus {
	outline: none;
	padding: 0 0 0.875em 0;
}

.message {
	float: none;
}

.name {
	float: left;
	width: 45%;
}


::placeholder{
      text-transform: uppercase;
}

textarea {
	line-height: 150%;
	height: 20vh;
	resize: none;
  width: 100%;
}


#form-button {
  background-color: var(--white);
  border: solid 2px #474544;
  color: #474544;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: var(--fs-5);
  font-weight: bold;
  outline: none;
  padding: 2vh 2vw;
  text-transform: uppercase;
  
}

#form-button:hover {
  background: var(--orange);
  color:var(--white);
  border: var(--orange);
}
#contact-title{
    font-family: var(--title-font);
    color: #474544;
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: 1vw;
  text-align: center;
  text-transform: uppercase;
}
#error404-container{
  height: 92vh;
}
#dropdown {
  position: relative;
  display: inline-block;

}

#dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  background-color: var(--white);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  text-align: center;
  z-index: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap:1rem;
  border-radius: 10px;
}
#dropdown:hover #dropdown-content {
  display: flex;
  flex-direction: column;

}

#filters{
  font-family: var(--title-font);
  font-size: var(--fs-5);
  padding:1rem;
  display: flex;
  flex-direction: row;
  justify-content: right;
  gap:1rem;
}
.filters-elements{
border: 1px solid #474544;
padding-left:0.7rem;
padding-right:0.7rem;
background-color: var(--white);
color:var(--grey);
}
.filters-elements:hover{
cursor: pointer;
align-content: center;
color:var(--white);
background-color: var(--orange);
border-color: var(--orange);
}

.year-filter:hover {
  cursor: pointer;
  color:var(--orange);
}
#artist-name{
  color:var(--orange)
}
#start-button{
  background-color: var(--white);
  border: 1px solid #474544;
  border-radius: 50px;
}

#start-button:hover{
  cursor: pointer;
  color:var(--white);
  border-color: var(--orange);
  background-color: var(--orange);
  border-radius: 50px;
}

.metadata-button{
  cursor:pointer;
  text-decoration: underline;
}

.metadata-button:hover{
  color:var(--orange);
  text-decoration: underline;
}
.cartel-element{
  display: flex;
  flex-direction:column ;
  gap:0.5rem;
}

#artists-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width:80vw;
  gap: 2rem;
}
.artistCard{
display: flex;
margin-left: 5.5rem;
margin-right: 5.5rem;
align-items: center;
gap:1rem;
font-family: var(--title-font);
}
.artistName{
color: var(--orange);
font-weight: 600;
font-size: var(--fs-4);
}
.artistArtworks{
  font-style: italic;
  font-size: var(--fs-4);
}
#intro-container{
  color:var(--grey);
  font-family: var(--title-font);
  display:flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 10rem;
  margin-right: 10rem;
  padding:2rem;
  align-items: center;
  border:var(--orange) 2px solid
}
#udem-logo{
  height: 15vh;
}
#artists-intro{
  height: fit-content;
  padding-right: 2vw;
  padding-top: 2vw;
  padding-bottom: 2vh;
  display: flex ;
  align-items: center;
  font-size: var(--fs-5);
}

.read-button,.repo-button,#course-repo-button{
  color: var(--white);
  background-color: var(--orange);
  display: inline-block;
  border: var(--orange) 2px solid;
  padding: 0.5vw;
  width: fit-content;
}
.read-button:hover,.repo-button:hover,#course-repo-button:hover{
  cursor: pointer;
  color: var(--orange);
  background-color: var(--white);
  display: inline-block;
  border: var(--orange) 2px solid;
  padding: 0.5vw;
  width: fit-content;
}

#artists-popup{
  display: none;
  position: fixed;
  top:10vh;
  height: 70vh;
  width: 40%;
border:var(--grey) 2px solid;
background-color: var(--white);
}
#artists-popup-container{
  display: flex;
  justify-content: center;
  font-family: var(--title-font);
}
#artists-list{
    overflow-y: scroll;
scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  height: 56vh;
  padding-left: 3vw;
}
#artists-title{
  text-align: center;
  font-size: var(--fs-4);
}
#close{
  font-size: var(--fs-4);
  text-align: end;
  padding-top: 2vh;
  padding-right: 1vw;
}
#close:hover{
  cursor: pointer;
}
#show-artists-list:hover{
   cursor: pointer;

}
#show-artists-list{
  font-size: var(--fs-5);
}

#biblios{
  margin-top: 10vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vw;
}
.biblioCard{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:1vh;
border:var(--grey) 2px solid;
height: 35vh;
width: 35vh;
text-align: center;
font-family: var(--title-font);
font-size: var(--fs-5);
}
.biblioAuthor{
  padding: 1vh;
}
.biblioName{
  color:var(--orange);
  height: 30%;
  align-content: center;
  padding-left: 1vw;
  padding-right: 1vw;
}

#noBiblioCard{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:2vh;
height: 30vh;
text-align: center;
font-family: var(--title-font);
}

#art-history-container{
  height: 92vh;
  
}
.moment-container{
  margin-top: 5vh;
  height: 88vh;
  display: flex;
  flex-direction: row;
}
.text-container{
  background-color: var(--white);
  width: 50vw;
  display: flex;
  flex-direction: column;
  
}
.photo-container{
  background-image: url('../assets/images/color/vera.png');
  background-size:cover;
  width: 50vw;
}
.title-moment{
  font-family: var(--title-font);
  font-size: var(--fs-1);
  color: var(--orange);
  text-align: center;
}
.text-moment{
  font-family: var(--title-font);
  line-height: 3.5vh;
  padding: 3vw;
}
.history-card{
  display: flex;
  border: var(--orange) 1px solid;
  width: 20vw;
  height: 10vh;
}
#art-history-container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2vw;
}
.date-history{
  font-family: var(--title-font);
  font-size: clamp(0.5rem, 2vw , 3rem);
  color: var(--orange);
  width: 50%;
  text-align: center;
  align-content: center;
  border-right: var(--orange)1px solid ;
}
.date-history-hover{
 background-color: var(--orange);
  font-family: var(--title-font);
  font-size: var(--fs-3);
  color: var(--white);
  width: 50%;
  text-align: center;
  align-content: center;
  border-right: var(--orange)1px solid ;
 
}
.image-history{
  text-align: center;
  align-content: center;
  width: 50%;
      height: 100%;
object-fit: cover
}
#gallery-button{
  border: var(--orange)1px solid;
  padding: 1.5vh;
}
#gallery-button:hover{
  border: var(--orange)1px solid;
  background-color: var(--orange);
  color:var(--white);
  padding: 1.5vh;
  cursor: pointer;
}