From 05050e07eabcd86f34514f08c7d6c8dd7019c684 Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Wed, 1 Nov 2023 10:55:13 +0100
Subject: [PATCH] Move style out of html

---
 index.htm |  18 ---
 style.css | 320 ++++++++++++++++++++++++++++++------------------------
 2 files changed, 177 insertions(+), 161 deletions(-)
diff --git a/index.htm b/index.htm
index 6a80fcd..b8df94d 100644
--- a/index.htm
+++ b/index.htm
@@ -10,24 +10,6 @@
 <LINK href="style.css" rel="stylesheet" type="text/css">
 <title>TC Automotives</title>
 
-<style>
-	#b1:hover {
-		background-image: url("resources/car.png");
-	}
-
-	#b2:hover {
-		background-image: url("resources/sketch.png");
-	}
-
-	#b3:hover {
-		background-image: url("resources/cogs.png");
-	}
-
-	#b4:hover {
-		background-image: url("resources/track.png");
-	}
-</style>
-
 <body>
 	<div id="menu">
 		<div id="buttonholder">
diff --git a/style.css b/style.css
index a6da2c2..cba62eb 100644
--- a/style.css
+++ b/style.css
@@ -1,212 +1,246 @@
-body{
-background-color:#000000;
-margin:0;
-background-image:url("resources/carcbonbg.jpg");
+body {
+    background-color: #000000;
+    margin: 0;
+    background-image: url("resources/carcbonbg.jpg");
 }
 
 @font-face {
     font-family: race;
     src: url(resources/evogria.otf);
-} 
+}
 
 #menu {
