:root{

    --colLight: #ffffff;
    --colLightRGB: 255,255,255;

    --colDark: #000000;
    --colDarkRGB: 0,0,0;

    --colBg: #455a64;
    --colBgRGB: 69, 90, 100;

    --colBgdark: #343c46;
    --colBgRGB: 69, 90, 100;

    --colMain: #5ef919;
    --colMainRGB: 94,249,25;

    --colAccent: #f97d28;
    --colAccentRGB: 249,125,40;

}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:middle;
    background:transparent;
}

html{
    background-color: var(--colBgdark);
}

body{
    margin: 0;
    font-family: "Rubik";
}

#bg{
    width: 100vw;
    height: 100vh;
    background-image: url(pat.png);
    background-repeat: repeat;;
    opacity: .12;
}

#all{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px;
    margin: 0;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}

#top-box{
    top:21px;
    opacity: .3;
}

.piclogo{
    object-fit: contain;
    height: 50vmin;
    width: 50vmin;
}

.pictxt{
    object-fit: contain;
    height: 25vmin;
    width: 25vmin;
}

#soon{
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.box{
    display: flex;
    position: fixed;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    opacity: .7;
    transition: .7s;
    bottom: 70px;
    width: 100vw;
}

.box:hover{
    opacity: 1;
    transition: .3s;
}

#mail{
    cursor: pointer;
    object-fit: contain;
    height: 30px;
    transition: .3s;
    order: 1;
}

#mail:hover{
    transform: scale(1.2);
    transition: .3s;
}

#qr{
    height: 120px;
    width: 120px;
    transition: .3s;
    order: 2;
    padding-left: 70px;
    padding-bottom: 0px;
}

#qr:hover{
    transform: scale(1.3);
    transition: .3s;
}

#icp {
    position: fixed;
    width: 100%;
    text-align: center;
    bottom:0;
  }

  #icp a {
    color:orange;
    margin: auto;
  }

  #icp a:link {
    text-decoration: none;
  }

@font-face {
    font-family: 'Rubik';
    src: url('./fonts/rubik/rubik-v8-latin-300.woff2');
    src: url('./fonts/rubik/rubik-v8-latin-300.woff2') format('woff2'),
    url('./fonts/rubik/rubik-v8-latin-300.woff') format('woff'),
    url('./fonts/rubik/rubik-v8-latin-300.eot') format('embedded-opentype'),
    url('./fonts/rubik/rubik-v8-latin-300.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik';
    src: url('./fonts/rubik/rubik-v8-latin-700.woff2');
    src: url('./fonts/rubik/rubik-v8-latin-700.woff2') format('woff2'),
    url('./fonts/rubik/rubik-v8-latin-700.woff') format('woff'),
    url('./fonts/rubik/rubik-v8-latin-700.eot') format('embedded-opentype'),
    url('./fonts/rubik/rubik-v8-latin-700.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@media screen and (max-width: 1225px) {



}

@media screen and (max-width: 600px) {

    .box{
        flex-direction: column;
    }
    
    #mail{
        cursor: pointer;
        object-fit: contain;
        height: 20px;
        transition: .3s;
        order: 2;
    }
    
    #qr{
        height: 120px;
        width: 120px;
        order: 1;
        padding-left: 0px;
        padding-bottom: 25px;
    }

    .piclogo{
        height: 70vmin;
        width: 70vmin;
        transform: translateY(-170px);
    }

}