/*
selector {
    atribute: value; 
    atribute: value;
    ...
}

selectors: * (za vse elemente na strani); 
1. če želimo, da se atributi pripišejo več stvarem, selektorje ločimo z vejico; č
2. e želimo, da npr. znotraj navigacije dodamo border samo enemu elementu, potem napišemo selektorje drugega za drugim, npr. nav h1; 
3. id selektor uporabimo za samo en element na strani, ga že prej določimo v html-ju (#); 
4. IDs are unique, but u can use the same class for multiple elements (.)

reset CSS: poglej na page, so vsi selektorji gor / nek mayerweb.com

atributi: border ...
*/

@font-face { font-family: ProphetRegular; src: url('Prophet Regular.otf'); } 
@font-face { font-family: ProphetLightItalic; font-weight: italic; src: url('Prophet Light Italic.otf');}
@font-face { font-family: ProphetMedium; font-weight: medium; src: url('Prophet-Medium.otf');}
@font-face { font-family: ProphetBold; font-weight: bold; src: url('Prophet Bold.otf');}
@font-face { font-family: Apoc; font-weight: italic; src: url('ATApoc-RevelationsItalic.ttf');}


    

/* -------------------------- NAVIGATION --------------------------------- */

nav {
    float: right;
    font-family: ProphetLightItalic;
    font-weight: italic;
    font-size: 20pt;
    width: 1.2vw;
    padding-right: 1%
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
}

li {
  display: inline;
}

li a:hover {
    text-decoration: underline;
}

a {
    color: #ff3600;
    text-decoration: none;
    margin-left:10px;
}

    /*---------------------------- stars ---------------------------*/

.rating {
    position: fixed;
    display: flex;
    padding-left: 1.5%;
    top: 1%;
}

.rating input {
    display: none;
}

.rating label {
    display: block;
    width: 50px;
}

.rating label:before {
    content: '\f005';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 20px;
    color: #ff3600;
}

.rating label:after {
    content: '\f005';
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 20px;
    color: white;
    top: 0%;
    opacity: 0;
    transition: .2s;
    
}

.rating label:hover:after {
    opacity: 1;
}

/* --------------------------------- BODY --------------------------------- */

body {
    width: 87vw;
        
    /* vw = Relative to 1% of the width of the viewport* */
    
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0; 
}

main {
    margin: 0 auto;
    width: 65%;
    padding-left: 20%;
    font-family: ProphetMedium;
    font-weight: medium;
    font-size: 40pt;
    color: #ff3600;
}


    /* margin: 0 auto; distributes the content evenly to both sides */
}


#quote-2 {
    margin-bottom: 100px;
}

div {
    margin-bottom: 50px;
}

.quote-title {
    color: #ff3600;
    font-family: ProphetLightItalic;
    font-size: 15pt;
    margin bottom: 3px;
}

/* --------------------------------- FOOTER --------------------------------- */

footer {
    width: 87vw;
}

#copyright {
    font-size: 10pt; 
    font-family: ProphetLightItalic;
    width: 65%;
    padding-left: 24%;
    margin: 0 auto;
    margin-bottom: 20px;
    color: #ff3600;
    position: fixed;
    bottom: 0;
}