-position:fixed;
-height:100%;
-vertical-align:center;
-width:15%;--300px;
-left:0;
-border-right:1px solid black;
-background: rgb(160,0,0);
-background: -moz-linear-gradient(left,  rgba(160,0,0,1) 0%, rgba(181,0,0,1) 63%, rgba(160,0,0,1) 100%);
-background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(160,0,0,1)), color-stop(63%,rgba(181,0,0,1)), color-stop(100%,rgba(160,0,0,1)));
-background: -webkit-linear-gradient(left,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
-background: -o-linear-gradient(left,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
-background: -ms-linear-gradient(left,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
-background: linear-gradient(to right,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a00000', endColorstr='#a00000',GradientType=1 );
+    position: fixed;
+    height: 100%;
+    vertical-align: center;
+    width: 15%;
+    /* --300px; */
+    left: 0;
+    border-right: 1px solid black;
+    background: rgb(160, 0, 0);
+    background: -moz-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(160, 0, 0, 1)), color-stop(63%, rgba(181, 0, 0, 1)), color-stop(100%, rgba(160, 0, 0, 1)));
+    background: -webkit-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
+    background: -o-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
+    background: -ms-linear-gradient(left, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
+    background: linear-gradient(to right, rgba(160, 0, 0, 1) 0%, rgba(181, 0, 0, 1) 63%, rgba(160, 0, 0, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a00000', endColorstr='#a00000', GradientType=1);
 
 }
 
 #buttonholder {
-  position: relative;
-  top: 45%;
-  transform: translateY(-40%);
-  height:auto;
-  width:auto;
+    position: relative;
+    top: 45%;
+    transform: translateY(-40%);
+    height: auto;
+    width: auto;
 }
+
 .button {
-width:100%;
-height:5%;
-text-align:center;
-background: #353535;
-background: -moz-linear-gradient(top,  #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(1%,#383838), color-stop(36%,#363636), color-stop(73%,#363636), color-stop(99%,#343434), color-stop(99%,#353535), color-stop(100%,#353535));
-background: -webkit-linear-gradient(top,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
-background: -o-linear-gradient(top,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
-background: -ms-linear-gradient(top,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
-background: linear-gradient(to bottom,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#353535',GradientType=0 );
+    width: 100%;
+    height: 5%;
+    text-align: center;
+    background: #353535;
+    background: -moz-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(1%, #383838), color-stop(36%, #363636), color-stop(73%, #363636), color-stop(99%, #343434), color-stop(99%, #353535), color-stop(100%, #353535));
+    background: -webkit-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
+    background: -o-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
+    background: -ms-linear-gradient(top, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
+    background: linear-gradient(to bottom, #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#353535', GradientType=0);
 
     -webkit-transition: all 500ms ease-out;
     -moz-transition: all 500ms ease-out;
     -o-transition: all 500ms ease-out;
     transition: all 500ms ease-out;
-	transition-delay: all 500ms;
-	border-top:2px solid #363636;
-	border-bottom:2px solid #363636;
-font-color:000000;
-font-family:race;
-font-size:250%;
-text-shadow: 1px 1px #606060;
--box-shadow:inset 0 0 100px #000000;
-cursor: pointer; cursor: hand;
--webkit-user-select: none; /* Chrome/Safari */        
--moz-user-select: none; /* Firefox */
--ms-user-select: none; /* IE10+ */
-background-repeat:no-repeat;
-background-size:100%;
-margin-bottom:-2;
-overflow: hidden;
+    transition-delay: all 500ms;
+    border-top: 2px solid #363636;
+    border-bottom: 2px solid #363636;
+    font-color: 000000;
+    font-family: race;
+    font-size: 250%;
+    text-shadow: 1px 1px #606060;
+    -box-shadow: inset 0 0 100px #000000;
+    cursor: pointer;
+    cursor: hand;
+    -webkit-user-select: none;
+    /* Chrome/Safari */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* IE10+ */
+    background-repeat: no-repeat;
+    background-size: 100%;
+    margin-bottom: -2;
+    overflow: hidden;
 }
+
 .button:hover {
-height:20%;
-box-shadow:inset 0 0 100px #000000;
-text-shadow: none;
-font-color:f2f2f2;
--background-image:url("resources/linkbg.png");
+    height: 20%;
+    box-shadow: inset 0 0 100px #000000;
+    text-shadow: none;
+    font-color: f2f2f2;
+    -background-image: url("resources/linkbg.png");
 }
 
 #eagle {
-position:absolute;
-top:3%;
-left:0%;
-width:100%;
-height:18%;
-background-image:url("resources/eagle2.png");
-background-repeat: no-repeat;
--background-attachment: fixed;
-background-size:50%;
-background-position:45% 30%;
- -webkit-transition: all 1s ease-out;
+    position: absolute;
+    top: 3%;
+    left: 0%;
+    width: 100%;
+    height: 18%;
+    background-image: url("resources/eagle2.png");
+    background-repeat: no-repeat;
+    -background-attachment: fixed;
+    background-size: 50%;
+    background-position: 45% 30%;
+    -webkit-transition: all 1s ease-out;
     -moz-transition: all 1s ease-out;
     -o-transition: all 1s ease-out;
     transition: all 1s ease-out;
-	cursor: pointer; cursor: hand;
+    cursor: pointer;
+    cursor: hand;
 }
+
 #eagle:hover {
-background-image:url('resources/eagleover.png');
+    background-image: url('resources/eagleover.png');
 }
 
 #senna {
-position:absolute;
-bottom:0px;
-left:0px;
-width:100%;
-height:18%;
-background-image:url("resources/senna.png");
-background-repeat: no-repeat;
--background-attachment: fixed;
-background-size:80%;
-background-position:50% 70%;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 18%;
+    background-image: url("resources/senna.png");
+    background-repeat: no-repeat;
+    -background-attachment: fixed;
+    background-size: 80%;
+    background-position: 50% 70%;
 }
 
 .bottombox {
-position:absolute;
-bottom:0px;
-width:100%;
-height:100%;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;
 }
 
 .bs {
-position:absolute;
-bottom:0px;
+    position: absolute;
+    bottom: 0px;
 }
 
 #bar {
-position:absolute;
-height:0px;
-background:#ffffff;
-width:100%;
-top:0px;
- -webkit-transition: all 1s ease-out;
+    position: absolute;
+    height: 0px;
+    background: #ffffff;
+    width: 100%;
+    top: 0px;
+    -webkit-transition: all 1s ease-out;
     -moz-transition: all 1s ease-out;
     -o-transition: all 1s ease-out;
     transition: all 1s ease-out;
-opacity:50%;
+    opacity: 50%;
 }
+
 #bar:hover {
--height:100%;
+    -height: 100%;
 }
 
 #bar2 {
-position:absolute;
-width:0px;
-height:100%;
-background:#ffffff;
-left:0px;
--webkit-transition: all 2s ease-out;
+    position: absolute;
+    width: 0px;
+    height: 100%;
+    background: #ffffff;
+    left: 0px;
+    -webkit-transition: all 2s ease-out;
     -moz-transition: all 2s ease-out;
     -o-transition: all 2s ease-out;
     transition: all 2s ease-out;
-opacity:50%;
+    opacity: 50%;
 }
+
 #bar2:hover {
-width:100%;
+    width: 100%;
 }
 
 #wrapper2 {
-position:fixed;
-width: -moz-calc(100% - 300px);
-width: -webkit-calc(100% - 300px);
-width: -o-calc(100% - 300px);
-width: calc(100% - 300px);
-height:100%;
-left:300;
-background:url("resources/flag.png");
-background-size:50%;
-background-repeat: no-repeat;
-background-attachment: fixed;
-background-position:right bottom;
+    position: fixed;
+    width: -moz-calc(100% - 300px);
+    width: -webkit-calc(100% - 300px);
+    width: -o-calc(100% - 300px);
+    width: calc(100% - 300px);
+    height: 100%;
+    left: 300;
+    background: url("resources/flag.png");
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: right bottom;
 }
 
 #wrapper {
-position:absolute;
-width:85%;
-height:100%;
-left:15%;
-background:url("resources/lambobg.png");
-background-repeat: no-repeat;
-background-attachment: fixed;
-background-size:50%;
-background-position:right -30%;
-opacity: 1;
--webkit-transition: all 1s ease-out;
+    position: absolute;
+    width: 85%;
+    height: 100%;
+    left: 15%;
+    background: url("resources/lambobg.png");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: 50%;
+    background-position: right -30%;
+    opacity: 1;
+    -webkit-transition: all 1s ease-out;
     -moz-transition: all 1s ease-out;
     -o-transition: all 1s ease-out;
     transition: all 1s ease-out;
 }
+
 #swrapper:hover {
-opacity: 0.5;
-background-size:55%;
-}
-#panel {
-position:absolute;
-margin:auto;
-bottom:10;
-right:10;
-height: 500px;
-width:200px;
-background:black;
+    opacity: 0.5;
+    background-size: 55%;
 }
 
-#dropshadowbg {position:absolute;width:100%;height:100%;box-shadow: inset 0 0 200px #000000;}
+#panel {
+    position: absolute;
+    margin: auto;
+    bottom: 10;
+    right: 10;
+    height: 500px;
+    width: 200px;
+    background: black;
+}
+
+#dropshadowbg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0 0 200px #000000;
+}
 
 #logo {
-position:absolute;
-right:50;
-top:50;
-width:300;
-height:300;
-background-image:url("resources/logo.png");
-background-repeat:no-repeat;
+    position: absolute;
+    right: 50;
+    top: 50;
+    width: 300;
+    height: 300;
+    background-image: url("resources/logo.png");
+    background-repeat: no-repeat;
+}
+
+#b1:hover {
+    background-image: url("resources/car.png");
+}
+
+#b2:hover {
+    background-image: url("resources/sketch.png");
+}
+
+#b3:hover {
+    background-image: url("resources/cogs.png");
+}
+
+#b4:hover {
+    background-image: url("resources/track.png");
 }
\ No newline at end of file
