205 lines
3.9 KiB
CSS
205 lines
3.9 KiB
CSS
|
/* Transitions aren't quite as smooth on firefox */
|
||
|
|
||
|
:root {
|
||
|
--gradient: conic-gradient(
|
||
|
from 240deg at 50% 50%,
|
||
|
#00ffc3,
|
||
|
#00fad9,
|
||
|
#00f4f0,
|
||
|
#00eeff,
|
||
|
#00e6ff,
|
||
|
#00dcff,
|
||
|
#00d2ff,
|
||
|
#00c5ff,
|
||
|
#00b8ff,
|
||
|
#6da8ff,
|
||
|
#9f97ff,
|
||
|
#c285ff
|
||
|
);
|
||
|
}
|
||
|
|
||
|
*, *::before, *::after {
|
||
|
box-sizing: border-box;
|
||
|
font-family: "Poppins", sans-serif;
|
||
|
}
|
||
|
|
||
|
body, html {
|
||
|
-webkit-text-size-adjust: 100%;
|
||
|
-webkit-tap-highlight-color: transparent;
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
text-rendering: optimizeLegibility;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
background-color: black;
|
||
|
background-image: url(scotland-travel-destination-shutterstock-512226913.jpg);
|
||
|
background-repeat: no-repeat;
|
||
|
background-size: cover;
|
||
|
}
|
||
|
|
||
|
.headerDiv {
|
||
|
display: block;
|
||
|
position: fixed;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
a:link, a:visited, a:hover, a:active {
|
||
|
color: black;
|
||
|
}
|
||
|
|
||
|
.navDiv {
|
||
|
display: flex;
|
||
|
flex: auto;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
margin-top: 15em;
|
||
|
}
|
||
|
|
||
|
.navDiv a {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.navDiv ul {
|
||
|
list-style-type: none;
|
||
|
color: black;
|
||
|
background-color: lightblue;
|
||
|
padding: 10px;
|
||
|
}
|
||
|
|
||
|
.navDiv li {
|
||
|
font-size: x-large;
|
||
|
}
|
||
|
|
||
|
input.navDiv {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.scrollDiv {
|
||
|
overflow-y: scroll;
|
||
|
overflow-x: scroll;
|
||
|
border: 5px outset blue;
|
||
|
background-color: lightblue;
|
||
|
position: absolute;
|
||
|
margin: auto;
|
||
|
top: 10em;
|
||
|
width: 85%;
|
||
|
}
|
||
|
|
||
|
/* Define the scrollbar style */
|
||
|
.scrollDiv::-webkit-scrollbar {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
}
|
||
|
|
||
|
/* Define the thumb style */
|
||
|
.scrollDiv::-webkit-scrollbar-thumb {
|
||
|
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
|
||
|
/* Define the track style */
|
||
|
.scrollDiv::-webkit-scrollbar-track {
|
||
|
background-color: #ddd;
|
||
|
border: 1px solid #ccc;
|
||
|
}
|
||
|
|
||
|
/* Define the button style */
|
||
|
.scrollDiv::-webkit-scrollbar-button {
|
||
|
background-color: #4d7fff;
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
|
||
|
/* Define the button style when being hovered over */
|
||
|
.scrollDiv::-webkit-scrollbar-button:hover {
|
||
|
background-color: #999999;
|
||
|
}
|
||
|
|
||
|
|
||
|
table, th, td {
|
||
|
border: 1px solid black;
|
||
|
border-collapse: collapse;
|
||
|
padding: 5px;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
|
||
|
.myDiv {
|
||
|
display: block;
|
||
|
/*border: 5px outset red;*/
|
||
|
padding: 5px;
|
||
|
background-color: lightblue;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
input.myDiv {
|
||
|
display: inline;
|
||
|
}
|
||
|
|
||
|
table.myDiv, th.myDiv, td.myDiv {
|
||
|
border: 1px solid black;
|
||
|
border-collapse: collapse;
|
||
|
padding: 5px;
|
||
|
}
|
||
|
|
||
|
.aboutDiv {
|
||
|
width: 80%;
|
||
|
height: 60%;
|
||
|
position: absolute;
|
||
|
top: 10em;
|
||
|
left: 50px;
|
||
|
background-color: lightblue;
|
||
|
/*margin: 30px auto;*/
|
||
|
box-shadow: 0 0 2px gray;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
|
||
|
/* Define the scrollbar style */
|
||
|
.aboutDiv::-webkit-scrollbar {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
}
|
||
|
|
||
|
/* Define the thumb style */
|
||
|
.aboutDiv::-webkit-scrollbar-thumb {
|
||
|
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
|
||
|
/* Define the track style */
|
||
|
.aboutDiv::-webkit-scrollbar-track {
|
||
|
background-color: #ddd;
|
||
|
border: 1px solid #ccc;
|
||
|
}
|
||
|
|
||
|
/* Define the button style */
|
||
|
.aboutDiv::-webkit-scrollbar-button {
|
||
|
background-color: #4d7fff;
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
|
||
|
/* Define the button style when being hovered over */
|
||
|
.aboutDiv::-webkit-scrollbar-button:hover {
|
||
|
background-color: #999999;
|
||
|
}
|
||
|
|
||
|
.instructionsDiv {
|
||
|
border: 5px outset blue;
|
||
|
background-color: lightblue;
|
||
|
text-align: left;
|
||
|
width: 50em;
|
||
|
padding: 15px;
|
||
|
padding-left: 1em;
|
||
|
margin: auto;
|
||
|
min-height: 7em;
|
||
|
}
|
||
|
|
||
|
.pageFooter {
|
||
|
width:auto;
|
||
|
color: black;
|
||
|
background: lightgrey ;
|
||
|
padding: 1em;
|
||
|
vertical-align: bottom;
|
||
|
|
||
|
}
|