/*
    ##Device = Most smartphones, tablets, ipads
    ##Screen = B/w 320px to 1024px

*/
@media (min-width: 320px) and (max-width: 1024px) {

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

    .content {
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
        padding-left: 25px;
        padding-right: 25px;
    }
    a {
        text-decoration: none;
        color: black;
    }
    body {
        font-family: 'Montserrat', sans-serif;
    }

    h1 {
        font-size: 40px;
        color: #2c4474;;
    }

    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }
    
    .select-selected {
        background-color: white;
        padding: 15px 90px 15px 90px;
         /* border-radius */
        border-radius: 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
        text-align: center;
        cursor: pointer;
        user-select: none;
        color: black;
    }
    .select-selected:hover {
        background-color:  #2c4474;
        border-bottom-left-radius: 0px 0px;
        border-bottom-right-radius: 0px 0px;
        color: white;
    }
    /*style the items (options), including the selected item:*/
    .select-items div{
            color: white;
            padding: 8px 16px;
            cursor: pointer;
            user-select: none;
        }

    /*style items (options):*/
    .select-items {
        position: absolute;
        background-color:  #2c4474;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        /* border-radius */
        border-bottom-left-radius: 10px 10px;
        border-bottom-right-radius: 10px 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
    }
    /*hide the items when the select box is closed:*/
    .select-hide {
        display: none;
    }

   
    /*the container must be positioned relative:*/
    .custom-select {
        position: relative;
        font-family: Arial;
    }
    .select-items div:hover, .same-as-selected {
        background-color: rgba(0, 0, 0, 0.1);
    }
    .second, .third, .forth {
        margin-top: 10%;
    }
    p {
        font-size: 25px;
        margin-top: 1rem;
    }
    .hostel-name {
        background-color: white;
        padding: 15px 90px 15px 90px;
        /* border-radius */
        border-radius: 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
        
    }
    .hostel-class {
        border: none;
        outline: none;
    }
    input[type=submit] {
        background-color: #2c4474;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 16px 52px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }
   .footer {
        background-color: white;
        text-align: center;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        color: black;
        padding-bottom: 10px;
   }
   .p-footer {
       font-size: 15px;
       display: inline-block;
   }
   .box {
        background-color: white;
        padding: 10px 80px 10px 90px;
        /* border-radius */
        border-radius: 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
        margin-top: 10%;
   }
   button {
        background-color: #2c4474;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 12px 22px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
   }
   .joinchat {
        display: none;
        background-color: white;
        padding: 15px 100px 15px 100px;
        /* border-radius */
        border-radius: 10px;
        border: black solid 1px;
        /* box-shadow */
        z-index: 9;
        position: fixed;
        width: 100%;
        height: 200px;
        top: 50%;
        margin-top: -100px; 
        margin-left: 20px; 
        text-align: center;
   }
    /* The Modal (background) */
    .modal {
        display: none;
        position: fixed; 
        z-index: 1; 
        padding-top: 100px; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background: hsla(0, 0%, 100%, .3);
    }
    .modal.active{
        display: block;
    }

    /* Modal Content */
        .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        border-radius: 10px;
        border: black solid 1px;   
    }

    /* The Close Button */
        .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .join {
        background-color: #2c4474;
        border-radius: 12px;
        border: none;
        width: 100%;
        color: white;
        padding: 12px 22px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }
}


@media (min-width: 1025px) {
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

    .content {
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
        padding-left: 25px;
        padding-right: 25px;
    }
    a {
        text-decoration: none;
        color: black;
    }
    body {
        font-family: 'Montserrat', sans-serif;
    }

    h1 {
        font-size: 40px;
        color: #2c4474;;
    }

    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }
    
    .select-selected {
        background-color: white;
        padding: 15px 90px 15px 90px;
         /* border-radius */
        border-radius: 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
        text-align: center;
        cursor: pointer;
        user-select: none;
        color: black;
    }
    .select-selected:hover {
        background-color:  #2c4474;
        border-bottom-left-radius: 0px 0px;
        border-bottom-right-radius: 0px 0px;
        color: white;
    }
    /*style the items (options), including the selected item:*/
    .select-items div{
            color: white;
            padding: 8px 16px;
            cursor: pointer;
            user-select: none;
        }

    /*style items (options):*/
    .select-items {
        position: absolute;
        background-color:  #2c4474;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        /* border-radius */
        border-bottom-left-radius: 10px 10px;
        border-bottom-right-radius: 10px 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
    }
    /*hide the items when the select box is closed:*/
    .select-hide {
        display: none;
    }

   
    /*the container must be positioned relative:*/
    .custom-select {
        position: relative;
        font-family: Arial;
    }
    .select-items div:hover, .same-as-selected {
        background-color: rgba(0, 0, 0, 0.1);
    }
    .second, .third, .forth {
        margin-top: 10%;
    }
    p {
        font-size: 25px;
        margin-top: 10%;
    }
    .hostel-name {
        background-color: white;
        padding: 15px 90px 15px 90px;
        /* border-radius */
        border-radius: 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
        
    }
    .hostel-class {
        border: none;
        outline: none;
    }
    input[type=submit] {
        background-color: #2c4474;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 16px 52px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }
   .footer {
        background-color: white;
        text-align: center;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        color: black;
        padding-bottom: 10px;
   }
   .p-footer {
       font-size: 15px;
       display: inline-block;
       margin-top: 1rem;
   }
   .box {
        background-color: white;
        padding: 10px 80px 10px 90px;
        /* border-radius */
        border-radius: 10px;
        border: #DCDCDC solid 1px;
        /* box-shadow */
        -moz-box-shadow: -1px 2px 8px -2px #888;
        -webkit-box-shadow: -1px 2px 8px -2px #888;
        box-shadow: -1px 2px 8px -2px #888;
        margin-top: 10%;
   }
   button {
        background-color: #2c4474;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 12px 22px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
   }
   .joinchat {
        display: none;
        background-color: white;
        padding: 15px 100px 15px 100px;
        /* border-radius */
        border-radius: 10px;
        border: black solid 1px;
        /* box-shadow */
        z-index: 9;
        position: fixed;
        width: 100%;
        height: 200px;
        top: 50%;
        margin-top: -100px; 
        margin-left: 20px; 
        text-align: center;
   }
    /* The Modal (background) */
    .modal {
        display: none;
        position: fixed; 
        z-index: 1; 
        padding-top: 100px; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background: hsla(0, 0%, 100%, .3);
    }
    .modal.active{
        display: block;
    }

    /* Modal Content */
        .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        border-radius: 10px;
        border: black solid 1px;   
    }

    /* The Close Button */
        .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .join {
        background-color: #2c4474;
        border-radius: 12px;
        border: none;
        width: 100%;
        color: white;
        padding: 12px 22px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }
}