/* Hantek Website Styles */
/* Version: 3.0 */

/* Note to self: Actually make decent comments so I can understand them later.
It's quite annoying not knowing what " % or px ?? " means. Actually state the damn question. */

/* <<<------ <<<------ <<COLOURS>> ------>>> ------>>> */
:root {
    --col-bg-lt: rgba(255,255,255,0.85);
    --col-bg-dk: rgba(25,25,25,0.85);
    --col-h-orange: #ffbc80;
    --col-h-purple: #e07fff;
    --col-h-blue: #80b9ff;
    color-scheme: light; /* `light dark` for light and dark theme. delete not wanted for single theme e.g. set `light` for light theme only */
}

/* <<<------ <<<------ <<KEY PARTS>> ------>>> ------>>> */
/* Sets default styling for everything */
* {
    font-family: Caveat Brush;
    color: light-dark(black, lightgray);
    text-decoration: none;
    text-align: left;
    margin: 0;
    padding: 0;
    max-width: 100vw;
}

html {
    background-image: url("./assets/images/background.png");
    background-position: top left;
    background-size: 50%;
    background-repeat: repeat;
}
html.paws {
    background-image: url("./assets/images/background-paws.png");
}

body {
    margin: 0 auto; /* 1st value sets top/down 2nd sets left/right */
    display: grid; /* grid: 6 across 4 down */
    height: 100vh; /* #vh is percentage of the view height (view window) */
    grid-template-areas:
    "hdr hdr hdr hdr hdr"
    "mai mai mai mai mai"
    "ftr ftr ftr ftr ftr";
    grid-template-rows: min-content auto min-content;
}

.gradient_border {
    border-color: linear-gradient(45deg,#ffbc80, #e07fff, #80b9ff);
    border-radius: 10px;
}

/* <<<------ <<<------ <<HEADER>> ------>>> ------>>> */
 header {
    grid-area: hdr;
    /*
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 1vh 1vw 2vh 1vw;
    padding: 0 10vw;
    */
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    height: min-content;
    background-color: light-dark(var(--col-bg-lt), var(--col-bg-dk));
    border-radius: 20px;
 }
/* <<<------ <<Navigation>> ------>>> */
.nav_logo {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-content: center;
}
.nav_menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.nav_menu_item {
    font-size: 20pt;
    border-radius: 20px;
    padding: 4px;
    margin: auto 1%;
    background-color: light-dark(white,black);
    width: fit-content;
    height: fit-content;
    text-align: center;
    text-wrap: nowrap;
}
.nav_other {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-content: center;
    flex-wrap: wrap;
    width:min-content;
}

/* <<<------ <<<------ <<MAIN>> ------>>> ------>>> */
main {
    grid-area: mai;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom:auto;
    padding: 1%;
    background-color: light-dark(var(--col-bg-lt), var(--col-bg-dk)); /* Semi-transparent background */
    border-radius: 20px;
    max-width: 60vw;
    min-width: 50%;
}

.main_title {
    text-align: center;
    font-size: 50pt;
    margin: 0;
}
/* <<<------ <<Profile>> ------>>> */
.main_profile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.main_profile_picture {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.main_profile_bio {
    flex-basis: 60%;
    display: flex;
    flex-direction: row;
    justify-content: left; /* mobile justify center */
    align-content: center;
    font-size: 30pt; /* consider putting in not this */
}
/* <<<------ <<<------ <<FOOTER>> ------>>> ------>>> */
footer {
    grid-area: ftr;
    height:min-content;
    margin: 8vh 0 0 0;
    background-color: light-dark(white,black);
    display: grid;
    grid-template-areas:
    "fslg fsmc fsmc fsmc fsmc"
    "fhlg fhmc fhmc fhmc fhmc";
}

/* <<<------ <<Social>> ------>>> */
.footer_social {
    grid-area: fsmc;
}
/* <<<------ <<Hantek>> ------>>> */
.footer_hantek_logo {
    grid-area: fhlg;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-content: center;
}
.footer_hantek_text {
    grid-area: fhmc;
}


/* <<<------ <<<------ <<MEDIA>> ------>>> ------>>> */
.media-pfp { /* Look at object-fit and changing the size of the container*/
    border-radius: 100%;
    /* height: 80%; /* width makes it long? height keeps it 1:1 - height does not keep it 1:1 when in portrait???*/
    max-width: 450px;
    max-height: 450px;
    scale: 80%;
    margin: auto; /* used for centering in the flex container */
}
.media-refsheet {
    border-radius: 20px;
    margin: 0 auto;
    height: 90%;
}

/* <<<------ <<<------ <<MOBILE>> ------>>> ------>>> */
/* This changes stuff for mobile (if the display width is less than max-width) */
@media (max-width:1000px) {
    main {
        max-width: 90vw;
    }
    .text_dynamic {
        text-align: center;
    }
}


/* <<<------ <<<------ <<FONT>> ------>>> ------>>> */

.caveat-brush-regular {
    font-family: "Caveat Brush", cursive;
    font-weight: 400;
    font-style: normal;
  }