@font-face {
font-family:"dotemp";
font-size:16px;
src:url(/fonts/dotemp.ttf) format("truetype")
}

body {
filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 5px);
margin:auto;
margin-bottom:96px;
margin-top:48px;
padding:20px 60px;
width:1200px;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}

html {
background-image: url("images/feed/background.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#links {
align-items:center;
display:flex;
height:100%;
justify-content:center;
margin:0
}

.navbar {
align-items:center;
display:flex;
flex-direction:row;
gap:6px;
justify-content:center;
padding-bottom:20px
}

#camera-container {
width: 1200px;
height: 1335px;
}

#metal-container {
	display: flex;
	flex-direction: column;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 900px;
    margin-top: -120px;
    margin-bottom: 40px;
    z-index: 10000;
}

#air-quality-container {
width: 1200px;
height: 339px;
margin-top: -100px;
z-index: 10000;
}

#radar-container {
	width: 1223px;
    height: 583px;
	margin-top: -24px;
}


.camera {
	position: absolute;
}

.camera img {
	background: url('images/feed/default.jpg');
}

.camera-row {
	display: flex;
	flex-direction: row;
}

#camera-border {
	position: absolute;
	z-index: 10000;
	pointer-events: none;
}

#camera1434 {
	margin-left: 665px;
    margin-top: 920px;
    transform: perspective(500px) rotateY(351deg);
}

#camera1434 img {
	width: 420px;
}

#camera878 {
	margin-left: 120px;
    margin-top: 486px;
}

#camera878 img {
	width: 500px;
    height: 390px;
}

#camera904 {
	margin-top: 895px;
    margin-left: 85px;
}

#camera904 img {
	width: 550px;
    height: 350px;
    transform: perspective(500px) rotateY(8deg) rotateX(5deg);
}

#camera908 {
	margin-left: 660px;
	margin-top: 490px;
}

#camera908 img {
	width: 480px;
	height: 380px;
}

#camera2231 {
	margin-left: 720px;
    margin-top: 70px;
}

#camera2231 img {
	width: 455px;
    height: 370px;
    transform: perspective(500px) rotateY(1deg) rotateX(1deg);
}

#camera1098 {
	margin-left: 50px;
	margin-top: 40px;
}

#camera1098 img {
	width: 650px;
    height: 420px;
    transform: perspective(500px) rotateY(4deg) rotateX(359deg);
}


#metal-container-row img {
	background: white;
    padding-top: 5px;
    padding-bottom: 5px;
}

#bigger-scrap img {
	height: 114px;
    width: 180px;
}

#metal-container-row {
	display: flex;
	flex-direction: row;
	background-color: white;
    justify-content: flex-start;
	width: 1228px;
	filter: brightness(91%) contrast(178%) grayscale(100%) invert(100%) url(#redblack)
}

#scrap-border-container {
	display: flex;
	justify-content: center;
}

#scrap-border {
	width: 910px;
    margin-top: -142px;
    z-index: 1;
}

.ticker {
  animation: ticker 20s linear infinite;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* Only move half if content is doubled */
}

.ticker-container {
	overflow: hidden;
}


#aqi-border {
	pointer-events: none;
}

#air-quality-container img {
	position: absolute;
}

#aqi-toronto img {
	width: 225px;
    margin-left: 796px;
    margin-top: 85px;
    background: white;
    padding-top: 30px;
    padding-bottom: 30px;
filter: brightness(68%) contrast(200%) hue-rotate(293deg) saturate(0%) grayscale(100%) url(#greengrey)
}

#aqi-london img {
	width: 247px;
    margin-left: 450px;
    margin-top: 60px;
    background: white;
    padding-top: 30px;
    padding-bottom: 30px;
filter: brightness(68%) contrast(200%) hue-rotate(293deg) saturate(0%) grayscale(100%) url(#bluegrey)
}

#aqi-kitchener img {
	width: 229px;
    margin-left: 140px;
    margin-top: 83px;
    background: white;
    padding-top: 30px;
    padding-bottom: 30px;
filter: brightness(68%) contrast(200%) hue-rotate(293deg) saturate(0%) grayscale(100%) url(#greengrey)
}


#radar {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin-top: 39px;
    margin-left: 127px;
}

#radar img {
    padding-left: 5px;
    padding-right: 68px;
    width: 450px;
	filter: brightness(119%) contrast(73%) hue-rotate(343deg) grayscale(13%) 
}

#radar-border {
	position: absolute;
}


#back-button-container {
	display: flex;
    width: 100vw;
}

#back-button {
	pointer-events: all !important;
	image-rendering: pixelated;
	margin-left: 85px;
}

#back-button img{
	width: 76px;
	height: 68px;
}