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

a {
color:#5cebf3;
}
video {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.textbox-background {
border-style: solid;
    border-image-slice: 9 fill;
    border-image-width: 10px;
  border-image-source: url(/resources/textbox-background.png);
}


.main-container {
  width: 80%;
  margin: auto;
}

@media (min-width:1080px) { 
  .main-container {
      width: 1000px;
      margin: auto;
  }
}

.img-box {
   display:flex;
   width:100%;
   justify-content: center;
   align-items: center;
}

.logo {
  justify-content: center;
  align-items: center;
	width: 40%;
}

.main-container .buttons {
    margin: 20 auto;
    width: 100%;
  
	display:flex;
    align-items: stretch;
    justify-content: space-between;
}

.buttons-element {
	width: 22%;
    height: 70px;
  
  	font-family: 'Geo', sans-serif;
	color:white;	
    font-size: 30;
  
  	 display: flex;
    align-items: center;
    justify-content: center;
  text-decoration: none;
}

.main-content {
	
    margin: 0 auto;
  color: white;
  padding: 60px;
}

.main-background {
  
  image-rendering: pixelated;
background-image: url('/resources/sea-background.png');
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}


.screenshots {
  display: flex;
  flex-wrap: wrap;
}

.social-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.screenshots > img {
  box-shadow: 0 0 0 1px black;
    margin-bottom: 10px;
    margin-left: 10px;
}
.screenshot {
 cursor: zoom-in;
 width:384px;
}

.center-in-parent {
    margin:auto;
    justify-content: center;
    display:flex;
}

.avatar {
  image-rendering: pixelated;
   display: block;
  margin-left: auto;
  margin-right: auto;
}