.section {
    display: flex; 
    justify-content: center;
    align-items: center;
    color:white;
}

.s1 {
    background-image: url(/assets/imgs/Space/Space.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.s2 {
    background-image: url(/assets/imgs/Sky/Sky.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.s3 {
    background-image: url(/assets/imgs/Mountain/Mountain.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.s4 {
    background-image: url(/assets/imgs/Forest/Forest.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.s5 {
    background-image: url(/assets/imgs/Beach/Beach.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.s6 {
    background-image: url(/assets/imgs/Ocean/Ocean.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.slide {
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 2em; 
    color: white; 
}

.title {
    display: block;
}

.hidden-button {
   color:rgb(0, 243, 20);
   background-color: rgba(236, 4, 4, 0.288);
   height: 300px;
   width: 130px;
   border-radius: 10px;
   position: absolute;
   opacity: 0%
}

.hidden-button:hover{
    cursor: pointer;
}

#sat1{
    top: 0%;
    right: 67.6%;
    width: 32.3%;
    height: 43%;
}

#sat2{
    top: 11%;
    right: 22%;
    width: 34%;
    height: 37%;
}

#sat3{
    top: 48%;
    right: 0%;
    width: 33%;
    height: 33%;
}

#coding-team{
    top: 13%;
    right: 75%;
    width: 22%;
    height: 25%;
}

#robot-team {
    top: 15%;
    right: 0%;
    width: 29%;
    height: 26%;
}

#kiosk-team {
    top: 41%;
    right: 47%;
    width: 37%;
    height: 34%;
}

#film-team {
    top: 72%;
    right: 14%;
    width: 29%;
    height: 30%;
}

#club-description {
    top: 50%;
   right: 73%;
   width: 9%;
   height: 24%;
}

#help {
    top: 49%;
   right: 22%;
   width: 9%;
   height: 23%;
}

#translation-button {
    position: fixed;
    top: 2%;
    right: 3.8%;
    z-index: 1000;
}

#help-button {
    position: fixed;
    top: 2%;
    right: 1%;
    z-index: 1000;
}

.popup {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 80%; 
    height: 80%; 
    transform: translate(-50%, -50%); 
    z-index: 1000; 
    background-color: aliceblue; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    border-radius: 10px;
    display: none;
    box-sizing: border-box;
}

.popup-header {
    width: 100%;
    background-color: lightslategray;
    margin: 0%;
    padding: 0xp;
    height: 5%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.popup-content {
    width: 100%;
    height: 100%;
    overflow-y: auto; 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    color: black;
}


#game-window {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 80%; 
    height: 80%; 
    transform: translate(-50%, -50%); 
    z-index: 1000; 
    background-color: aliceblue; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    border-radius: 10px;
    display: none;
    box-sizing: border-box;
}

#inner-game-window {
    position: absolute;
    background-color: darkgrey;
    width: 95%;
    height: 86%;
    border-radius: 10px;
    transform: translate(-50%, -50%); 
    left: 50%;
    top: 52%;
}

#game-window-header {
    width: 100%;
    background-color: lightslategray;
    margin: 0%;
    padding: 0xp;
    height: 5%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#game-close-button {
    float:right;
    background-color: darkgray;
    border: 0px;
    height: 100%;
    width: 5%;
    border-top-right-radius: 10px;
}

#game-close-button:hover {
    background-color: red;
}

.hidden{
    display: none;
}

.button1{
    outline: none;
    padding: 10px;
    border-radius: 10px;
    outline-color: white;
    box-shadow: none;
}

#sponsors {
    top: 48%;
   right: 0%;
   width: 41%;
   height: 44%;
}

#credits {
    top: 28%;
   right: 62%;
   width: 38%;
   height: 31%;
}


.membercard {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.memberimage {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
}

.membername {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.memberteam {
    font-size: 14px;
    color: #555;
}

#crack1 {
    top: 37%;
   right: 51%;
   width: 22%;
   height: 28%;
   rotate: -45deg;
}

#crack2 {
    top: 30%;
   right: 1%;
   width: 19%;
   height: 32%;
   rotate: 45deg;
}

#bike {
    top: 0%;
   right: 65%;
   width: 35%;
   height: 36%;
}

#snack {
    top: 0%;
   right: 2%;
   width: 55%;
   height: 36%;
}

#closepopups {
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
    z-index: 900;
    opacity: 30%;
    display: none;
    background-color: #555;
}

#slidetitle {
    position: fixed;
    top: 2%;
    margin-right: 53%;
    margin-left: 47%;
    z-index: 800;
    color: white;
    font-size: 30px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.text{
    color: black;
    font-size: 24px;
}

.title{
    color: black;
    font-size: 28px;
}