@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

/*
    INDICACIONS PER RESOLDRE L'EXERCICI

    1.  L'amplada de la pàgina sempre serà del 100%. La columna de la dreta és fixa, de 300px i la zona de l'esquerra ocupa la resta de la pàgina (el més fàcil és aplicar un margin-right de 300px a tot el body).
    2.  El menú està construït amb una llista. Cada element porta a la secció corresponent de la pàgina. Aquests enllaços canviaran a color de lletra i subratllat a #f19533 al tenir el cursor damunt.
    5.  Els colors a utilitzar són: #380f53 i #f19533 a més de blanc i negre.
    6.  Quan posem el ratolí sobre el botó de contacte, canviarà el color de fons a blanc.
    7.  L'arxiu HTML no pot superar les 160 línies i el CSS les 220.
    8.  No us oblideu de posar el favicon i el títol de la pàgina.
    9.  Tots els canvis quan posem el ratolí a sobre de qualsevol element s'han de fer amb transició.
    10. La resta d'elements es poden intuir de la captura que us proporcionem. Fixeu-vos en les ombres, arrodoniments, mides de lletra,...
*/

/*
    CLASSES D'UTILITAT
*/
.m0a {
    margin: 0 auto;
}

.row {
    display: flex;
}

.w33 {
    width: 33%;
}

.w25 {
    width: 25%;
}

.fixr {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    background-color: #380f53;
}

.inner {
    margin: 10px;
    padding: 10px;
}

/*
    ESTILS GENERALS
*/
body {
    margin: 0;
    margin-right: 350px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    background-color: #380f53;
    color: white;
}

section {
    padding: 40px 40px;
}

h1 {
    font-size: 40px;
    color: white;
    border-bottom: 1px solid #ffffff33;
}

h2 {
    text-transform: uppercase;
}

/*
    HEADER
*/
header {
    background-image: url(images/backgrounds/slider.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    text-align: right;
    padding: 80px 20px 20px;

}
    /*
        ASIDE
    */
aside {
    padding: 10px 25px;
    border-bottom: 10px solid #f19533;
    text-align: right;
}
aside nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
aside nav ul li {
    border-bottom: 1px solid white;
    transition: all 0.5s ease;
}
aside nav ul li a {
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    display: block;
    padding: 10px;
    transition: all 0.5s ease;
}
aside nav ul li a:hover {
    color: #f19533;
}
aside nav ul li:hover {
    border-bottom: 1px solid #f19533;
}
/*
    MAIN
*/
    /*
        ABOUT
    */
section#about {
    background-image: url(images/backgrounds/about.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
section#about table{
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ffffff20;
    padding: 2px 30px;
}
    /*
        MENU
    */
section#menu {
    background-image: url(images/backgrounds/background.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
section#menu .inner {
    background-color: #D6653B;
}
section#menu img{
    width: 100px;
}

    /*
        RESERVATIONS
    */
section#reservations {
    background-image: url(images/backgrounds/about.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    color: gray;
}

section#reservations .inner img{
    width: 150px;
    border-radius: 75px;
}

/*
    FOOTER
*/
footer {
    padding: 70px;
    background-image: url(images/backgrounds/footer.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

input {
    display: block;
    margin: 10px auto;
}

input[type='button'] {
    background-color: transparent;
    text-transform: uppercase;
    font-family: 'Quicksand', sans-serif;
    color: white;
    font-size: 26px;
    padding: 7px;
    margin-bottom: 30px;
    border-radius: 5px;
    border: 3px solid #ccc;
}