@charset "utf-8";
/*
Author:		Genc Nimoni @ Nimoni GmbH
Author URL:	https://www.nimoni.ch/
License:	Copyright by Nimoni GmbH
Version:	1.0
Date:		11.02.2021
File:		style.css
Title:		Style-File
*/

/* Fonts von Google */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;600&family=DM+Serif+Display&display=swap');
@import url('https://use.fontawesome.com/releases/v5.15.1/css/all.css');
@font-face {
    font-family: 'Old English Five';
    src:  url('/styles/fonts/font.ttf') format('truetype');
}


/* Style-Variablen */
:root{
    font-size: 100px;
    --color-white: #FFF;
    --color-black: #000;
    --color-grey: #393939;
    --color-header: #BA8AB0;
}

/* Allgemeine Styles */
*{
    margin: 0px;
    padding: 0px;
	font-family: 'Noto Sans JP', Arial, sans-serif;
}

html, body{
    background-color: var(--color-header);
    box-sizing: border-box;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-size: .18rem;
}

/***************************************************************/

.selfline{
    position: relative;
    top: 50%;  
    width: 10em;
    margin: 0 auto;
    border-right: 2px solid #ffffffbf;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

/* Animation */
.anim-typewriter{
    animation: typewriter 2s steps(14) 1s 1 normal both,
    blinkTextCursor 600ms steps(24) infinite normal;
}
@keyframes typewriter{
  from{ width: 0; }
  to{ width: 10em; }
}
@keyframes blinkTextCursor{
  from{ border-right-color: #ffffffbf; }
  to{ border-right-color: transparent; }
}

/***************************************************************/


h1{
    color: var(--color-white);
    font-size: .5rem;
    text-align: center;
    font-family: 'Old English Five';
}

li.footer-title{
    margin-right: .1rem;
    text-transform: uppercase;
    font-size: .18rem;
    text-align: center;
    font-weight: bold;
    align-items: center;
    display: flex;
}

small{
    text-align: center;
}

ul{
    list-style: none;
    display: flex; 
}

li{
    font-size: 35px;
}

i{
    padding: 5px;
}



/* Logo */
a.logo{
    background-image: url("images/logos/GGGames_Logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 300px;
    height: 70px;
    margin-right: 40px;
    margin-left: 10px;
}


/* Main */
main {
    padding: 5% 5% 5% 5%;
    flex: 1;
    height: 1vh;
    color: var(--color-black);
}


/* Footer */
footer{
    font-size: 0.18rem;
    color: var(--color-white);
    background:var(--color-black);
}

div.footer-grid{
    margin: 0;
    width: 100%;
    display: table;
    table-layout: fixed;
    list-style: none;
}


div.footer-grid-left{
    padding: 20px 0 20px 5%;
    width: 100%;
    float: none;
    display: table-cell;
    vertical-align: middle;
}

div.footer-grid-right{
    padding: 20px 0 20px 5%;
    width: 100%;
    float: none;
    display: table-cell;
    vertical-align: middle;
    text-align: right !important;
    flex-basis: auto !important;
}

a.link{
    color: var(--color-white);
    list-style: none;
    text-decoration: none;
}

a.link:hover{
    color: var(--color-header);
    transition-duration: 0.3s;
}


/* Responsive-Style: Zwischengrösse 550px */
@media screen and (max-width: 550px) {
    
    /* Allgemeine Styles */
    main{
        margin-bottom: 300px;
        padding: 5% 5% 5% 5%;
        height: 200px;
    }


    h1{
        font-size: .3rem;
    }

    div.footer-text{
        text-align: center;
    }

    div.footer-grid{
        display: flex;
        flex-direction: column;
        padding: 10px 0 10px 0;
    }

    div.footer-grid-left{
        padding: 0;
    }
    
    div.footer-grid-right{
        margin-top: 20px;
        padding: 0;
    }


}