@font-face {
    font-family: "Agustina";
    src: url("../webfonts/Agutina 400.otf");
}


/* Default */
html {
    background-color: #171c28;
    color: #f3f3f4;
    scroll-behavior: smooth;
}
body {
    user-select: none;-moz-user-select: none; -webkit-user-select: none;-ms-user-select: none;
    width: calc(100vw - 25px);
    text-align: center; 
    overflow-x: hidden;
}
a {
    color:inherit;
    text-decoration: none;
}



/* Seiten Container */
#container {
    position: relative;
    max-width: 1500px;
    margin: 0px auto;
    padding: 0;
    /* border: 1px solid grey; */
}


/* Welcome Page */
h1 {
    font-family: Agustina;
    font-size: 60pt;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 50%;
    left: 0;
    top: calc(50vh - 120px);
    text-align: center;
    white-space: nowrap;
    animation: h1show 4s normal;
    color: #00a8ff;
    z-index: 1;
    /* border: 1px solid white; */
}
/*@keyframes h1show {
    0% { color: #171c28; } 100% { color: #00a8ff; }
}*/
#btn_internet {
    position: absolute;
    left: 0;
    top: calc(50vh + 30px);
    width: 50%;
    text-align: center;
    z-index: 2;
    /* border: 1px solid white; */
}
#btn_internet i {
    border-radius: 3rem;
    font-size: 1.7rem;
    height: 3rem;
    line-height: 3rem;
    width: 3rem;
    cursor: pointer;
    margin: 0 10px;
    text-align: center;
}
#startright {
    position: absolute;
    height: 80vh;
    max-width: 50%;
    max-height: 500px;
    top: 50vh;
    right: 25%;
    transform: translate(50%, -50%);
    -webkit-transform: translate(50%, -50%); /* 50% der eigenen Höhe nach oben und rechts verschieben */
    opacity: 0.8;
    z-index: 0;
}
@media (max-width: 1100px) {
    h1 {
        font-size: 50pt;
        top: calc(50vh - 100px);
    }
    #btn_internet {
        top: calc(50vh + 20px);
    }
    #startright {
        max-width: 40%;
        right: 22%;
    }
}
@media (max-width: 800px) {
    h1 {
        width: 100%;
        font-size: 55pt;
        top: calc(25vh - 100px);
    }
    #btn_internet {
        width: 100%;
        top: calc(25vh + 50px);
    }
    #startright {
        max-width: 80vw;
        max-height: 60vh;
        left: 50vw;
        top: none;
        bottom: 0px;
        transform: translate(-50%, -15%);
        -webkit-transform: translate(-50%, -15%);
    }
}
@media (max-width: 500px) {
    h1 {
        font-size: 45pt;
        top: calc(25vh - 50px);
    }
    #btn_internet {
        width: 100%;
        top: calc(25vh + 80px);
    }
    #startright {
        transform: translate(-50%, -20%);
        -webkit-transform: translate(-50%, -20%);
    }
}
@media (max-width: 400px) {
    h1 {
        font-size: 30pt;
        top: calc(25vh - 30px);
    }
    #btn_internet {
        width: 100%;
        top: calc(25vh + 50px);
    }
    #startright {
        transform: translate(-50%, -20%);
        -webkit-transform: translate(-50%, -20%);
    }
}
@media (max-height: 600px) {
    #startright {
        max-height: 50vw;
    }
}
/*@media (max-width: 1000px) {
    h1 {
        width: 100%;
        top: 0vh;
    }
    #btn_internet {
        width: 400px;
        top: 40vh;
        left: calc(50% - 200px);
        text-align: right;
    }
    #startright {
        width: calc(100% - 80px);
        top: 50vh;
        left: 40px;
        max-width: none;
        opacity: 0.6;
    }
}
@media (max-width: 500px) {
    h1 {
        font-size: 40pt;
    }
    #btn_internet {
        width: 100%;
        top: 22vh;
        left: 0;
        text-align: center;
    }
    #startright {
        width: calc(100% - 80px);
        top: 15vh;
        left: 40px;
        max-width: none;
        opacity: 0.6;
    }
}*/






#pfeilscroll {
    position: absolute;
    width: 40px;
    height: 20px;
    top: 85%;
    left: calc(25% - 20px);
    animation: pfeilscrolljump 3s infinite;
    cursor: pointer;
}
@keyframes pfeilscrolljump {
    0% { top: 85vh; } 50% { top: 83vh; } 100% { top: 85vh; }
}
#page {
    position: absolute;
    top: 100vh;
    width: calc(100% - 55px);
    padding: 10px;
    padding-bottom: 20px;
}