/* majorblock is my own implementation of a box setup. It aims for three boxes on display at all times */
/* I could have just used flexbox, but where's the fun in that? */

.majorblock {
    /* block properties */
    width: 33%;
    height: 500px; /* Necessary to define this one as a concrete number, otherwise things get messy */
    // opacity: 50%;

    /* text properties */
    /* shadows used on all four corners to give the text an outline appearance */
    /* This makes it legible on any background */
    color: rgb(200,200,200);
    text-shadow: -2px 0 rgb(20,20,20), 0 2px rgb(20,20,20), 2px 0 rgb(20,20,20), 0 -2px rgb(20,20,20);
    overflow: hidden;

    /* border properties */
    border: 4px solid gray;
    margin: 4px 0.333%; /* This with proper floating makes it so that it all works out */
    background-color: rgba(255,255,255,0);

    /* Background properties */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    box-sizing: border-box;
    margin-left: auto;
    float: left; /* This is the magic in the sauce that makes it all work */
}

/* Display one block per row on mobile screens */
@media screen and (orientation: portrait){
    .majorblock {
        width: 99%;
	height: 750px;
    }
   
    .pageText{
        width: 98%;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

.majorblock:hover {
    opacity: 100%;
    overflow: auto;
}

.majorblock h1 {
    padding: 0% 10%;
    text-align: center;
}

.majorblock h2 {
    padding: 10% 5%;
    text-align: center;
}

.minorblock {
    width: 99.23%; /* This is just one of those magic number scenarios */
    height: auto;

    /* text properties */
    color: rgb(200,200,200);
    text-shadow: -2px 0 rgb(20,20,20), 0 2px rgb(20,20,20), 2px 0 rgb(20,20,20), 0 -2px rgb(20,20,20);
    text-align: center;
    font-size: 1.5em;

    /* border properties */
    border: 4px solid gray;
    background-color: lightgray;
    float: left;
}

.minorblock p {
    padding: 0px 5%;
}

.titlebar {
    width: 100%;
    height: auto;
    margin: 10px 0px 50px 0px;
    background-color: rgb(200,200,200);
    box-shadow: 0px 0px 5px 5px rgb(200,200,200);
    float: left;
    border-radius: 10px;
}

.titlebar h1 {
    color: rgb(20,20,20);
    margin: 20px 5%;
    font-size: 2em;
    float: left;
}

.pageText {
    margin: 0% 10%;
    background-color: rgb(200,200,200);
    box-shadow: 0px 0px 10px 10px rgb(200,200,200);
    float: left;
}

.pageText p {
    /* text properties */
    color: rgb(20,20,20);
    text-shadow: 0px 0px 3px 3px rgb(20,20,20);
    font-size: 1.5em;
}

.darkmode {
    background-color: rgb(20,20,20);
    box-shadow: 0px 0px 10px 10px rgb(20,20,20);
}

.darkmode p {
    color: rgb(200,200,200);
    text-shadow: 0px 0px 3px 3px rgb(200,200,200);
}

.darkmode h1 {
    color: rgb(200,200,200);
    text-shadow: 0px 0px 3px 3px rgb(200,200,200);
}

.darkmode ul {
    color: rgb(200,200,200);
    text-shadow: 0px 0px 3px 3px rgb(200,200,200);
}

.darkmode a {
    color: rgb(200,200,200);
    text-shadow: 0px 0px 3px 3px rgb(200,200,200);
}

.darkmode #darktoggle button {
    background-color: rgb(200,200,200);
    color: rgb(20,20,20);
    box-shadow: 0px 0px 3px 3px rgb(200,200,200);
}

#darktoggle {
    margin: 15px 20px;
    display: inline;
}

/* Kindly borrowed from w3schools */
#darktoggle button {
    background-color: rgb(20,20,20);
    border: none;
    box-shadow: 0px 0px 3px 3px rgb(20,20,20);
    color: rgb(200,200,200);
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 1.5em;
    cursor: pointer;
}

a {
    color: rgb(20,20,20);
    text-decoration: none;
}

p::first-line {
    text-indent: 2em;
}

body {
    font-family: serif;
    background-color: teal;
    background-image: url(background.jpg);
    background-size: cover;
}

/* This just makes the scrollbar look nicer. Even though it's not a W3C standard, it's used widely enough */
/* Kindly borrowed from w3schools: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */
/* Properties of the scrollbar in totality */
::-webkit-scrollbar {
    width: 5px;
}

/* Properties of the track */
::-webkit-scrollbar-track {
  background: rgb(200,200,200);
}

/* Properties of the scroll handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

/* Handle on hover pseudoclass */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}