@import url('../fonts/inter.css');

body {
  background-color: white;
  color: black
}

#desktop {
    font-family: 'Inter';
    font-weight: 300;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   cursor: crosshair;
}

.desplegable {
  background-color: #fff;
  padding: 10px;
  border-radius: 15px;
  border: solid 1px;
  border-color: gray;
  max-width: 900px;
  margin: 1vw;
}

.desplegable summary {
  margin-left: -1vw;
  margin-top: -0.5vw;
}

.desplegable summary::marker {
  content: "";
}
.desplegable summary::-webkit-details-marker {
  display: none;
}

.desplegable p {
  margin-top: 10px;
  color: black;
  font-size: 1.5em;
}

.title {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: left;
  flex-direction: column;
  cursor: crosshair;
  
  h1 {
    margin: 1vw;
    padding: 0;
    font-family: "Inter";
    font-size: 6em;
    letter-spacing: -0.1rem;
    line-height: 1.1;
    text-align: left;
    font-weight: 500;    
    
    div {
      position: relative;
    }
  }
}

  h2 {
    margin: 1vw;
    padding: 0;
    font-family: "Inter";
    font-size: 2.4em;
    letter-spacing: -0.1rem;
    line-height: 1.1;
    text-align: left;
    font-weight: 500;  
}

  h4 {
    margin: 0.5vw 0vw 0vw 1vw;
    padding: 0;
    font-family: "Inter";
    font-size: 1.6em;
    letter-spacing: -0.03rem;
    line-height: 1.1;
    text-align: left;
    font-weight: 500;  
}

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

a:hover {color: orange;}

.detail-size {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-width: 50px;
  height: 1px;
  font-size: 11px;
}

h3 {
    margin: 0;
    padding: 0;}


/*Demo styles BEGIN*/
#window0 {	top: 5vw;	left: 4vw;}
#window0 .wincontent {	width: 38vw; height: 30vw; 	}
@media screen and (max-width:960px){
	#window0 {	left: 10px;	}
	#window3 {	left: 50px;	}	
}
@media screen and (max-width:770px){
	#window0 .wincontent {	width: 460px;	}
	#window2 {	left: 100px;	}
	#window1 {	top: 190px;	left: -5px;	}
}
@media screen and (max-width:540px){
#window0 .wincontent {	width: 230px; height: 200px;	}
#window3 .wincontent {
    width: 275px;
    height: auto;
}
#window3 {    top: 9px;    left: 10px;	}
#window2 {    left: -118px;	}
#window1 .wincontent {    width: auto;    height: 300px;	}
}