@font-face {
    font-family: LOTR-style;
    src: url(anirm.ttf);}

a {
    color: #000000;
}
a:visited {
    color: #302719;
}
a:hover {
    cursor: grab;
    transform: scale(1.05);
}

h1 {
    text-align: center;
    font-style: italic;
    padding-top: 60px;
    padding-bottom: 60px;
    margin: auto;
    border-width: 800px;
    max-width: fit-content;
    font-size: 75px;
}


body {
    width: 1570px;
    height: 1000px;
    overflow: auto;
    margin: auto;
    /*background-image: url("Art/crossroads/crossroads-bg1.jpg");*/
    background-image: url("Art/crossroads/crossroads-bg2.jpg");
    /*background-image: url("Art/crossroads/crossroads-bg3.jpg");*/ 
    /*background-image: url("Art/crossroads/crossroads-bg4.jpg");*/  
    background-size: 1570px;
    background-repeat: repeat;
    background-position: fixed;
    /*background-attachment: fixed; */
    background-color: rgb(0, 60, 3);
    font-family: LOTR-style;  
}


.container {
    margin-left: 0;
    width: 1570px;
    height: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr;
    grid-template-areas:
    'top top top'
    'umidl umid umidr'
    'lside mid rside'
    'lowmidl lowmid lowmidr'
    'footer footer footer'
    ;
}


.sabrina-sign {
    grid-column: 3;
    position: relative;
    justify-content: center;
    top: 75px;
    display: grid;

}
#sabrina { 
    width: 8.7rem;
}


.signpost-container {
    grid-row: 3;
    grid-column: 4;
    justify-content: flex-start;
    display: grid;
    position: relative;
    top: 2.1rem;
}
#signpost { 
    position: absolute;
    width: 5rem;
    height: 30.5rem;
    justify-self: center;
}
.sign {
    position: relative;
    width: 11rem;
    flex-wrap: wrap; 
}
.port {
    transform: rotate(15deg);
    top: 3vh;
    left: 3rem;
    height: 65px;
}
.web {
    transform: rotate(17deg);
    top: 5vh;
    left: 6.7rem;
    z-index: 1;
}
.stat {
    transform: rotate(-13deg);
    top: 5vh;
    left: 7rem;
    height: 63px;
}
.occu {
    transform: rotate(-13deg);
    top: 6.7vh;
    left: 3.2rem;
    height: 63px;
}


.duck-container {
    grid-column: 5;
    grid-row: 2;
    position: relative;
    top: 7rem;
}       
.duck {
    width: 3rem;
}
.duck:hover {
    transform: scale(1.05);
}


.afc-container {
    grid-column: 5;
    grid-row: 3;
    position: relative;
    top: 8rem;
    left: 11rem;
}
.afc {
    width: 3rem ;
    z-index: 1;
    
}
.afc:hover {
    transform: scale(1.05);
}


.rock-container {
    grid-column: 5;
    grid-row: 3;
    align-self: center;
    position: relative;
    top: 6rem;
    left: 5rem;
    
}
.rock  {
    width: 18rem;
}