/* All other styles and stuff go here */

p {
    white-space: pre-wrap;
}
/* NOTE: Now, all normal text/terminal logs use p elements instead of divs. Divs are for ASCII art or other things ONLY */

.flexbox {
    display: flex;
    justify-content: space-between;
}

.left-align {
    text-align: left;
    padding-left: 5px;
}

.right-align {
    text-align: right;
    padding-right: 5px;
}

/* Blink effect */
@keyframes blink {
    0% { color: transparent; }
    100% { color: var(--text-color); }
}

span.blink { /* Apply to span to make certain portions of a text blink. */
    animation: blink 0.9s ease-in-out infinite alternate;
}

/* Text/hidden buttons */
.text-btn {
    border: none;
    background-color: inherit;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    display: inline-block;
}

.text-btn:hover { /* If a text-btn is being hovered, this happens: */
    background-color: rgb(33, 33, 33);
    /* Remember, if the red, green and blue values are all the same, the result is monochrome from white to black.
    I hope you still remember that from Beton Brut */
}

/* Collapsible styles */
.collapsible {
    color: inherit;
}

.collapsed {
    display: none;
}

.active:hover {
    background-color: rgb(69, 69, 69);
}

.centre { /* Centre elements, like divs (recycled from the Canary HTML page ) */
    margin: auto;
    width: 50%;
    /* Note: centre does nothing if width is not set or set to 100% */
}

.centred-window {
    margin: auto;
    width: 69%;
    margin-top: 5%;
    /* I still want space on the top and bottom */
}

/* Header */
.main-header {
    position: sticky;
    top: 0;
    padding: 10px 16px;
    z-index: 1;
}
/* stick makes the position of the element stick based on your scroll.
To use it, top, bottom, left, or right must be specified so it can stick to there */

/* Header nav bar + drop down menu styles */
.navbar {
  overflow: hidden;
}

.navbar a {
  float: left;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

.dropdown-left {
    border-style: solid double solid dotted; /* Mixed borders */
}

.dropdown-right {
    border-style: solid dotted solid double; /* Mixed borders */
}

.dropdown .dropbtn {
  font-size: 14px;  
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #33ff33;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(21, 21, 21);
  border: dashed;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(51, 255, 0, 0.35);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border: dotted;
}

.dropdown-content a:hover {
  background-color: rgb(69, 69, 69);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Magic ribbon screen */
.canvas-videotron {
    display: block;
	/* Fill canvas with black by default */
	background: #000;
    /* I tried setting the background to an image and it sorted of worked */
    border: dashed;
}

/* Centred buttons */
.centred-btn {
    margin: 0;
    margin-top: 10px;
    position: relative;
    height: 10%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%); /* 2d transform with x and y coords, like 3d transform ...but not 3d */
    -ms-transform: translate(-50%, -25%);
    /* Kind of faulty but works best if you set the div's position to relative and set its height */

    /* CSS to make the button look like a h3 element */
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: bold;
}

/* Fake h1 element */
.fake-h1 {
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

/* Images */
.portrait {
    max-width: 100%;
    max-height: 350px;
}

.landscape {
    width: 350px;
    height: 240px;
}

.centred-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    /* left and right margin must be auto and display set to block for it to work */
}

/* Footer styles */
.main-footer { 
    display: flex;
    justify-content: center;
    width: 100%;
}

.left-footer {
    margin-right: auto; 
    margin-left: 40px;
}

.right-footer {
    margin-left: auto;
    margin-right: 40px;
}

.centre-footer {
    margin-left: 20px;
    margin-right: 20px;
}

.info-left {
    text-align: left;
    width: 100%;
}
.info-right {
    text-align: right;
    width: 100%;
}

.info-centre {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    border-top: transparent;
}

/* Media query stuff for compatability and responsiveness and stuff */
/* @media (max-width: 600px) {
    *:not(div.ASCII-animation-container.ASCII-art):not(pre.ASCII-animation-output.ASCII-art) {
        font-size: 2vw; /* vw is 1% of the viewport's width. vh is the same but with viewport height
        margin: 2px;
    }
    /* The universal selector above messed up the spritesheet to ASCII stuff, so I found out you can exclude
    elements from selectors with the :not() CSS pseudoclass.
    
    NOTE :
    
    It's still kind of faulty for the spritesheet to ASCII animation elements.
    
    It works when you first load the page, but the moment you resize it, everything destroys itself and
    the animation flys off.
    
    So let's just hope no one resizes the x-axis while looking at the webpage and doesn't see what happens if you do. */
    
    /* I'm just going to leave that to fix some other day then

    #ribbon-window {
        overflow-x: scroll;
    }
} */

/* I FIXED IT. IT'S CALLED, 'NOT USING THE FAULTY CODE'.

I'll find a way to fix it someday. Just not now. */