@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

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

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif; /* change the main font of the site here*/
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.scalable-image {
  /* Set initial size */
  width: 200px;
  height: auto;
  /* Add smooth transition effect */
  transition: transform 0.25s ease;
  /* Ensure the cursor changes to indicate it's clickable */
  cursor: pointer;
}

/* Define the size when the 'clicked' class is added via JavaScript */
.scalable-image.clicked {
  transform: scale(2); /* Makes the image twice its original size */
  /* You can add positioning to bring it to the front if needed */
  position: relative;
  z-index: 10;
}

.tilted-img {
  transform: rotate(5deg); /* Positive for clockwise, negative for counter-clockwise */
  /* Optional: Add transition for smooth hover */
  transition: transform 0.3s ease-in-out;
}

.glow-box {
    /* Basic styling for the element */
    color: white;
    border-radius: 8px;
    display: inline-block; /* Makes the box size fit the content */
    cursor: pointer; /* Changes cursor to a hand pointer */

    /* The initial state has no glow or a subtle glow */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.glow-box:hover {
    /* This is the glow effect applied on hover */
    /* Syntax: horizontal-offset vertical-offset blur-radius spread-radius color */
    box-shadow: 0 0 30px 10px #00f, /* A bright blue glow */
                0 0 60px #00f;      /* An additional layer for intensity */
    
    /* Optional: Slightly lift the element to enhance the effect */
    transform: translateY(-2px);
}

.tilted-imgleft {
  transform: rotate(-5deg); /* Positive for clockwise, negative for counter-clockwise */
  /* Optional: Add transition for smooth hover */
  transition: transform 0.3s ease-in-out;
}

html {
  scroll-behavior: smooth;
}

/* General Styling*/
#header {
  /* Color and spacing */
  background-color: #191854;
  color: #A2C0EB;
  padding: 20px;
  /* Code below creates the sticky header, if you don't like that then delete this */
  top: 0;
  width: 100%; 
}

#header h1 {
  text-align: center;
}
.scrolling_text {
    width: 100%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
.text {
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    color: #3A1240;
}
.text span {
    margin: 0 40px;
}
@keyframes animate_text {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
}
.text {
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    color: #3A1240;
    animation: animate_text 30s linear infinite; /* The animation property */
}

/* This is only spacing for the navigation links, don't edit unless you want to change that*/
#navLinks {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

/* to change the style of the navigation links, edit this:*/
#navLinks a {
  color: #A2C0EB;
  /* transition makes it so the link doesn't instantly change on hover. you can remove
  this or play with the timing. This is especially useful if you're changing the size or
  saturation of elements */
  transition: all 0.2s ease-out;
}

#navLinks a:hover {
  color: #A2C0EB;
  /* You can also do other things here, like make it bigger if you want:
  transform: scale(120%);*/
}

.main {
  padding: 0em 2em 1em 2em;
  margin: 0 auto; /* centers the main content */
  background-color: #A2C0EB;
}

hr {
  margin: 2em 0;
}

#footer {
  text-align: center;
  padding: 15px;
}

/* Page specific */
.textPage {
  max-width: 800px; /*You can remove or not use this, I just think it looks better on bigger windows */
}

/* Touching any CSS below this can break the gallery. Proceed with caution */
.gallery {
  padding-top: 1em;
  /* 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 3;
  text-align: center;
}

.gallery img {
  border: 0px solid black; /* You can remove the border if you want */
  width: 100%;
}

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

.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 2;
  }
}

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