/* 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." */
body{
  margin: 0;
  padding: 20px;
  background-image: url('aflagbg.png');
  background-repeat: repeat;
  background-size: auto;
  cursor: url('batface_curser.png') 4 12, auto;
}
.box{
  width: 100px;
  height: 100px;
  border: 10px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  transition: border 0.3s ease-out;
  box-sizing: border-box;
}
.gallery-home{
  display: block;
  margin: auto;
  width: 50%;;
}
.gallery-img{
justify-content: center;
}
.box:hover{
  border: 3px dashed #00ffff;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0 12px;
  padding: 250px;
}

.topstyle{
  outline-offset: -13px;
  outline: 1px inset #000000;
}

.outline1{
  border-radius: 8px;
  border: 4px double #F5F5F5;
  outline-offset: -3px;
  outline: 1px solid #fff;
  gap: 1em;
}

.container-home{
  /*border-radius: 8px;*/
  /*border: 4px double rgba(211, 220, 50, .6);*/
  /*outline-offset: -3px;*/
  /*outline: 1px solid #fff;*/
  /*gap: 1em;*/
  width: 100%;
  height: 100%;
  max-width: 100%;
  /*background: no-repeat url('assets/tux2.png');*/
  /*background-position: 20% 30%;*/
  /*background-size: 30%;*/
  /*mix-blend-mode: color-dodge;*/
  /*maybe do slow flashing images of tux drawings instead*/
}

@font-face {
    font-family: 'windowsregular';
    src: url('w95fa.woff2') format('woff2'),
         url('w95fa.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.borderimage{
  border-style: ridge;
  border-width: 20px;
  border-color: white;
  outline-offset: -13px;
  outline: 1px inset #000000;
  background-color: white;
}

.topnav{
  padding: 20px;
  max-width: 80%;
  border-radius: 10px;
  color: white;
  text-align: right;
  display: flex;
}

.image{
  width: 30%; 
  max-width: 100%;
  margin-right: 20px;
  margin-left: 0;
}



.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  height: 100vh; /* Set container height to the viewport height */
}

.flex-container{
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 0.5em;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  gap: 1em;
}
@media (max-width: 1025px) {
  .flex-container {
      flex-direction: column;
  }
}

.hoverbutton{
  
  padding: 16px 20px;
  text-align: center;
  text-shadow: -1px 0 3px #fff;
  border-radius: 2px;
  box-sizing: border-box;
  /*transition: border 0.2s ease-in, padding 0.2s ease-in, border-radius 2s ease-out;*/
  /*lil bit jittery when transitioning the padding and border, presumably because of the discrete steps. at some point do this in js? would be v simple*/
  transition: border-radius 2s ease-out;
  animation: 0;
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.hoverbutton:hover{
  border: 3px groove #00ffff;
  padding: 13px 17px; /*diminishing padding to account for extra border*/
  animation: oscillateBorder1 0.5s ease-in-out infinite;
  border-radius: 24px;
  float: none;
}
.hoverbutton:active{
  border: 0 dotted rgba(220, 0, 0, 1);
  padding: 13px 17px;
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  animation: 0;
  transition: border 1s ease-out, border-radius 2s ease-out;
}
@keyframes oscillateBorder1 {
  0%{
    border-style: groove groove double solid;
  }
  25%{
    border-style: solid groove groove double;
  }
  50%{
    border-style: double solid groove groove;
  }
  75%{
    border-style: groove double solid groove;
  }
}

.hovertext{
  border: 0 dotted #00ffff;
  transition: animation 0.2s ease-in, border 0.1s ease-in;
  animation: 0;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}
.hovertext:hover{
  padding: 8px;
  border: 13px dashed #00ffff;
  animation: oscillateBorder2 0.2s ease-in-out infinite alternate;
}
@keyframes oscillateBorder2 {
  0%{
    border: 2px dotted #00ffff;
  }
  100%{
    border: 2px outset #00ffff;
  }
}

.text{
  padding: 10px;
  max-width: 80%; /* Adjusted text width for readability */
  border-radius: 10px;
  color: #040720;
  text-align: right;
  display: flex;
  flex-direction: column; /* Adjusted for vertical alignment */
  align-items: flex-end; /* Align content to the right */
  align-self: flex-end; /* Align the text to the bottom */
}

.texttest{
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  height: 100vh; /* Set container height to the viewport height */
}




h1{
  color: #040720;
  text-align: right;
  padding: 10px;
  margin-right: 10px;
  margin-left: 10px;
  font-family: 'Roboto Mono', monospace;
  background-color: white;
}

p{
  font-family: 'Roboto Mono', monospace;
  margin-right: 10px;
  margin-left: 10px;
  background-color: white;
  padding: 10px;
  word-break: break-word;
}

button{
  font-family: 'Roboto Mono', monospace;
  font-size: 1em;
  margin-right: 10px;
  margin-left: 10px;
  color: #fff;
  padding: 10px;
  word-break: break-word;
  cursor: url('batface_curser.png') 4 4, pointer;
}


nav{
  font-family: 'Roboto Mono', monospace;
  text-align: right;
  padding: 10px;
  margin-right: 10px;
  margin-left: 10px;
  background-color: white;
  word-break: break-word;
}
.right-window img {
      width: 304px;
      height: auto;
    }