@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

/* Removing this will mess with element sizing for the whole site*/
* {
  box-sizing: border-box;
}

body,
html {
  font-size:100%;
  margin: 0;
  padding: 0;
  font-family: "Comfortaa", sans-serif; /* change the main font of the site here*/
  text-align: center;
}

html {
  scroll-behavior: smooth;
}



@media screen and (orientation: landscape) {
 .title h2{
  text-anchor:middle;
  text-align: center;
  font-size: 4vmax !important; 
  font-weight: bold !important;
  padding-right: 10vw;
  padding-left: 10vw;
}
/* General Styling*/
#sidebar {
  /* Color and spacing */
  background-color: white;
  border-radius: 0px 0px 50px 0px;
  /*border-right: 2px solid black;*/
  /*border-bottom: 2px solid black;*/
  color: black;
  padding: .5vw;
  /* Code below creates the sticky header, if you don't like that then delete this */
  position: fixed;
  top: 0;
  width: 14vw;
  transition: all 0.3s ease-out, top 0.5s ease-out;;
  z-index: 10;
  overflow:hidden;
}

#sidebar:hover {
  /* Color and spacing */
  color: black;
  /* Code below creates the sticky header, if you don't like that then delete this */
  position: fixed;
  width: 17vw;
  box-shadow: 0px 0px 20px 20px #FF58D9;
  padding-left: 1.5vw;
}

#sidebar h1{
  width: 80%;
  height: 100%;
  transition: all 0.2s ease-out;
  fill:black;
}

#sidebar h1:hover {
  width: 90%;
  height:  120%;
  fill: #FF58D9;
}

/* This is only spacing for the navigation links, don't edit unless you want to change that*/
#navLinks {
  display: inline;
  align-items: center;
  text-align: left;
  width: 100%;
  height: 100%;
  position: relative;
  flex-direction: column;
  line-height: 250%;
  list-style-type: none;
}

/* #navLinks a:before {
  content: "◜ ";
  color: black;
  transition: all 0.2s ease-out;
}

#navLinks a:hover:before {
  color: #FF58D9;
  content: "◟ ";
}*/

/* to change the style of the navigation links, edit this:*/
#navLinks a {
  color: black;
  transition: all 0.2s ease-out;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 1vmax;
  text-align: left;
  word-break: break-word;
}

#navLinks a:hover {
  color: #FF58D9;
  padding-left: 10%;
  fill: #FF58D9;
}

ul{
  text-align: left;
  align-content: left;
}

ul li{
  display: inline;
  vertical-align: middle;
  padding-left: 0%;                /* Removes default left padding */
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  list-style: none;
  transition: all 0.2s ease-out;
  text-align: left;
}

ul li:hover {
  color: #FF58D9;
  padding-left: 5%;
  fill: #FF58D9;
}
}

@media screen and (orientation: portrait) {
.title h2{
  text-anchor:middle;
  text-align: center;
  font-size: 4vmax !important; 
  font-weight: bold !important;
  padding-right: 10vw;
  padding-left: 10vw;
}
/* General Styling*/
#sidebar {
  /* Color and spacing */
  background-color: white;
  border-radius: 0px 0px 20px 0px;
  /*border-right: 2px solid black;*/
  /*border-bottom: 2px solid black;*/
  color: black;
  padding: .5vw;
  /* Code below creates the sticky header, if you don't like that then delete this */
  position: fixed;
  top: 0;
  width: 20%;
  transition: all 0.3s ease-out, left 0.5s ease-out;;
  z-index: 10;
  overflow:hidden;
}

#sidebar:hover {
  /* Color and spacing */
  color: black;
  /* Code below creates the sticky header, if you don't like that then delete this */
  position: fixed;
  box-shadow: 0px 0px 20px 20px #FF58D9;
  padding-left: 1.5vw;
}

#sidebar h1{
  width: 100%;
  transition: all 0.2s ease-out;
  fill:black;
}

#sidebar h1:hover {
  fill: #FF58D9;
}

/* This is only spacing for the navigation links, don't edit unless you want to change that*/
#navLinks {
   display: inline;
  vertical-align: middle;
  padding-left: 0%;                /* Removes default left padding */
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  list-style: none;
  transition: all 0.2s ease-out;
  text-align: left;
  
}
#navLinks a {
  color: black;
  transition: all 0.2s ease-out;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 1vmax;
  text-align: left;
  word-break: break-word;
}

#navLinks a:hover {
  color: #FF58D9;
  padding-left: 10%;
  fill: #FF58D9;
}

ul{
  text-align: left;
  align-content: left;
}

ul li{
  display: inline-block;
  vertical-align: middle;
  padding-right: 0%;                /* Removes default left padding */
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  list-style: none;
  transition: all 0.2s ease-out;
  text-align: left;
}

ul li:hover {
  color: #FF58D9;
  padding-left: 5%;
  fill: #FF58D9;
}
  
}


