body {
    font-family: Arial, sans-serif;
    color: #ffffff;
    background-color: #57B9E4;
    margin: 0;
    padding: 0px;
}
p {
    font-size: 22px;
}
a {
    font-size: 20px;
}
#FIN{ /* Changes the size of the flag sligthly and also its position to put it to the corrdct position*/
    width:40px;
    height:25px;
    float: right;
    position: relative;
    top: 25px;
    left: 22px;
    z-index: 1;
    border: 1px solid transparent;

}
#UK{ /* Changes the size of the flag sligthly and also its position to put it to the corrdct position*/
    width:40px;
    height:25px;
    float: right;
    position: relative;
    top: 25px;
    left: -20px;
    z-index: 1;
    border: 1px solid white;
}

.checkbox { /* moves the checkbox so that its between the flags*/
    float: right;
    position: relative;
    top: 27px;
    left: -58px;
    z-index: 1;
    width: 25px;
    height: 15px;

}
.boxEN .topbar { /* creates the top bar for the english part*/
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: #136e95;
    position: relative;
    top: -27px;
    border-bottom: 2px solid black;

}
.boxFI .topbar {  /* creates the top bar for the finnish part*/
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: #136e95;
    position: relative;
    top: -27px;
    border-bottom: 2px solid black;


}

li {
    float: left;
}

li a { /* adds style to the contents of the topbar*/
    display: block;
    color: #fff;
    text-align: center;
    padding: 26px;
    text-decoration: none;
}

li a:hover { /*changes the background when hovering over a list item*/
    background-color: #fff;
    color: #1D89B8;
    transition: 0.75s;
}
.bi {/* changes the position of the downloadicon*/
    position: relative;
    top: 10px;
    right: 6px;
}
.lataus {/* changes the style of the download text*/
    color: #1D89B8;
    text-decoration:solid;
    border: 2px solid #000;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px;
    font-weight: bold;
    font-size: 40px;
}
.traileri { /* changes the style of the link to the trailer*/
    font-weight: bold;
    text-decoration: none;
    color: white;
}
.background { /* creates the largest box around the contents of the website*/
    width: 85%;
    background-color: #2BA7DD;
    border: 15px solid #ffffff;
    outline: 2px solid #000000;
    border-radius: 60px;
    padding: 70px 30px 40px;
    align-items: center;
    margin: 10px auto;
    text-align: center;
    box-sizing: border-box;
}
.box { /* creates the smaller boxes inside the bigger one*/
    width: 85%;
    background-color: #1D89B8;
    border: 15px solid #ffffff;
    outline: 2px solid #000000;
    border-radius: 60px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;
    text-align: center;
    box-sizing: border-box;
}
.creators { /*helps with adjusting the position of the pictures of the creators*/
    display: flex;
}
.ohjelmoijat { /*helps with adjusting the position of the pictures of the creators*/
    display: flex;
    flex: 40%;
}
.artistit { /*helps with adjusting the position of the pictures of the creators*/
    display: flex;
    flex: 40%;
}
.members { /*helps with adjusting the position of the pictures of the creators*/
    flex: 50%;
    max-width: 40%;
    background-color: #1D89B8;
    border: 15px solid #ffffff;
    outline: 2px solid #000000;
    border-radius: 60px;
    padding: 20px 20px 0px;
    margin: 10px auto;
    box-sizing: border-box;
}

.footer { /*creates tye footer*/
    background: #136e95;
    display: flex;
    height: auto;
    padding: 20px 5px 10px;
    border-top: 2px solid black;
}
.logot {/*adjusts the logos in the footer accordingly*/
    flex: 40%;
    padding: 0px 60px 0px;
}
.Arttii {/* hides the artistit/artists text that is used only when using mobile phone*/
    display: none;
}
.tekijät { /* cnters the texts above the images of the creators*/
    flex: 100%;
    display: flex;
    text-align: center;
}
.tekijät p {
    flex: 50%;
}

.image { /*adjusts the game's logo*/
    display: flex;
    justify-content: center;
    width: auto;
    height: auto;
}

.boxFI { /*hides the finnish translations*/
    display: none;
}
.boxEN{ /*displays the english translations*/
    display: block;
}
.checkbox { /*style changes to the checkbox*/
    position: relative;
    width: 30px;
    cursor: pointer;

}
.checkbox::before{ /*style changes to the checkbox to make it look like a toggle button*/
    position: absolute;
    content: '';
    width: 25px;
    height: 15px;
    background: #C8102E;
    border-radius: 25px;
}
.checkbox:checked::before {  /*style changes to the checkbox to make it look like a toggle button*/
    background: #002F6C;

}
.checkbox::after{  /*style changes to the checkbox to make it look like a toggle button and adding a transition*/
    content: '';
    position: absolute;
    left: 0px;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 25px;
    transition: 0.25s;
    border: 2px solid #C8102E;
    box-sizing: border-box;

}
.checkbox:checked::after{  /*style changes to the checkbox to make it look like a toggle button*/
    left: 12px;
    border: 2px solid #002F6C;


}
.checkbox:checked ~ .background .boxEN { /*when checking the checkbox hides the english translation*/
    display: none;
}
.checkbox:checked ~ .background .boxFI{  /*when checking the checkbox shows the finnish translation*/
    display: block;
}
.checkbox:checked ~ #FIN {   /*when checking the checkbox gives the finnish flag white outline*/
    border-color: white;
}
.checkbox:checked ~ #UK {  /*when checking the checkbox hidesthe english flag's white outline*/
    border: transparent;
}
.checkbox:checked ~ .boxFI { /*when checking the checkbox shows the finnish translation*/
    display: block;
}
.checkbox:checked ~ .boxEN { /*when checking the checkbox hides the english translation*/
    display: none;
}
.checkbox:checked ~ .box .boxFI { /*when checking the checkbox shows the finnish translation*/
    display: block;
}
.checkbox:checked ~ .box .boxEN { /*when checking the checkbox hides the english translation*/
    display: none;
}
@media only screen and (max-width: 1200px) { /* changes the layout of the creator pictures when using mobile phone*/
    .creators {
        flex-direction: column;
    }

    .artists {
        display: none;
    }
    .Arttii {
        display: block;
    }
    .tekijät p {
        flex: 100%;
    }
    .ohjelmoijat {
        flex: 100%;
    }
    .artistit {
        flex: 100%;
    }
    a {
        font-size: 30px;
    }
    #FIN {
        width: 70px;
        height: 44px;
        top: 20px;
    }
    #UK {
        width: 70px;
        height: 44px;
        top: 20px;
        left: -50px;
    }
    .checkbox {
        top: 25px;
        left: -115px;
    }
    .checkbox::before {
        width: 50px;
        height: 30px;
    }
    .checkbox::after {
        width: 26px;
        height: 26px;
        top: 2px;
        left: 2px;
    }
    .checkbox:checked::after {
        left: 22px;
    }
    .boxEN .topbar {
        top: -46px;
    }
    .boxFI .topbar {
        top: -46px;
    }
}