/*---------Settings---------*/

html{
    cursor: url("../cursor/cursor.cur"), default; /*personnalized cursor*/
    background-image: url('../img/home/cloudy.jpg');
    box-sizing: border-box;
    color: rgb(4, 4, 94);
}

mycursor {
    width: 300px; /*size of cursor*/
}

@font-face{
    font-family: 'pixel' ;
    src:url('/font/bytebounce/ByteBounce.ttf');
}

a {
    background-color: aliceblue;
    color: rgb(4, 4, 94);
    font-family: pixel;
    font-size: 50px;
    padding: 5px;
}

a:hover{
    color: rgb(21, 129, 148);
}

/*---------Container / Whole Window---------*/

header{
    display: block;
    background-color: rgb(148, 203, 240); /*test remember what this does*/
    box-shadow: 5px 5px  rgb(42, 155, 230);

}

header a{
    text-decoration: none;
}

body{
    margin: 0 auto;
    width: 1200px;
    display: flex;
    flex-direction: column;
/*flex-direction: column; allows to have the next element on the next line 
/*cf: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_flex-direction*/
}


.row{
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap; /*allows to line breaks (saut de ligne) within a word.*/
}

.row::after{
    clear: left;
/*The clear property specifies what should happen with the element that is next to a floating element.*/
}

.column{
    float: left; /*The element floats to the left of its container*/
    display: table;
    flex-wrap: wrap;/*allows to line breaks (saut de ligne) within a word.*/
}

.container{
/* don't need flex-wrap: wrap bc it will contain everything until we reach the footer*/
    display: flex;
    margin-top: 10px;
    border: 2px solid white;
}

h2{
    display: block;
    font-family: pixel;
    font-size: 60px;
    margin: auto;
}

.small{
    font-size: 20px;
    margin-bottom: 3%;
}

.window{
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: aliceblue;
    box-shadow: 3px 3px  rgb(42, 155, 230);
}

/*
aside{
    background-color: yellow;
    display: inline-grid;
    flex-wrap: wrap;
    width: 20%;
    margin-right: 10px;
}*/

.button{
    margin-right: 10px;
    background-color: rgb(255, 39, 129);
}

.scroll_left {/*doesn't work*/
    animation: left 10s linear infinite;
}

/*---------Foooter---------*/

footer{
    text-align: right;
    margin-right: 10px;/*need to aligh this on the right*/
    background-image: url() ;
    color:black;
    width: 150px;
}

#p_footer{
    text-align: right;
    background-color:rgb(176, 42, 230);
    padding: 10px;
    border-radius: 25px;
    border: 4px solid rgb(42, 3, 68);
}