/* 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;
    height: 100%;
    margin: 0;
}

body {
    background-color: black;
    background-image: url(scotland-travel-destination-shutterstock-512226913.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

.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:100%;
    color: black;
    background: lightgrey ;
    padding: 1em;
    margin-top: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
}