/*
  Project: PublishBook.Link Redirection Service
  Author: LoginSecure UG
  Date: 09-11-2023
  Description: Styling of the redirection service pages from Qubli Link Services setup for PublishBook.Link

  All rights reserved.

  Redistribution and use in source and binary forms, with or without
  modification, are not permitted without the express permission of
  LoginSecure UG.

  For licensing inquiries, please contact:
  info@loginsecure.eu
*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-size: 400% 400%;
    background: white;
}

.container {
    text-align: center;
    width: 80%;
    max-width: 600px;
}

.result {
    margin-top: 20px;
    padding: 0px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #f7f7fc;
    padding: 10px;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #00b9e5 20%, #38d430 20%, #38d430 40%, #e3e82b 40%, #e3e82b 60%, #ffab4d 60%, #ffab4d 80%, #ef2bc1 80%, #ef2bc1 100%);
    border-image-slice: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header img {
    max-width: 100px;
    height: auto;
}

.header span {
    font-size: 12px;
    text-align: right;
}

.result-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 30px;
    gap: 30px;
}

.result-container p {
    font-weight: bold;
}

.result-container .loading {
    width: 64px;
} 

.footer {
    background-color: #fff;
    padding: 10px;
    margin-top: 0px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer p {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin: 5px;
}

.footer a {
    color: #666; 
    text-decoration: none; 
}


body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/publishbooklink_logo_symbol_v1.0.png') repeat;
    background-size: 10%;
    background-repeat: round;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: -1;
}

@media (min-width: 0px) and (max-width: 768px) {
    .result-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        gap: 0px;
    }
}