@charset "UTF-8";
/* CSS Document */

:root{font-size: 1px;}

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    
    background-color: #008cff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

p{
    margin-block-start: 0;
    margin-block-end: 0;
    magin-inline-start: 0;
    magin-inline-end: 0;
}

@font-face {
  font-family: 'Gyro Variable';
  src: url('Gyro_Variable.ttf') format('truetype');
}

@font-face {
  font-family: 'G Raublau Slab';
  src: url('G_Raublau_Slab.woff') format('woff');
}

#mobile_device{
    opacity: 1;
    visibility: visible;
    z-index: 10;
    overflow: hidden;
}

.main{
    font-family: 'Gyro Variable', sans-serif;
    font-variation-settings: "wght" 40, "wdth" var(--weight);
    font-size: 40vh;
    width: 90vw;
    margin: 5vh 5vw 0 5vw;
    top: 0;
    display: inline-block;
    text-align: center;
}

#um{
    color: #c8e6ff;
}

#dois{
    color: #64c8ff;
}

#tres{
    color: #28b4ff;
}

.signature{
    font-family: 'G Raublau Slab', sans-serif;
    font-weight: lighter;
    color: #FFFFFF;
    position: absolute;
    font-size: 9vh;
    width: 90vw;
    margin: 0 5vw 0 5vw;
    bottom: 15vh;
    text-align: center;
}

#signature_one, #signature_two, #icon{
    opacity: 0;
}

#icon{
    width: 60vw;
    margin: 0 20vw 0 20vw;
    position: absolute;
    bottom: -9vh;
}

#not_mobile_device{
    position: absolute;
    top: 15vh;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    z-index: -10;
    overflow: hidden;
}

#not_mobile_device h2{
    font-family: 'G Raublau Slab', sans-serif;
    font-weight: lighter;
    font-size: 9vh;
    width: 85vh;
    margin: 5vh auto 5vh auto;
    color: #FFFFFF;
    text-align: center;
}

@media (max-width: 600px){ /* SMARTPHONE */
    
    #not_mobile_device{
        top: 30vh;
    }
    
    #not_mobile_device h2{
        width: 45vh;
        margin: 2vh auto 2vh auto;
        font-size: 5vh;
    }
    
}