@media screen and (min-width: 1000px) and (max-width: 1746px) {
    .main {
        background-color: #404040;
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
    }

    .header {
        display: flex;
        position: relative;
        padding: 1rem;
        margin: 1%;
        border-radius: 15px;
        background-color: #101010;
        width: 98%;
        align-items: center;
        justify-content: flex-start;
    }

    .login {
        position: absolute;
        right: 1%;
    }

    .login a {
        text-decoration: none;
        font-size: 2vh;
        color: white;
    }

    .login a:hover {
        text-decoration: none;
        color: #606060;
    }

    .headline {
        z-index: 0;
        color: #acdeff;
        font-size: 500%;
        text-decoration: none;
        position: relative;
        margin: auto;
    }


    .content {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .links {
        width: 96vw;
        margin: 2vw;
        padding-bottom: 2vw;
        border: solid 5px;
        font-size: 4vh;
    }

    .link {
        padding-left: 1vw;
        padding-top: 1vw;
        padding-right: 1vw;
        position: relative;
    }

    .link a {
        font-size: 3vh;
        text-decoration: none;
        color: #AAA;
    }

    .link .remove {
        position: absolute;
        right: 1vw;
        font-size: 3vh;
        text-decoration: none;
        justify-self: end;
        background: #AAA;
        color: black;
        padding-right: 0.5vw;
        padding-left: 0.5vw;
        border-radius: 10px;
    }

    .link .remove:focus {
        background: white;
    }

    .addLink {
        padding-left: 1vw;
        padding-top: 1vw;
    }

    .addLink input {
        font-size: 3vh;
        padding-left: 1vw;
        padding-right: 1vw;


        border: 0;
        border-radius: 10px;
        background: #AAA;
        outline: none;
    }

    .addLink input:focus {
        background: white;
    }

    .drive {
        width: 96vw;
        margin: 2vw;
        border: solid 5px;
        padding-bottom: 1vw;
    }

    .addFile {
        padding-left: 1vw;
        padding-top: 1vw;
    }

    .addFile form {
        display: flex;
        flex-direction: row;
    }

    .addFile input[type="submit"] {
        background-color: #4caf50;
        margin-left: 1vw;
        padding-right: 1vw;
        padding-left: 1vw;
        color: #fff;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 1.5rem;
    }

    .addFile input[type="file"] {
        display: none;
    }

    .customFile {
        display: inline-block;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vh;

        text-align: center; /*Center the test inside the label*/
        line-height: 130%;

        cursor: pointer;
        border: 0;
        border-radius: 10px;
        background: #AAA;
        outline: none;
    }

    .file {
        display: flex;
        flex-direction: column;

        text-align: left;

        font-size: 3vh;
        margin: 1vw 1vw 0 1vw;
        padding-left: 1vw;
        border: solid 5px;
        border-radius: 10px;
    }

    .file span {
        color: white;
    }

    .fileDisplay {
        padding: 0 1vw 0 1vw;
        margin: 0.5vh 1vw 0.5ch 0;
    }

    .file div {
        display: flex;
        flex-direction: row;
    }

    .file #download {
        margin-right: 1.5vw;
        border-radius: 20px;

        text-decoration: none;
        color: black;

        background: gray;
    }

    .file #remove {

        border-radius: 20px;

        text-decoration: none;
        color: black;

        font-weight: bold;

        background: #cc0d0d;
    }

    .chat {
        display: flex;
        flex-direction: column;
        margin: 2vw;
        border: solid 5px;
        padding-bottom: 2vw;
    }

    .message {
        display: flex;
        position: relative;
        flex-direction: row;

        text-align: center;
        line-height: 150%;

        font-size: 2rem;
        margin: 1vw 0 0 1vw;
        border: solid 5px;
        border-radius: 10px;
    }

    .message span {
        color: white;
        width: 70vw;
        margin: 0.3vw;
        text-align: start;
    }

    .history {
        padding: 0 1vw 0 1vw;
        margin: 0.5vh 1vw 0.5ch 0;
    }

    .message div {
        position: absolute;
        right: 1vw;
        display: flex;
        flex-direction: row;
    }

    .message #copyText {
        margin-right: 2vw;
        border-radius: 20px;
        text-decoration: none;
        color: black;
        height: 2rem;
        align-self: center;
        background: gray;
    }
    .message #copyText:hover {
        background: white;
    }

    .message #remove {
        border-radius: 20px;
        text-decoration: none;
        color: black;
        height: 3rem;
        font-weight: bold;
        background: #cc0d0d;
    }

    .message #remove:hover {
        background: #cc8989;
    }

    .chat form {
        margin: 1vh 0 0 1vw;
        display: flex;
        flex-direction: row;
    }

    .chat input {
        height: 2.5rem;
        font-size: 1.5rem;
        padding-left: 1vw;
        padding-right: 1vw;


        border: 0;
        border-radius: 10px;
        background: #AAA;
        outline: none;
    }
    .chat input[type="text"] {
        width: 70vw;
        margin-right: 1vw;
    }

    .chat input:focus {
        background: white;
    }

    .footer {
        background-color: #202020;
        width: 100%;
        display: grid;
        padding-bottom: 1vh;
    }

    .footerContent {
        padding-top: 0.5vh;
        padding-left: 2vw;
        align-self: center;
        text-decoration: none;
        color: white;
    }
}