@media screen and (orientation: landscape) {
.main {
  padding: 4vh 5vh 0vh 5vh;
  margin: 0 auto; /* centers the main content */
  background-color: white;
}
}

@media screen and (orientation: portrait) {
.main {
  padding: 3vh 0vh 0vh 0vh;
  margin: 0 auto; /* centers the main content */
  background-color: white;
}
}

hr {
  margin: 2em 0;
}

#footer {
  text-align: center;
  font-size:80%;
  padding: 15px;
  position:relative;
  bottom: 0;
  width: 100%;
}


.textPage p{
  font-size: 1.5vmax;
  padding-right: 15vw;
  padding-left: 15vw;
}

/* Touching any CSS below this can break the gallery. Proceed with caution */
.gallery {
  padding-top: 5vmax;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 1;
  text-align: center;
}

.gallery img {
  width: 100%;
}

@media screen and (orientation: landscape) {
.gallery_2 {
  padding-top: 0em;
  padding-right: 4em;
  padding-left: 4em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 1;
  text-align: center;
}

.gallery_2 img {
  width: 100%;
}

}

@media screen and (orientation: portrait) {
.gallery_2 {
  padding-top: 0em;
  padding-right:0em;
  padding-left: 0em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 1;
  text-align: center;
}

.gallery_2 img {
  width: 100%;
}

}

.gallery_3 {
  padding-top: 0em;
  padding-right: 0em;
  padding-left: 0em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 1;
  text-align: center;
  opacity: 90%;
  
}

@media screen and (orientation: landscape) {
 .gallery_3 img {
  width: 100%;
}

.uncentered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 2%;
  z-index: 10;
  transition: all 0.5s ease-out;
  font-size: 2vmax;
  text-shadow: 0 0 20px #FF2CCA;
  font-weight: 800;
}

}

@media screen and (orientation: portrait) {
 .gallery_3 img {
  height: 100vmax;
  transform: translate(-50vmax, 0%);
  
}

.uncentered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 10;
  transition: all 0.5s ease-out;
  font-size: 2.5vmax;
  text-shadow: 0 0 20px #FF2CCA;
  font-weight: 800;
}


}


@media screen and (orientation: landscape) {
  /* Container holding the image and the text */
.container {
  overflow: hidden ;
  position:relative;
  text-align: center;
  color: white;
  z-index: 1;
  border: 5px solid black; /* You can remove the border if you want */
} 
.container img{
 filter: blur(0px);
 transition: all 0.5s ease-out;
 
}


/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 400%;
  text-shadow: 0 0 10px #FF2CCA;
  background-color: rgb(255, 255, 255, .5);
  backdrop-filter: blur(15px);
  cursor: pointer; /* Add a pointer on hover */
  border-radius: 50px;
  padding: 5%;
  box-shadow: 0px 0px 40px 40px #FF58D9;
  z-index: 10;
  opacity: 0;
  transition: all 0.5s ease-out;
  
}

.container:has(.centered:hover) img {
 filter: blur(5px);
}

.centered:hover {
  opacity:1;
}

/* Container holding the image and the text */
.container2 {
  overflow: hidden ;
  position:relative;
  text-align: center;
  color: #FF2CCA;
  z-index: 1;/* You can remove the border if you want */
} 

  
}
  
@media screen and (orientation: portrait) {
  /* Container holding the image and the text */
.container {
  overflow: hidden ;
  position:relative;
  text-align: center;
  color: white;
  z-index: 1;
  border: 2px solid black; /* You can remove the border if you want */
  width: 100%;
} 
.container img{
 filter: blur(0px);
 transition: all 0.5s ease-out;
 
}


/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 100%;
  text-shadow: 0 0 5px #FF2CCA;
  background-color: rgb(255, 255, 255, .5);
  backdrop-filter: blur(15px);
  cursor: pointer; /* Add a pointer on hover */
  border-radius: 20px;
  padding: 5%;
  box-shadow: 0px 0px 5px 5px #FF58D9;
  z-index: 10;
  opacity: 0;
  transition: all 0.5s ease-out;
  
}

.container:has(.centered:hover) img {
 filter: blur(5px);
}

.centered:hover {
  opacity:1;
}

/* Container holding the image and the text */
.container2 {
  overflow: hidden ;
  position:relative;
  text-align: center;
  color: #FF2CCA;
  z-index: 1;/* You can remove the border if you want */
} 

}  



figure {
  display: inline-block;
  margin: 0;
  margin-bottom: 20px;
}

.spotlightImage {
  display: block;
  margin: 0 auto;
}

/* Below changes the number of columns in the gallery for smaller screens
   If you changed the column number on line 85, you might have to edit it here too
   (it's not exactly mobile and tablet sizing)
    */
@media only screen and (max-width: 800px) {
  .gallery {
    columns: auto 1;
  }
}

@media only screen and (max-width: 500px) {
  .gallery {
    columns: auto 1;
  }
}