/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/*text*/

@font-face {
    font-family: "VideoPhreak";
    src: url("/fonts/videophreak.ttf") format("truetype");
}
@font-face{
    font-family: "Oxygen";
    src: url("/fonts/Oxygen_Regular.ttf") format("truetype");
}
h1{
  font-family: "VideoPhreak", serif;
  background-image: linear-gradient(red, blue);
  color: transparent;
  background-clip: text;
}
p{
  font-size: 20px;
  color: #2D0842;
}

.button{
  color: #2A0C52;
  font-family: "VideoPhreak", serif;
  border-style: solid;
  background-image: url("/ui/Button.png");
  background-size: contain;
  border-color: #210630;
  border-width: 2px;
}
.button:hover{
  color: #fcffdf;
  background-image: url("/ui/ButtonTop.png");
  position:relative;
  bottom: 1vh;
}

/*body stuff*/

body {
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to bottom, #2A0330, #2A0330, #B81D1D, #EBD357);
  height: 200vh;
  color: black;
  font-family: "Oxygen", sans-serif;
  border-radius: 25px;
}
.container {
    width: clamp(90vw, 40em, 100vw);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 50px; 
    margin-top: 10px;
    margin-bottom:10px;
    padding-bottom: 10px;
    border-radius: 25px;
    background-color: #F2E28A; 
    border-style: solid;
    border-color: #210630;
    border-width: 2px;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
    transform: scale(0.95);
  }
header {
  background-image: url("/Header.png");
  height: 47vh;
  background-size: 100%;
  overflow: hidden;
  position: relative;
  border-bottom: 2px solid #2D0842;
  background-position: center;
  background-repeat: no-repeat;
}
header > img{
  width: 1200px;
  height: 300px; 
  }


ul.topnav {
  font-family: "Oxygen", sans-serif;
  font-size: 16px;
  float: left;
  justify-content: flex-start;
  width: 23vw;
  list-style-type: none;
  margin: 5px;
  padding: 10px;
  background-color: #fcffdf;
  border-style: solid;
  border-color: #2D0842;
  border-width: 2px;
}

/* Style links in topnav */
ul.topnav li a {
  height: 60px;
  background-image: url("/ui/NavButton.png");
  background-size: 23vw 60px;
  background-repeat: no-repeat;  
  display: block;
  color: #2A0C52;
  padding: 5px 16px;
  text-decoration: none;
}

.listItem:hover{  
  position: relative;
  bottom:1vh; 
}

/* Change color on hover */
div> ul.topnav li a:hover {
  background-image: url("/ui/NavButtonTop.png");
  color: #fcffdf;
}

div.flex-container {
 display: flex; 
 flex-direction: column; 
 background-color: #fcffdf; 
 border: 2px solid #2D0842; 
 margin: 5px;
 height: 88vh; 
 width: 62vw;
 overflow-y: scroll; 
 overflow-x: hidden;
 gap: 10px
}

div.flex-container > div {
  margin: 10px;
}


.widget{
  display: flex;
  flex-direction: row;
  padding: 20px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #FCFCE3, #FAE36B, #FF9794, #FF94DA);
  border-style: solid;
  border-color: #2D0842;
  border-width: 2px;
}

.gallery-scroll{
  overflow-x: scroll;
  overflow-y: auto;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  width: 60vw;
  padding: 1vw;
}
.gallery-scroll img{
  padding: 1vw;
}

@media screen and (max-width: 600px){
  .button{
    display: none;
  }
  .widget {
    flex-direction: column;
  }
  .widget > div{
    margin: 5vh;
  }
  .widget > div > h1{
    min-width: 90vw;
  }
  .widget > div > p{
    min-width: 90vw;
  }
  .widget > div > img{
    margin-top: 3vh;
    margin-bottom: 1vh;
    padding: 0;
    height: auto;    
    transform: scale(2);
  }
  .container{
    margin: 0;
    transform : scale(1.05);
  }
  header{
    background-image: url("/ui/LunarMawLogo.png");
    justify-content: center;
    background-size: 75%;
    background-color: #fcffdf
  }
  ul.topnav{
    transform: scale(0.6);
    float: none;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100vw;
    height: 5vh;
  }
  ul.topnav li a{
    background-image: none; 
    padding: 0;
    margin: 0;
  }
  .listItem:hover{
    bottom: 0vh;
  }
  div> ul.topnav li a:hover {
  background-color: #2A0C52;
  background-image: none;
  color: #fcffdf;
}
  div.listItem > img{
    display: none;
  }
 div.flex-container {
  width: 100vw;
  height: auto;
}

}