/* Got this from https://github.com/thelearn-tech/hacker-theme  Modified it a bit */
body {
    margin: 0;
    padding: 0;
    background-color: #000918;
    line-height: 1.5;
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #D4AF37;
    line-height: 1.5;
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
    text-align: center;
}

h1 {
    font-size: 50px
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 23px;
}

p {
    color: #D4AF37;
    font-size: 19px;
    width: 750px;
    padding: 15px;
    margin: 15px auto;
    text-align: center;
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
}


/* links/a tags */
a{
    text-decoration:none;
}
/* unvisited */
a:link {
    color: green;
}

/* visited  */
a:visited {
    color: violet;
}

/* mouse over. Has to be put third  */
a:hover {
    color: hotpink;
}

/* selected. Has to be put last  */
a:active {
    color: lightblue;
}

/* a, or anchor, tags end here */
hr {
    border: 0;
    border-top: 2px solid #DCDCDC;
}

/* Lists */
ul {
    list-style: none;
}

ol {
    display: table;
    margin-left: 0;
    margin-right: auto;
    list-style-position: inside;
}

dl {
    color: #FFFFFF;
    text-align: center;
}

dt {
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    margin: 15px auto;
    width: 750px;
}

dd {
    margin: 15px auto;
    width: 750px;
}
/*The below is used for unordered (ul) and order (ol) lists */
li {
    color: #FFFFFF;
    font-size: 19px;
    text-align: center;
    margin: 15px auto;
    width: 750px;
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
}

/* end of list things*/

abbr {
    cursor: help;
}

.icon {
    padding: 30px;
    font-size: 30px;
    width: 75px;
    text-align: center;
    text-decoration: none;
}

blockquote {
    border-left-style: dotted;
    border-left-width: 1px;
    border-left-color: gray;
    color: #8D8D8D;
    padding: 20px;
}

td {
    color: #FFFFFF;
    border-spacing: 20px;
    text-align: left;
    padding: 8px;
}

th {
    color: #FFFFFF;
    border-bottom: 1px dashed #B5E853;
    text-align: left;
    padding: 8px;
}



/* images  */
.smallimg {
    padding: 15px;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
}

.largeimg {
    background-attachment: fixed;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    max-height: 100%;
    display: block;
}


.button {
    text-decoration: none;
    text-align: left;
    background-color: #121212;
    color: white;
    border: 2px solid #000000;
    border-radius: 15px;
    padding: 10px 14px;
    font-size: 14px;
    display: inline-block;
    padding-left: 10px;
}

/*  font style  */
.bold {
    font-weight: bold;
    color: #B5E853;
}

.attention {
    font-weight: bold;
    color: #B5E853;
    text-decoration: underline;
}


/* margin */
.leftmar {
    margin-left: 30px;
}

.rightmar {
    margin-right: 30px;
}

/* Top bar */
.navbar {
    display: flex;
    list-style: none;
    text-align: right;
    align-items: center;
    overflow: hidden;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown,
.logo,
.topbtn {
    border: none;
    outline: none;

    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;

}

.logo,
.topbtn {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.topbtn {
    font-size: 1.5rem;
}

.topbtn:visited, .topbtn:link {
    color: #FFD700;
}
.topbtn:hover, .logo:hover{
 background-color: #ddd;
}
.logo, .logo:visited, .logo:link {
    font-size: 2rem;
    color: #FFD700;
    /* Apparently, rem is better than px */
}

.logo::before {
    content: "> ";
}


.logocontent {
    display: none;
    position: absolute;
    background-color: #2A2A2A;
    min-width: 5rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown:hover .logocontent {
    display: block;
    /* Without the comma, it shows what happens to logocontent when dropdown is hovered */
}

.logocontent a {
    color: #FFD700;
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 2rem;
}
.logocontent a:hover {
    background-color: #ddd;
}

.logocontent a:hover::before {
    content: " > ";
}

/* padding */
.topp {
    padding-top: 10px;
}

.left {
    padding-left: 30px;
}

.midleft {
    padding-left: 250px;
}

.bigleft {
    padding-left: 500px;
}

/* my spacing */
.bigspace {
    margin-top: 300px;
}

.medspace {
    margin-top: 150px;
}

.smalspace {
    margin-top: 75px;
}

/* Font size */
.medium {
    font-size: 15px;
}
/*Animations */
.fadein{
    animation-name: fadeInFromTop;
    /* Comes from the animation thing at the bottom*/
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

/* Genuine Keyframes (Part of Animations) */
@keyframes fadeInFromTop {

    /* Goes from not being able to be seen to seeable, coming from za top */
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No more animations */
/* Mobile View */
@media (max-width: 600px) {


    p {
        width: 100%;
    }

}


/*End of Mobile View  */
/* Reduced animation */

@media (prefers-reduced-motion: reduce) {
.fadein{
     animation-duration: 0.1s;
    animation-fill-mode: forwards;
}
}

/* End of reduced animation */