/* HiberHub's main.css */
/* Under GPL-3.0 */

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden /* To prevent scrolling on iphones */
}

.bottom {
    text-decoration: none;
    color: grey;
    position: absolute;
    bottom: 0;
    left: 5px;
    font-size: small;
}

.left {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
    background: linear-gradient(to bottom right, #E45686, #9642E9);
}

@media (prefers-color-scheme: dark) {
    .left {
        background: linear-gradient(to bottom right, #272727, #3f3f3f);
    }
}

@media (min-width: 768px){
    .hiberfile-logo {
       background-image: url("../img/hiberfile.png");
       background-size: 25%;
       background-repeat: no-repeat;
       background-position: center;
       height: 100%;
       width: 100%;
    }
}

@media (max-width: 768px){
    .hiberfile-logo {
       background-image: url("../img/hiberfile.png");
       background-size: 55%;
       background-repeat: no-repeat;
       background-position: center;
       height: 100%;
       width: 100%;
    }
}

.right{
    position: relative;
    float: right;
    width: 50%;
    height: 100%;
    background: linear-gradient(to bottom right, #32B1D8, #3156D8);
}

@media (min-width: 768px){
    .hiberlink-logo {
       background-image: url("../img/hiberlink.png");
       background-size: 25%;
       background-repeat: no-repeat;
       background-position: center;
       height: 100%;
       width: 100%;
    }
}

@media (max-width: 768px){
    .hiberlink-logo {
       background-image: url("../img/hiberlink.png");
       background-size: 55%;
       background-repeat: no-repeat;
       background-position: center;
       height: 100%;
       width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    .right {
        background: linear-gradient(to bottom right, #101010,  #272727);
    }
    .hiberlink-logo {
        background-image: url("../img/hiberlink-dark.png");
    }
}

.copyleft {
    display: inline-block;
    transform: rotate(180deg);
}

.center {
    text-align: center;
}

body {
    font-family: "Open Sans", sans-serif;
}


/* Fonts */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
}