/*layout.css------------------*/
/* comment out section vvvvv ---


/*----------------------------*/
/*{outline: 2px dotted black;}
/*----------------------------*/
html, body {
    margin: auto;
}
html {
    min-height: 100vh;
    width: 100%;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    min-width:300px;
    max-width:1500px;
    overflow-x: hidden;
    margin:auto;
}
/*----------------------------*/
header p {
    text-align: center;
    color: rgb(216, 216, 216);
    margin:5px 0 0 0;
    padding:0;
}
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55vh;
    width: 90%;
    border-radius:5px;
    margin:20px 0 20px 0;
    background: #01012a url('../images/background5.jpg') no-repeat center center;     
    background-size: cover; 
    outline:5px solid black; 
}
.menu {
    height:auto;
    width:85%;
    border-radius:2px;
    outline:5px solid rgb(128, 128, 128);
    padding:10px;
}
.menu form {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.menu-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.menu-columns fieldset {
    flex: 1 1 45%;
    min-width: 200px;
    box-sizing: border-box;
}
footer {
    height:auto;
    width:100%;
}
footer p {
    text-align: center;
    color: rgba(164, 164, 164, 0.467);
}
/*----------------------------*/
/*device*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 30%;
    resize: both;
    overflow: auto;
    max-height:100%;
    min-height:200px;
    min-width:185px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;   
}
/*screen*/
.screen {
    display: flex;
    /*menu option*/
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content:stretch;
    /*---*/
    height: 84%;
    width: 92%;
    padding: 2%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;   
}








/*----------------------------*/

/*---SMALLER THAN-------------------
@media screen and (max-width:600px){

}
/*---IN BETWEEN----------------------
@media screen and (min-width:601px) and (max-width:1024px){

}
/*---BIGGER THAN----------------------
@media screen and (min-width:1025px){

}
*/