/* BACKGROUND */
html {
    /* background-color: #fff8e7; */
    background-color: #ffffff;
}

/* HEAD */
head {
    /* background-color: #fff8e7; */
    background-color: #ffffff;
}

/* MAIN BODY */
/* -------------------------------------------------------------- */
body {
    color: #000000cc;
    /* background-color: #fff8e7; */
    background-color: #ffffff;
    font-size: 15pt;
    font-family: "Lato", sans-serif;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* headings */
h1 {
    font-family: "Lato", sans-serif;
    font-size: 40pt;
    /* color: #002010; */
    color: #14213d;
    /* color: #001020; */
    text-align: center;
}

h2 {
    font-family: "Lato", sans-serif;
    /* color: #003022; */
    /* color: #002060; */
    color: #001030;
    font-size: 26pt;
}

h3 {
    font-family: "Lato", sans-serif;
    color: #203050;
    /* color: #204090; */
    font-size: 15pt;
    text-align: left;
}

/* On smaller screens, where width is less than 500px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 500px) {
    h1 {font-size: 20pt;}
    h2 {font-size: 13pt;}
    h3 {font-size: 11pt;}
}

p a {
   color: #ae2bae; 
   text-decoration: none;   
}
    p a:hover {
        color: #002040;
        text-decoration: none;
    }

nav ul {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex; 
    flex-direction: row; 
    justify-content: space-around;
    /* background-color: #00000010; */
    border-radius: 0px;
    font-size: 11pt;
}

nav ul li {
    list-style-type: none; 
    margin-right: 2%; 
    margin-left: 2%; 
    text-align: center;
    font-weight: bold;
}

nav ul li a {
    color: #502050;
}

@media screen and (max-width: 500px) {
    nav ul {flex-direction: column;}
    nav ul li {text-align: left;}
    }

nav ul li a:hover {
    color: #fcc367;
    font-weight: bold;
}

th, td {
    border-radius: 10px;
    border-style: outset;
  }

/* FOOTER */
/* --------------------------------------------------------------- */
footer {
    margin-left: 15%;
    text-align:center; 
    font-size: 10px; 
    bottom: 0%;
    left: 50%;
    right: 10%;
    margin: 0 auto;
}

    footer nav ul {
        margin-left: 15%;
        /* background-color: #000000dd; */
        background-color: #202020;
        padding: 0.5em;
        border-radius: 0px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

        footer nav ul li {
            margin-left: 15%;
            color: #ffffff;
            list-style-type:none; 
            margin-right:0.5em; 
            margin-left:0.5em; 
            text-align:center;
        }

        /* On smaller screens, where width is less than 500px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 500px) {
    footer {margin-left: 10%;}
    footer nav ul li {font-size: 4pt;}
    }

/* SIDEBAR */
/* --------------------------------------------------------------- */
/* sidebar menu */
.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 15%;/* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    /* background-color: #000000dd; */
    background-color: #202020;
    /* background-color: #22223b; */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
  }

    .sidenav span {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: #000000;
        display: block;
    }

    .sidenav li { /* for contact details */
        /* padding: 6px 8px 6px 16px; */
        text-decoration: none;
        font-size: 10px;
        color: #fff8e7;
        display: block;
    }

        .sidenav li a {
            /* padding: 6px 8px 6px 16px; */
            text-decoration: none;
            font-size: 10px;
            color: #fff8e7;
            display: block;
        }

            .sidenav li a:hover {
                color: #003022;
            }

/* navigation menu links */
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #003022;
        }
  
  /* Style page content */
  .main {
    justify-content: center;
    max-width: 85%;
    margin-left: 15%; /* Same as the width of the sidebar */
    padding: 0px 0px;
  }

    .main p {
        padding: 0 5%;
    }

    .main h2 {
        padding: 0 5%;
    }

    .main h3 {
        padding: 0 5%;
        text-align: left;
    }

        .main nav li {
            list-style-type: none;
            text-decoration: none;
        }

            .main nav li a{
                text-decoration: none;
                font-size: 20pt;
                color: #502050;
            }

                .main nav li a:hover {
                    color: #003022;
                }
    .main .cardContainer {
        padding: 10px 10px;
        margin-left: 5%;}

    /* .main p a {
        color: #903090;
        text-decoration: none;
    }

        .main p a:hover {
            color: #003022;
        } */
  
  /* On smaller screens, where width is less than 1500px, change the style of the sidebar (less padding and a smaller font size) */
  @media screen and (max-width: 500px) {
    .sidenav {padding-top: 15px; font-size: 10pt; width: 25%;}
    .sidenav a {font-size: 10pt;}
    .sidenav span {font-size: 10pt;}
    .sidenav li a b {font-size: 4pt;}
    .main {margin-left: 25%;}
    .main p {padding: 0px 15px; font-size: small;}
  }

