/*
if no mission is selected the current image is invisible
its image is updated by the script
*/
.missionShown {
    opacity: 0;
    pointer-events: none;
    border-radius: 4px;

    width: 100%;
    height: 100%;

    transition: opacity 300ms ease-in-out;
}

/*
if a mission is selected the big shown mission gets the class "visible"
if it is closed its class is removed
*/
.missionShown.visible {
    opacity: 1;
    pointer-events: auto;
}

/*
defines the position of the container
*/
#xMissionContainer {
    position: absolute;
    top: 1%;
    right: 10%;
    z-index: 3;
}

#missionTextContainer {
    position: absolute;
    bottom: 25%;
    width: 100%;
    text-align: center;
}

#passwordContainer {
    position: absolute;
    bottom: 12.5%;
    left: 35%;
}

#passbuttonContainer {
    position: absolute;
    bottom: 12.5%;
    right: 25%;
}

.missionNameContainer {
    position: absolute;
    top: 5%;
    width: 100%;
    text-align: center;
}

.twoNames {
    position: absolute;
    top: 2%;
    width: 100%;
    text-align: center;
}

/*
defines the style of the single elements
*/
#missionShownImg {
    width: 100%;
}

#missionText {
    margin-left: 10%;
    margin-right: 10%;
}

#missionName {
    font-weight: bold;
}

/*
determines the window in which you can write the codes
*/
input[type=text] {

    border: none;
    background-color: transparent;
    
    border-bottom: 0.4vw solid rgb(67, 67, 67);
    width: 2.5em;

    font-family: 'Nova Mono', Courier, monospace;

    /*letter-spacing: 1.25vw;*/

    transition: border-color 200ms;
}

input[type=text]:focus {
    outline: none;
    border-color: black;
}

.redText {
    color: rgb(163, 0, 0);
}

/* 
styles the x-Button
*/
.button{
    cursor: pointer;
}


/*
defines specific widths and font-sizes for the elements for different screen sizes
*/

.closebutton { width: 4.755vw }
.passbutton { width: 4.75vw }
.closebutton:hover { width: 5vw }
.passbutton:hover {width: 4.9vw }
input[type=text] { font-size: 3.5vw; }
#missionText {font-size: 2vw;}
#missionName {font-size: 2.2vw;}

@media only screen and (min-width: 900px) and (min-device-width: 900px) {
    .closebutton { width: 3vw }
    .passbutton { width: 3vw }
    .closebutton:hover { width: 3.5vw}
    .passbutton:hover {width: 3.2vw }
    input[type=text] { font-size: 3vw; }
    #missionText {font-size: 1.5vw;}
    #missionName {font-size: 1.6vw;}
}