@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*/
  background-image: url("https://i.imgur.com/FSJj9EU.png"); /*Replace with your own background*/
	cursor: url("https://i.imgur.com/EwzBX9G.png"), pointer;
  cursor: url("https://i.imgur.com/f4zAPaN.png"), default;
}

 a,button{
 cursor: url("https://i.imgur.com/EwzBX9G.png"), pointer;
}

html {
  scroll-behavior: smooth;
}

  /* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  font-size: 1.2em;
  border-radius: 20px;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%
}

.header-content {
  padding-top: 10px;
  padding-right: 50px;
  padding-left: 50px;
}

.header-title {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.header-image img {
  width: 100%;
  height: auto;
}

#header h1 {
  text-align: center;
}

/* 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: #bdbdbd;
  /* 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: white;
  /* 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 */
}

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 */
}



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

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

.big-quote {
  font-size: 32px;
  color: white;
  font-family: "Brush Script MT", serif;
  position: relative;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  }
  
  center {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
  
 

.container {
  float: left;
  margin-left: 270px;
  max-width: 100%;
  columns: 3 auto
}

.image {
  display: inline;
  border-radius: 50%;
  width: 200px;
  transition: all .3s ease;
}

.image:hover {
  transform: scale(1.1);
}

.caption {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-shadow: 2px 2px 0 #000, 2px 2px 0 #000,2px 2px 0 #000, 1px 1px 0 #000; color: white;
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: inset 0 0 0 2000px rgba(0,0,45,0.9);
  border-radius: 15px
}


.imagelist {
  list-style: none

}





@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}



/* -------------------------------------------------------- */
/* text scroll */
/* -------------------------------------------------------- */

  img {
   max-width:100%; 
  }
  
  .screens {
   text-align: center;
  }

  @media only screen and (min-width: 641px) {

   .screens img {
    width: 191px;
    margin-right: 2px;
   }

  }

  @media only screen and (max-width: 640px) {

    .screenbox img {
      display:block;

    }
    
    .container {
      display: block;
      margin-left: auto;

    }
    
    .image {
      width: 200px;
    }
    
    .caption {
      display: table;
      padding: 7px;
      width: 200px;
      font-size: 10px;
    }
    
    .button {
      margin-top: 600px
    }
}