body {
  background-color: OldLace;
  color: sienna;
  font-family: "CoolVetica","Trebuchet MS", sans-serif;  ;
  border-color: chocolate;
  cursor: url("https://graciekart.neocities.org/images/cursor.png"), auto; 
}




@font-face {
  font-family: CoolVetica;
  src: url(https://graciekart.neocities.org/fonts/Caliban.ttf);
}

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

a:hover,
a:focus {
  font-style: italic;
  cursor: url("https://graciekart.neocities.org/images/cursor2.png"), auto;
}


.container {
  display: grid;
  grid-template:
    "myHeader"
    "myMainContent";
  grid-gap: 10px;
}

header { grid-area: myHeader; }


/* navigation menu */

ul {
  font-size: 1.5em;
  padding: 10px;
  list-style-type: none;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

h {
  font-size: 3em;
  margin: 20px
  
}


main { grid-area: myMainContent; }
footer { grid-area: myFooter; }


.image-gallery a img:hover {
  border: 3px solid;
  transition: border .1s ease

  
}

.image-gallery div {
  margin:10px;
 
}
.image-gallery div img {
   width:100%;
   height: auto;
}

.image-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  
 
}

.subgal div {
  margin:10px;
  align-content:center
 
}
.subgal div img {
   width:100%;
   height: auto;
}

.subgal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  
 
}

.pregal div {
  margin:10px;
  align-content: center
 
}
.pregal div img {
   width:100%;
   height: auto;
}

.pregal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  
 
}


/*clicky things*/

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
   position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    height: 100%;
    width:auto;
    cursor: zoom-out;
}

  



/*about page*/
.about {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  object-fit: contain
  

  
  }
  
  .about div {
    display: block;
   padding: 50px;
  
   
  }
  
  

.about div img {
  border-radius: 20%;
  width: 100%;
  height: auto;
  

 
}



.solid {
  border-top: 2px solid;
  color: chocolate;
  margin: 50px;
  
}

.about2 {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: right
  
  
}

.about2 img {
  display: block;
  align-items: center;
    max-width: 100%;
    
    
}

.divider {
  display: flex;
  justify-content: center;
  margin: 20px
  
  
}

.divider img {
  display: block;
  margin:10px;
  height: 3vw;
   width: auto
}

/*cv page*/

.cv {
  display: flex;
  justify-content: center;
  object-fit: contain
  
  
}


/*beatritz page */

.bcontain {
  display: grid;
  grid-template-columns: 3fr 2fr;

}

.bcontain div {
  margin: 10px;
 

}


.subcontain {
  display: grid;
  max-height: 50vw;
  overflow-y: auto
   
}

.subcontain div {
  width: 100%;
 
  
}  

.subcontain img {
 width: 100%; 
  
}
/* Mobile */
@supports (grid-template-columns: masonry) {
.image-gallery {
  display: grid;
  grid-template-columns: masonry;  

}}

@media screen and (max-width:800px) {
    .bcontain {
  display: grid;
  grid-template-columns: 1fr;

}}

@media screen and (max-width: 800px) {
  .image-gallery  {
  display: grid;
  grid-template-columns: 1fr;
  
}

@media screen and (max-width: 800px) {
  .pregal {
    display: grid;
    grid-template-columns: 1fr;
}}

@media screen and (max-width: 800px) {
  .subgal {
    display: grid;
    grid-template-columns: 1fr;
}}

@media screen and (max-width: 800px) {
  ul {
  font-size: 2.5vw;
  padding: 5px;

}}

@media screen and (max-width: 800px) {
  .about {
  display: grid;
  grid-template-columns: 1fr;

}}

@media screen and (max-width: 800px) {
  .about div {
    display: block;
   padding: 5px;
  
   
  }}
  
@media screen and (max-width: 800px) {
  .container {
    grid-template:
      "myHeader"
      "myMainContent";
  }
}}