/* general settings */
body {
    background-color: black;
    color: white;
    /* background-color: white;
    color: black; */
    min-width: 1700px;
}

p {
    margin-left: 5px;
}

h3 {
    margin-left: 5px;
    margin-top: 3px;
}

/*-------------------------------------------------------------------------------  */
/* index.html */
/* ------------------------------------------------------------------------------- */

/* the container posters on top of the navigation bar */
#top_posters {
    position: absolute;
    width: 1200px;
    height: 180px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;

    margin-left: 245px;
    margin-top: 1px;

    display: flex;
    flex-direction: row; 
}

/* poster class */
.poster {
    position: relative;
    width: 200px;
    height: 180px;
    background-size: cover;
}

/* images */
#poster1 { background-image: url("/images/monstergirl.jpg"); }
#poster2 { background-image: url("/images/august-in-the-water.jpg"); }
#poster3 { background-image: url("/images/games.jpg"); }
#poster4 { background-image: url("/images/cowboy.jpg"); }
#poster5 { background-image: url("/images/bluegirl.jpg"); }
#poster6 { background-image: url("/images/girl.jpg"); }

/* navigation bar */
#navigation {
    position: absolute;
    width: 1200px;
    height: 20px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;

    margin-left: 245px;
    margin-top: 190px;
}

/* link texts */
.navigation_links {
    width: 200px;
    height: 180px;
    float: left;
}

/* container for the sliding text to the left*/
#sliding_text_container {
    position: absolute;
    width: 245px;
    height: 200px; 
    overflow: hidden; 
}

#sliding_text1 {
    white-space: nowrap;
    animation: slide_left 8s linear infinite;
}

#sliding_text2 {
    white-space: nowrap;
    animation: slide_right 10s linear infinite;
}

#sliding_text3 {
    white-space: nowrap;
    animation: slide_left 5s linear infinite;
    animation-delay: 3s;
    animation-fill-mode: backwards;
}

@keyframes slide_left {
    from { transform: translateX(18vw); }
    to   { transform: translateX(-18vw); }
}

@keyframes slide_right {
    from { transform: translateX(-20vw); }
    to   { transform: translateX(20vw); }
}

/* blue juwel memoir to the right */
#blue_juwel_memoir {
    position: absolute;
    width: 230px;
    height: 400px;
    margin-top: 1px;
    margin-left: 1460px;
}

#blue_juwel_image {
    position: relative;
    width: 230px;
    height: 200px;
    background-image: url("/images/blue-and-juwel.png");
    background-size: cover;
}

#blue_juwel_text {
    position: relative;
    width: 230px;
    height: 200px;
    font-size: 20px;
    text-align: center;
}


/* welcome box */
#welcome {
    position: absolute;
    width: 900px;
    height: 120px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;

    margin-left: 245px;
    margin-top: 225px;
}

/* containers for the left, center, and right sections */
#left {
    position: absolute;
    width: 300px;
    height: 1000px;
    margin-top: 360px;
    margin-left: 245px;
}

#center {
    position: absolute;
    width: 600px;
    height: 1000px;
    margin-left: 540px;
    margin-top: 360px;
}

#right {
    position: absolute;
    width: 285px;
    height: 1000px;
    margin-left: 1160px;
    margin-top: 225px;
}



/* boxes in the containers */
#belly {
    position: relative;
    width: 600px;
    height: 600px;

    border-color: rgb(50, 13, 197);
    border-width: 6px;
    border-style: outset;
}   

#thought {
    position: relative;
    width: 280px;
    height: 100px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;
}

#currently {
    position: relative;
    width: 280px;
    height: 200px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;
    margin-top: 10px;
}

#about_me {
    position: relative;
    width: 280px;
    height: 350px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;
}

#contacts {
    position: relative;
    width: 280px;
    height: 100px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;
    margin-top: 10px;
}

#visitor {
    position: relative;
    width: 280px;
    height: 40px;

    border-color: rgb(50, 13, 197);
    border-width: 5px;
    border-style: outset;

    margin-top: 10px;
}

.button {
    width: 88px;
    height: 31px;
    border: none;

    cursor: pointer;
}
.setting_button {
    width: 55px;
    height: 30px;
    border: none;

    cursor: pointer;

    border-color: rgb(50, 13, 197);
    border-width: 5px;
    border-style: outset;

    background-color: rgb(0, 17, 255);
    color: white;
    text-align: center;
}

