@import url("../../css/global.css");
@import url("../../css/animation.css");
@import url("../../css/input.css");

body {
    background: #070707;
}

.container {
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 56vw;
}

.header {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
    align-items: center;
}

.icon {
    height: 7vw;
    width: 7vw;
}

.title {
    display: flex;
    height: fit-content;
    width: fit-content;
    margin: 1vw 0 0 0;
    font-size: 2vw;
    font-weight: 600;
}

.red {
    color: red;
}

.white {
    color: white;
}

.version {
    display: flex;
    height: fit-content;
    width: fit-content;
    margin: 0.25vw 0 0 0;
    font-size: 1.2vw;
    color: darkgray;
}

.updates {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
    margin: 2vw 0 0 0;
    align-items: center;
}

.update {
    display: flex;
    height: fit-content;
    width: fit-content;
    margin: 0.25vw 0;
    color: white;
    font-size: 1.1vw;
    text-align: center;
}

.bottom {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
    margin: 1vw 0 0 0;
    align-items: center;
}

.bottom .text {
    display: flex;
    height: fit-content;
    width: fit-content;
    color: darkgray;
    font-size: 1vw;
}

.bottom .text a {
    margin: 0 0.4vw;
    color: red;
    transition: all 0.2s ease-in-out;
}

@media only screen and (min-width: 801px) {
    .bottom .text a:hover {
        opacity: 0.7;
    }
}

@media only screen and (max-width: 801px) {
    .bottom .text a:active {
        opacity: 0.7;
    }
}

@media only screen and (max-width: 1000px) {
    .version {
        font-size: 1.5vw;
    }
        
    .update {
        font-size: 1.2vw;
    }
    
    .bottom .text {
        font-size: 1.1vw;
    }

}

@media only screen and (max-width: 800px) {
    .icon {
        height: 10vw;
        width: 10vw;
    }
    
    .title {
        font-size: 3vw;
    }

    .version {
        font-size: 2vw;
    }

    .update {
        font-size: 2.5vw;
    }
    
    .bottom {
        margin: 1vw 0 0 0;
    }
    
    .bottom .text {
        font-size: 1.7vw;
    }

    .bottom .text a {
        margin: 0 0.5vw;
    }
}

@media only screen and (max-width: 600px) {
    .wrapper {
        width: 80vw;
    }

    .icon {
        height: 15vw;
        width: 15vw;
    }
    
    .title {
        font-size: 4vw;
    }

    .version {
        font-size: 3vw;
    }

    .update {
        font-size: 3.5vw;
        margin: 1.25vw 0;
    }
    
    .bottom {
        margin: 2vw 0 0 0;
    }
    
    .bottom .text {
        font-size: 3vw;
    }

    .bottom .text a {
        margin: 0 1vw;
    }
}