body, * {
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: white;
}

.italic {
    font-style: italic;
}

.button {
    cursor: pointer;
}

body {
    width: 100vw;
    height: 100vh;
    background-image: url('./img/background_pc.jpg');
    background-size: 100%;
    background-position-x: center;
    background-position-y: center;
    font-family: Roboto;
    font-style: normal;
}

body::after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100vw;
    height: 120vh;
    z-index: -1;
    background: linear-gradient(180deg, rgba(66, 83, 239, 0.4) 0%, rgba(50, 181, 47, 0.116) 100%);
}

.loading-box {
    background-color: white;
    height: 100vh;
    width: 100vw;
    position: absolute;
    z-index: 2;
}

.loading-box::after {
    position: absolute;
    top: 0;
    content: " ";
    height: 100vh;
    width: 100vw;
    z-index: -1;
    background: linear-gradient(177.16deg, rgba(66, 83, 239, 0.6) 2.37%, rgba(50, 181, 47, 0.216) 75.79%);
}

.loading-box h1 {
    position: relative;
    top: 40%;
    font-style: italic;
    font-weight: bolder;
    font-size: 12vh;
    text-align: center;
    background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
    background-size: 200% auto;
    
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: -20% center;
    
}

.loading-box p {
    position: relative;
    top: 40%;
    font-style: italic;
    text-align: center;
}

.block {
    width: 100%;
    height: 50vh;
}


.top-header .block {
    position: relative;
    top: 38%;
    text-align: center;
}

.top-header .block .content .head-title h1 {
    font-size: 10vh;
    text-shadow: 0px 4px 32px rgba(0, 0, 0, 0.25);
    transform: translateY(-500%);
}

.top-header .block .content .subtitle {
    font-size: 3vh;
    font-style: italic;
    text-shadow: 0px 4px 32px rgba(0, 0, 0, 0.25);
    transform: translateY(-600%);
}

.top-header .block .primary-button {
    position: relative;
    left: 50%;
    margin-top: 2%;
    width: 20%;
    height: 15%;
    background-color: #FF4000;
    border-radius: 2vw;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, 600%);
}

.primary-button:hover p{
    text-decoration: underline;
    font-weight: 600;
}

.bottom-header .buttons-block{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* align horizontal */
}

.bottom-header .buttons-block .secondary-button{
    position: relative;
    top: 80%;
    height: 13.5%;
    width: 8%;
    background-color: #F8FA90;
    display: inline-block;
    border-radius: 1.2vw;
    margin: 0 0.5%;
    box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.25);
    transform: translateY(600%);
}

.bottom-header .secondary-button p {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3vh;
}

.bottom-header i {
    color: #FF4000;
    opacity: 0.7;
}

.bottom-header .primary-button {
    display: none;
}

@media screen and (orientation:portrait){
    body {
        background-size: auto 100% !important;
        background-image: url('./img/background.jpg') !important;
    }

    .top-header .block .primary-button {
        display: none;
    }

    .top-header .block .content .head-title h1 {
        font-size: 9vh;
    }

    .bottom-header .primary-button {
        position: absolute;
        bottom: 40%;
        width: 64%;
        height: 7%;
        background-color: #FF4000;
        border-radius: 8vw;
        text-align: center;
        display: flex;
        justify-content: center; /* align horizontal */
        align-items: center; /* align vertical */
    }

    .bottom-header .buttons-block .secondary-button{
        margin: 0 2%;
        width: 30%;
        background-color: #F8FA90;
        border-radius: 5vw;
    }
}