#letterboxd {
    background-image: url("/buttons/letterboxd3.png");
    background-size: cover;
}
#neocities {
    background-image: url("/buttons/neocities.gif");
    background-size: cover;
}

#recent_things {
    position: relative;
    width: 280px;
    height: 400px;

    border-color: rgb(50, 13, 197);
    border-width: 3px;
    border-style: outset;

    margin-top: 10px;
}

#settings {
    position: relative;
    width: 280px;
    height: 160px;

    text-align: center;

}

/* ------------------------------------------------------------------------------- */
/* allgemein weiterlinken websites */
/* ------------------------------------------------------------------------------- */
.navigation_small {
    position: relative;
    width: 990px;
    height: 20px;

    border-width: 3px;
    border-style: outset;

    margin-left: 5px;
    margin-top: 200px;
    z-index: 10;

}
.navigation_links_small {
    width: 150px;
    height: 20px;
    float: left;
}
.main_box{
        position: absolute;
        width: 1000px;
        height: 1000px;

        background-color: black;
    
        margin-left: 350px;
        margin-top: -10px;

}
.title{
    position: absolute;
    width: 1000px;
    height: 160px;

    text-align: center;
    font-size: 150px;

    margin-left: 350px;

}
.title_translation{
    position: relative;
    width: 1000px;
    height: 50px;

    text-align: center;
    font-size: 12px;

    margin-top: -20px;
}


/* ------------------------------------------------------------------------------- */
/* films.html */
/* ------------------------------------------------------------------------------- */
#film_navigation{
    border-color: rgb(56, 12, 236);
}
#film_title{
    color: rgb(51, 0, 255);
    margin-top: 0px;
}
#films_body {
    /* background-image: url(backgrounds/greengrid.jpg); */
    color: rgb(8, 0, 255);
    min-width: 1700px;


    /* The base background color */
    background-color: #000000;
    /* Creating the horizontal and vertical lines */
    background-image: 
        linear-gradient(to right, rgb(50, 13, 197) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(50, 13, 197) 1px, transparent 1px);
    /* This defines the size of the grid squares (20px by 20px) */
    background-size: 18px 18px;

}

.film_link {
    position: absolute;
    color:blue;
    text-align: center;
}
#film_link1 {
    font-size: 35px;
    width: 400px;
    height: 50px;
    margin-left: 450px;
    margin-top: 320px;
}
#film_link2 {
    font-size: 30px;
    width: 350px;
    height: 50px;
    margin-left: 680px;
    margin-top: 500px;
}

#film_link3 {
    font-size: 25px;
    width: 350px;
    height: 50px;
    margin-left: 484px;
    margin-top: 800px;
}
#film_link4 {
    font-size: 25px;
    width: 350px;
    height: 50px;
    margin-left: 763px;
    margin-top: 732px;
}
#film_link5 {
    font-size: 25px;
    width: 200px;
    height: 50px;
    margin-left: 1100px;
    margin-top: 250px;
}
#film_link6 {
    font-size: 20px;
    width: 200px;
    height: 50px;
    margin-left: 1079px;
    margin-top: 620px;
}
#film_link7{
    font-size: 20px;
    width: 200px;
    height: 50px;
    margin-left: 399px;
    margin-top: 600px;
}
#film_link8 {
    font-size: 25px;
    width: 350px;
    height: 50px;
    margin-left: 850px;
    margin-top: 400px;
}
#film_link9 {
    font-size: 15px;
    width: 350px;
    height: 50px;
    margin-left: 700px;
    margin-top: 850px;
}


/* ------------------------------------------------------------------------------- */
/* games.html */
/* ------------------------------------------------------------------------------- */
#games_body {
    /* background-image: url(backgrounds/greengrid.jpg); */
    color: rgb(235, 12, 12);
    min-width: 1700px;


    /* The base background color */
    background-color: #000000;
    /* Creating the horizontal and vertical lines */
    background-image: 
        linear-gradient(to right, rgb(170, 11, 11) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(165, 16, 16) 1px, transparent 1px);
    /* This defines the size of the grid squares (20px by 20px) */
    background-size: 18px 18px;

}

#game_navigation{
    border-color: rgb(235, 12, 12);
}
#game_title{
    color: rgb(255, 0, 0);
    margin-top: -30px;
}