/* FOR CARDS */
.cardContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px 10px;
    max-width: 90%;
    margin-left: 5%;
  }

/* Float four columns side by side */
.column {
    float: left;
    width: 23%;
    padding: 0 10px;
  }

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 5%;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.card {
    color: black;
    background-color: #ffffff;
    background: linear-gradient(180deg, #002015 0px, #002015 65px, white 65px, white 100%);
    border-style: solid;
    border-color: #808080;
    border-radius: 10px;
    border-width: 0.05cap;
    box-sizing: border-box;

    font-size: 11pt;
    font-family: Arial, sans-serif;
    text-decoration: none;

    padding: 0px 0px;
    height: 500px;
}
  
    .card:hover {
        background-color: #ffffff;
        box-shadow: 0px 0px 15px #00000050;
    }

    .astroCard {
        /* background: linear-gradient(180deg, #401040 0px, #401040 65px, white 65px, white 100%); */
        background: linear-gradient(180deg, #601010 0px, #601010 65px, white 65px, white 100%);
        height: 365px;
    }
    .mathsCard {
        /* background: linear-gradient(180deg, #401040 0px, #401040 65px, white 65px, white 100%); */
        background: linear-gradient(180deg, #101060 0px, #101060 65px, white 65px, white 100%);
        height: 365px;
    }

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }
  }

    .card h3 {
        color: white;
    }

    .card:hover h3 {
        color: white;
    }

.cardText {
    float: left; 
    width: 70%; 
    font-size: 11pt;
}

.mediumPictures {
    float:inline-end;
    height: 140px;
    max-width: fit-content;
    padding: 5px 10px;
}

.largePictures {
    float: inline-end;
    height: 200px;
    max-width: fit-content;
}

.center { /* centre an image */
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 50%; */
    width:fit-content;
  }

/* On smaller screens, where width is less than 500px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 500px) {
    .card {height: 15px;}
    .card p {font-size: 4pt;}
    .card h3 {font-size: 10pt;}
    .mediumPictures {height: 10px;}
}

/* BACKGROUND IMAGE - MAIN*/
.back-image {
    background: url(header2.png) no-repeat center;
    position: fixed;
    opacity: 1.00; 
    background-size: cover;
    height: 250px;
    position: relative;
  }
  
  .back-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

/* BACKGROUND IMAGE - PROJECTS*/
.back-image-proj {
    background: url(projects/proj-header.jpg) no-repeat center;
    position: fixed;
    opacity: 1.00; 
    background-size: cover;
    height: 250px;
    position: relative;
  }

/* BACKGROUND IMAGE - CVS*/
.back-image-cv {
    background: url(cvs/cv-header.jpg) no-repeat center;
    position: fixed;
    opacity: 1.00; 
    background-size: cover;
    height: 250px;
    position: relative;
  }

/* EMBEDDED PDFS */
.pdf {
    justify-content: center;
    width: 90%; 
    height: 1000px; 
    margin-left: 5%;
}

/* THE PLANETS */
/* individual pages */
.mercury {
    color: #909090;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .mercury h3 {
        color: #cccccc;
        font-size: 30pt;
    }

.venus {
    color: #c1ac7c;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .venus h3 {
        color: #c18f17;
        font-size: 30pt;
    }

.earth {
    color: #608e10;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .earth h3 {
        color: #254f98;
        font-size: 30pt;
    }

.moon {
    color: #808080;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .moon h3 {
        color: #404040;
        font-size: 30pt;
    }

.mars {
    color: #451804;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .mars h3 {
        color: #e77d11;
        font-size: 30pt;
    }

.jupiter {
    color: rgb(201, 57, 98);
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .jupiter h3 {
        color: #e1b259;
        font-size: 30pt;
    }

.saturn {
    color: #f5d598;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .saturn h3 {
        color: #c25b5b;
        font-size: 30pt;
    }

.uranus {
    color: #afdbf5;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .uranus h3 {
        color: #62aee7;
        font-size: 30pt;
    }

.neptune {
    color: #74d6fd;
    font-weight: bold;
    font-size: small;
    padding: 20px 20px 20px 20px;
    background-color: #000000df;
}

    .neptune h3 {
        color: #1f2255;
        font-size: 30pt;
    }

/* planet buttons */
.changeButton {
    color: white; 
    font-weight: bold;
    background: #00000060; 
    border: none;
    border-radius: 40%;
    margin-left: 41%;
    height: 30px;
}

    .changeButton:hover {
        box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
        transform: translateY(-2px);
        transition: all 0.1s ease-out;
        background-color: #003022;
    }

.planButton {
    background: transparent !important; 
    border: none !important; 
    font-size: 0;
    border-radius: 50%;
    width: 75px;
}

    .planButton:hover {
        filter: brightness(50%);
    }

/* overall planet page format */
.planetPage {
    color: #ffffff;
    font-weight: bold;
    padding: 10px 10px 10px 10px;
    background-color: #000000df;
    height: 65px;
}

#planetSectImage {
    margin-right: 0%;
}

/* circle buttons */
a text {
    font-size: 14pt;
}

    a:hover text {
        fill: #000000cc;
    }

a:hover circle { 
    fill: #818181;
}

.cvCircle:hover {
    fill: #007060;
}

/* languages pages */
.polishContents {
    list-style-type: none;
    text-decoration: none;
    font-weight: bold;
    color: #dc143c;
}

    .polishContentLink {
        text-decoration: none;
        color: #dc143c;
    }

    .polishItem:hover {
        color: #500606;
    } 

.polishPhrase {
    color: #8a0d26;
}

.polishPronunciation {
    color: #fff8e7;
}

    .polishPronunciation:hover {
        color: #8a0d2633;
    }

/* materials pages */
.button {
    border: none;
    color: #ffffff;

    /* padding: 35px 70px; */
    padding: 15px 32px;
    border-radius: 10px;
    width: fit-content;

    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;

    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    }

    .projectButton {
        background-image: linear-gradient(20deg, #000030 0%, #050540 70%, #3030aa 100%);
        /* background-image: url(projects/button-background.png); */
        border-style: groove;
    }

        .projectButton:hover {
            /* background-image: linear-gradient(20deg, #05050550 20%, #20202050 60%, #70707050 100%); */
            box-shadow: 4px 4px 4px #00000050;
        }
    .acCVButton {
        /* background-image: linear-gradient(20deg, #202020 0%, #202020 35%, #707070 100%); */
        background-image: url(cvs/blackboard.png);
        border-style: groove;
    }
        .acCVButton:hover {
            /* background-image: linear-gradient(20deg, #05050550 20%, #20202050 60%, #70707050 100%); */
            box-shadow: 4px 4px 4px #00000050;
        }
    .genCVButton {
        color: #000000dd;
        background-image: url(cvs/genCVbutton.png);
        border-style: groove;
    }
        .genCVButton:hover {
            /* background-image: linear-gradient(20deg, #05050550 20%, #20202050 60%, #70707050 100%); */
            box-shadow: 4px 4px 4px #00000050;
        }
    .astroButton {
        background-image: url("projects/PN_head.jpg");
        color: #fff8e7dd;
        width: 100%;
        padding: 35px 60px;
        border-style: groove;
    }

        .astroButton:hover {
            box-shadow: 0px 0px 7px black;
        }

    .physicsButton {
        background-image: url("projects/rocket.jpeg");
        color: #fff8e7dd;
        width: 100%;
        padding: 35px 60px;
        border-style: groove;
    }
    
        .physicsButton:hover {
            box-shadow: 0px 0px 7px black;
        }

    .mathsButton {
        background-image: url("projects/consciousness.jpeg");
        color: #fff8e7dd;
        width: 100%;
        padding: 35px 60px;
        border-style: groove;
    }
    
        .mathsButton:hover {
            box-shadow: 0px 0px 7px black;
        }

.chemButton {
        background-image: url("projects/chembutton2.png");
        color: #fff8e7dd;
        width: 100%;
        padding: 35px 60px;
        border-style: groove;
        }
    
        .chemButton:hover {
            box-shadow: 0px 0px 7px black;
        }

.topicList {
    list-style-type: none;
}

    .topicListItem {
        text-decoration: none;
        color: #502050;
    }

        .topicListItem:hover {
            color: #994099;
        }

.mathsNumbers {
    background-color: #99409920; 
    border-radius: 10px; 
    width: 90%; 
    padding: 10px 10px;
}

.materialsContents {
    width: 100%; 
    /* width:fit-content; */
    border-radius: 10px;
    padding: 10px 10px;
    list-style-type: none; 
    text-align: left; 
    font-size: small;
    /* background-color: #fae8bedd; */
    background-color: #101020;
    text-decoration: none;
    overflow: hidden;
}
    .materialsContents li a {
        color: #300530;
        text-decoration: none;
        font-weight: bold;
        float: left;
        display: block;
        border-radius: 2px;
        padding: 6px 6px;
        margin: 5px 5px;
        /* border: #300530; */
        border: none;
        border-radius: 5px;
        /* border-style: solid; */
        background-color: #fff8e7aa;
    }
        .materialsContents li a:hover {
            color: #751575;
            background-color: #fff8e7;
            box-shadow: 5px 2px 5px #00000050;
        }

.sectionContents {
    width: 90%; 
    border-radius: 10px;
    padding: 10px;
    margin-left: 30px;

    list-style-type: none; 
    text-align: left; 
    font-size: small;
    background-color: #25002560;
    /* background-color: none; */
    text-decoration: none;
    overflow: hidden;
}
    .sectionContents li a {
        float: left;
        display: block;
        /* color: #007060; */
        color: #000020;
        padding: 10px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
    }
    .sectionContents li a:hover {
        color: #204090;
    }

/* .astroSection {
    width: 90%;
    border-radius: 10px;
    padding: 10px 10px;
    margin-left: 30px;
    background-color: #001020;
    font-size: medium;
}
    .astroSection h2 {
        color: #fff8e7;
    }
    .astroSection h4 {
        color: #fff8e7ee;
        margin-left: 30px;
    }
    .astroSection p {
        color: #aaaaaa;
    }
    .astroSection figure figcaption{
        color: #fff8e7ee;
    }
    .astroSectionDetail {
        background-color: #ffffff90;
        border-radius: 10px;
        width: 90%;
        padding: 10px 10px;
    }
        .astroSectionDetail p {
            color: #002015;
        }
        .astroSectionDetail figure figcaption{
            color: #000;
        } */

 .materialSection {
    width: 90%;
    border-radius: 10px;
    padding: 10px 10px;
    margin-left: 30px;
    background-color: #fff8e7aa;
    font-size: medium;
}
    .materialSection h2 {
        color: #000;
    }
    .materialSection h4 {
        color: #001030;
        margin-left: 30px;
    }
    .materialSection p {
        color: #252525;
    }
    .materialSection figure figcaption{
        color: #250025;
    }
    .materialSection .equation {
        text-align: center; 
        color: #fff8e7cc; 
        font-style: italic; 
        font-weight: bold; 
        background-color: #001020aa; 
        padding: 10px 10px; 
        border-radius: 5px;
    }
        .materialSection span.bottom {
            border-top: #fff8e7aa;
        }
    .materialSectionDetail {
        background-color: #001020;
        border-radius: 10px;
        width: 90%;
        padding: 10px 10px;
    }
        .materialSectionDetail h4 {
            color: #fff8e7;            
        }
        .materialSectionDetail p {
            color: #fff8e7cc;
        }
        .materialSectionDetail figure figcaption{
            color: #90ddff;
        }
        .materialSectionDetail .equation {
            text-align: center; 
            color: #001020aa; 
            font-style: italic; 
            font-weight: bold; 
            background-color: #fff8e7aa; 
            padding: 10px 10px; 
            border-radius: 5px;
        }
            .materialSectionDetail span.bottom {
                border-top: #001020aa;
            }

.important {
    color: #904020;
}

/* make a fraction */
.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: solid;
}
.frac span.symbol {
    display: none;
} 

.navButtons {
    float: right;
}
    .navButtons a {
        text-decoration: none;
    }
    .navButtons span {
        color: #fff8e7aa;
        /* background-image: url("projects/PN_head.jpg"); */
        background-color: #202020;
        border-style: groove;
        border-color: #101010aa;
        border-radius: 4px;
        padding: 5px 5px;
        margin-left: 5px;
        font-size: small;
    }
    .navButtons span:hover {
        background-color: #303030;
    }

/* toggles */
details > summary {
    width: fit-content;
    padding: 10px 10px;
    background-color: #ffffffaa;
    box-shadow: 4px 4px 4px #00000050;
    border: none;
    cursor: none;
  }
  
  details > p {
    background-color: #eeeeee;
    padding: 4px;
    margin: 0;
    box-shadow: 1px 1px 2px #bbbbbb;
  }

.placeLink {
    font-size: small; 
    color: #e5e5e5;
    text-decoration: none;
    float: left;
}
    .placeLink:hover {
        color: #101010;
    }

#left-element{
     float:left;
}
#right-element{
     float:right;
}

/* for creating an image gallery */
* {
  box-sizing: border-box;
  height: fit-content;
}

.row > .column {
  padding: 0 8px;
}

.column {
  float: center;
  width: 20%;
  padding: 5px;
}

.row::after { /* Clearfix (clear floats) */
  content: "";
  clear: both;
  display: table;
}

.frontCards {
    width: 23%; 
    padding: 0px 0px; 
    border-style: solid; 
    border-color: black; 
    /* background-color: #e5e5e5;  */
    background-color: #14213d;
    border-radius: 20px; 
    margin-left: 5%; 
    margin-right: 5%; 
    font-size: small; 
    /* color: black;  */
    color: #ffffff;
    box-shadow: 10px 10px 15px #00000090;
}