/* I hate CSS, I hate CSS, I hate CSS */

h1, p { /* Multiple things can be selected to have the same style, syntax: element1, element2, ... {style here} */
    text-align: center;
} /* Element selector affecting all h1 (header 1) and p (paragraph) elements */

img {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#Hello {
    text-align: center;
    margin-left: 50px;
    margin-right: 50px;
} /* Id selector affecting all elements with the id 'Hello'. Id selector are prefixed by a '#' */

.one {
    background-color: rgb(210, 210, 210);
    border: 3px solid darkgrey;
    padding: 5px;
} /* Class selector affecting all elements of the class 'one'. Class selectors are prefixed by a '.' */

.two {
    margin-left: 20px;
    margin-right: 20px;
    background-color: rgb(210, 210, 210);
    border: 5px solid darkgrey;
    padding: 5px;
}

.main-header {
    background-image: linear-gradient(rgb(169, 169, 169), rgb(128, 128, 128), rgb(75, 75, 75));
    /* Linear gradient function from one colour to another */
    position: fixed; /* No moving please */
    top: 0;
    right: 0; 
    left: 0;
    height: 50px;
    margin-left: -10px;
    /* margin-right: 1000px; */
 }
 .header-info {
    text-align: left;
    color: rgb(96, 96, 96);
    position: absolute;
    left: 0;
    padding-right: 15px;
    margin: 14px 14px 14px 14px;
 }
 .header-info a {
    padding-top: 0;
    text-decoration: underline;
 }
 .header-info a:hover { /* Hover selector example */
    background-color: darkgrey;
 } /* To make a style for when an element is hovered, put a ':' followed by 'hover' after the selector */

nav { /* All nav elements are affected by this */
    position: absolute;
    right: 0;
    display: flex;
}

a {
    text-decoration: underline;
    color: rgb(0, 0, 0);
    padding: 5px;
    float: left;
}
  
a:hover {
    background-color: darkgrey;
}

.stopMessingUpTheTopOfTheWebPage{
    margin-top: 5%
} /* I put the contents of the body in a div with a class and made that class have a margin so it won't
interfere with the header */

.title {
    font-style: italic;
    color: rgb(0, 0, 0);
}
h1, h2, p { /* This probably overrides the group selector for h1 and p above but their the same, so...*/
    text-align: center;
    color: rgb(0, 0, 0);
}
.items {
    display: flex;
    justify-content: center;
}
.item {
    display: flex;
    flex-direction: column;
    margin: 10px;
    /* background-color: grey; Already have a nice enough background, no need for more */
}

h3 {
    text-align: center;
    padding: 5px;
    color: rgb(21, 21, 21);
}

/* Class selectors to make images either portrait or landscape */
.portrait {
    /* width: 260px;
    height: 350px; */ /* <-- Old non-dynamic code */
    max-width: 100%;
    max-height: 350px;
} /* Currently no portrait only images */

.landscape {
    width: 350px;
    height: 240px;
}

/* img { not needed right now
    /* 
    border: 5px solid rgb(0, 0, 0);
    /* Shorthand is above, instead of defining the border and its properties seperately,
    just put the width (5px), the style (solid) and the colour (black/0x000000) directly in the border
    property */
    /* Non-shorthanded code is below for difference: */ /*
    border-width: 5px;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    */
    /* border-radius: 5px //Round the corners of the image */ /*
} */

img:hover { /* the ':hover' and the element name must be connected, do not write like 'img :hover' */
    /* Nice shadow effect to highlight what image you're looking at when hovering over it */
    box-shadow: 5px 3px 5px rgb(69, 69, 69);
    /* Make a shadow behind an image. Shorthand syntax: right, bottom, blur, colour */
    border-radius: 5px /* I had to because I could */
}

body {
    background-image: url(images/DSC00345\ \(background\ test\ 2\).jpg);
    background-size: cover
    /* The 'cover' background size makes it one whole image and enlarges it to cover the whole website*/
}

/* For tables: */
table, tr, td, th {
    border: 2px solid black; /* Width, fill style, colour */
    border-collapse: collapse;
    /* ^Collapses the borders into a single line to avoid that double line thing */
    position: relative;
    text-align: center;
}

/* For the price list things */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
} /* Flex display */

.tab {
    background-color: rgb(210, 210, 210);
    width: 300px;
    padding: 40px;
    margin: 20px;
    border-radius: 7px;
    border: 5px solid darkgrey;
}
h1.name { /* Affects all header 1 elements with the 'name' class */
    font-size: 30px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: black;
}

h2.price {
    font-size: 38px;
    color: black;
}

.list {
    list-style-type: disc;
    margin-bottom: 50px;
    text-align: left;
}

.list li {
    margin-top: 20px;
    color: black;
}

hr {
    height: 7px;
    width: 80%;
    margin: auto;
    background-color: rgb(240, 255, 162);
    border: none;
    /* border-radius: 50px; */
    margin-top: 20px;
}

/* Button: */
button {
    background-color: grey;
    border-radius: 8px;
    color: white;
    padding: 8px;
    border: none;
    font-size: 20pt;
}

button:hover {
    transform: scale(1.2, 1.2);
    background-color: darkgrey;
    cursor: pointer;
}

/* About us styles */
div.about {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 30px;
    background-color: rgb(210, 210, 210);
    border: 5px solid darkgrey;
    width: 80%;
}

.about {
    text-align: left;
    color: black;
    padding: 10px;
    width: 95%;
}

div.image-about {
    margin-bottom: auto;
    margin-top: auto;
}

img.about-us {
    width: 300px;
}

/* Footer styles */
footer {
    background-color: rgb(210, 210, 210);
}

.main-footer { 
    display: flex;
    justify-content: center;
    width: 100%;
}

.left-footer {
    margin-right: auto; 
    margin-left: 40px;
}

.right-footer {
    margin-left: auto;
    margin-right: 40px;
}

.center-footer {
    margin-left: 20px;
    margin-right: 20px;
}

.info-left {
    color: black;
    text-align: left;
    width: 100%;
}
.info-right {
    color: black;
    text-align: right;
    width: 100%;
}

.info-center {
    color: black;
    text-align: center;
    width: 100%;
    padding-top: 5px;
    border-top: 1px solid rgb(210, 210, 210);
}

/* Font: */

*{
    font-family: "Luxurious Roman", serif;
}

/* Media query:

This thing querys your media and if it finds your vw (viewport width) is below 600px, it'll adjuest the font
to only 2 vw to match your small screen (1 vw = 1% of your viewport's width)

There's also vh which like vw... but for height, so basically the same. */

@media (max-width: 600px) {
    * {
        font-size: 2vw;
        margin: 2px;
      }
}