@font-face {
    font-family: 'W95Fa';
    src: url(fonts/w95fa.woff2);
}


body{ /* Adds the color, the old cursor and the background gif*/
    background-color: #208c71;
    background-image: url("https://media.tenor.com/VWy0UrGD8tsAAAAj/internet-planet-earth.gif");
    height: 100vh;
    padding: 50px;
    cursor:url(icons/arrow.cur), auto;
}

.containter{

    /* Typical windows 95 background */
    background-color: #c0c0c0;
    padding: 2px;

    display: flex;
    flex-direction: column;

    font-size: 20px;
    font-family: 'W95Fa', sans-serif;

    /* Window design*/
    border-radius: 0px;
    border-width: 4px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-style: outset;
    border-color: #87888F;
    border-left-color: #ffffff;
    border-top-color: #ffffff;
    box-shadow: 2px 2px 1px rgba(14, 14, 14, 1);
}

.title{ /*Creates the blue area of my window*/
    font-size: 60px;
    font-family: 'W95Fa', sans-serif;
    color: white;
    background-color: #0827f5;
    display: flex;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: flex-start;
}

.buttonsTitle{ /* Ajusting where the buttons will be*/
    display: flex;
    padding: 5px;
    
}

.buttonsTitle button{
    /* Typical windows 95 background */
    background-color: #c0c0c0;
    padding: 2px;
    cursor: url(icons/Cursor_15.cur), pointer; /* Makes it a pointing hand when hovering */

    /* Window design*/
    border-radius: 0px;
    border-width: 4px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-style: outset;
    border-color: #87888F;
    border-left-color: #ffffff;
    border-top-color: #ffffff;
    box-shadow: 2px 2px 1px rgba(14, 14, 14, 1);
}

.buttonsTitle button img{ /* Ajusting the size of the images inside the buttons*/
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

.buttonsTitle .closeIcon{ /* Giving the space between the X button and the others*/
    margin-left: 4px;
}

.wrapperInfo { /* Adjusting the images to be in this line loop*/
    display: flex; /* Lines up Belt 1 and Belt 2 side-by-side */
    gap: 30px; /* The gap between the two belts */
    width: 100%;
    overflow: hidden; 
    margin-top: 20px;
    margin-bottom: 20px;
}

.websiteImages { /* Adjusting the proprieties of the images*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    gap: 30px; /* The gap between the images inside the belts */
    flex-shrink: 0; /* Prevents the browser from squishing the images to fit the screen */
    
    animation: marquee-move-text 15s linear infinite; 
}

.imageBox {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the <h5> text right above the image */
}

.imageBox h5 {
    margin-bottom: 5px; /* Adds a tiny gap between the text and the picture */
}

@keyframes marquee-move-text { /* Animation keyframes, so i can create the marquee effect*/
    0% { 
        transform: translateX(0); /* Starts in its normal position on screen */
    }
    100% { 
        /* Shifts left by exactly 100% of its own width, plus the 30px gap */
        transform: translateX(calc(-100% - 30px)); 
    }
}

.websiteImages img { /* Creating the sides of the images*/
    width: 100%; 
    height: 300px; 
    object-fit: cover;
    object-position: top;

    border-radius: 0px;
    border-width: 4px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-style: outset;
    border-color: #87888F;
    border-left-color: #ffffff;
    border-top-color: #ffffff;
    box-shadow: 2px 2px 1px rgba(14, 14, 14, 1);

}

.subtitle{ /* Text under the blue box*/
    font-style: italic;
    display: flex;
    justify-content: center;
}


.info{ /* Every text the sends the message*/
    display: flex;
    justify-content: center;
}



.aboutMe{ /*The last text that direct the user to my website*/
    font-weight: bolder;
    display: flex;
    justify-content: center;
}

a:hover{ /* Gives a mouse effect when over the AboutMe text*/
    cursor: url(icons/help_win95.cur), help;
}