@font-face {
    font-family: 'nunitoregular';
    src: url('fonts/nunito-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nunitosemibold';
    src: url('fonts/nunito-semibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nunitobold';
    src: url('fonts/nunito-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@keyframes moveGradient {
    50% {
        background-position: 100% 50%;
    }
}
@keyframes spinner {
    to {transform: rotate(360deg);}
}

* {
    --text-color: #797B7D;
    --background-color: #232528;
    --box-border-radius: 10px;
    --green: #61CA58;
    --red: #f47c36;
    --white: #FFFFFF;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'nunitosemibold', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 26px;
    line-height: 150%;
}
body {
    padding: 0px;
}

.hidden {
    display: none !important;
}

.logo {
    height: 50px;
    top: 78px;
    left: auto;
    right: 80px;
    position: fixed;
}
h1 {
    text-align: center;
    font-size: 44px;
    font-family: 'nunitosemibold', sans-serif;
    margin-top: 80px;
}

#app {
    column-count: 2;
    column-gap: 200px;
    margin: 80px;
}

#startcontainer {
    position: fixed;
    width: calc(50vw - 200px)
}
#start {
    --start-border-width: 3px;
    --start-border-radius: 20px;
    width: 300px;
    height: 100px;
    margin: 25px auto;
    color: var(--text-color);
    text-align: center;
    font-size: 44px;
    line-height: 100px;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    border-radius: 20px;
    background-color: #4E5053;
    color: var(--white)
}
#start::after {
    position: absolute;
    content: '';
    top: calc(-1 * var(--start-border-width));
    left: calc(-1 * var(--start-border-width));
    z-index: -1;
    width: calc(100% + var(--start-border-width) * 2);
    height: calc(100% + var(--start-border-width) * 2);
    background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
    background: linear-gradient(60deg, #20b7c8, #0882a9, #f9b040, #ed6e37);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: 23px;
    animation: moveGradient 4s alternate infinite;
    transition: all .2s ease-in-out;
}
#start:hover::after {
    top: calc(-2 * var(--start-border-width));
    left: calc(-2 * var(--start-border-width));
    z-index: -1;
    width: calc(100% + var(--start-border-width) * 4);
    height: calc(100% + var(--start-border-width) * 4);
    border-radius: 26px;
}
#instructions {
    padding: 155px 0px 0;
    break-inside: avoid;
    text-align: center;
}
#services {
    break-inside: avoid;
}
.subtitle {
    text-transform: uppercase;
    font-family: 'nunitosemibold';
    padding-left: 20px;
}
.testbox {
    width: calc(100% - 52px);
    background-color: #38393D;
    text-align: left;
    border-radius: var(--box-border-radius);
    padding: 13px 26px;
    margin-top: 15px;
    color: var(--white);
    position: relative;
    overflow: hidden;
    font-size: 36px;
}
.testbox .green {
    color: var(--green);
}
.testbox .red {
    color: var(--red);
}
.testbox .status {
    float: right;
}
.testbox .status .text {
    display: inline-block;
    margin-right: 10px;
    font-size: 22px;
    line-height: 22px;
}

.testbox .status .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 32px;
    line-height: 32px;
    right: 20px;

    font-family: 'Icons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
}
.testbox .icon.waiting:before {
    content: "\e165";
    opacity: 0;
}
.testbox .icon.running {
    animation: spinner 1.0s linear infinite;
    -webkit-animation: spinner 1.0s linear infinite;
}
.testbox .icon.running:before {
    content: "\e701";
}
.testbox .icon.skipping:before {
    content: "\e024";
}
.testbox .icon.success:before {
    content: "\f574";
}
.testbox .icon.error:before {
    content: "\f591";
}

.actions {
    column-count: 2;
    column-gap: 80px;
    margin: 40px 70px 0;
}
.actions .instructions {
    text-align: left;
}
.links {
    text-align: center;
}
.links a, .links a:hover, .links a:active, .links a:visited {
    color: var(--text-color);
    font-size: 20px;
    text-decoration: none;
}
a.do-install {
    margin-top: 15px;
    display: block;
    background-color: #5FABC7;
    text-decoration: none;
    padding: 13px 10px;
    color: var(--white);
    border-radius: var(--box-border-radius);
    transition: all .25s ease-in-out;
    text-align: center;
    transition-duration: 100ms;
    font-size: 36px;
}
a.do-install:hover {
    transition-duration: 100ms;
    background-color: var(--white);
    color: var(--text-color);
}
@media only screen and (max-width: 1440px) {
    body {
        zoom: .8;
    }
}
@media only screen and (max-width: 1024px) {
    body {
        zoom: .7;
    }
}
@media only screen and (max-width: 600px) {
    body {
        font-size: 20px;
        transform: scale(1)
    }
    .logo {
        height: 50px;
        top: -70px;
        left: auto;
        right: 10px;
        position: fixed;
    }
    h1 {
        font-size: 36px;
        line-height: 40px;
    }
    #app {
        column-count: 1;
        column-gap: 0px;
        margin: 10px;
    }
    #startcontainer {
        position: absolute;
        width: calc(100% - 20px);
    }
    #start {
        width: 100%;
        margin: 10px 0px;
    }
    .actions {
        column-count: 1;
        column-gap: 0px;
        margin: 30px 10px;
    }
    .actions .instructions {
        margin-top: 10px;
    }
}