@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
/* BROWSER RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Sizing includes margin/padding, unlike content-box */
}

:root {
/* || VARIABLES || */
    /* || GENERAL || */
    --FF: "Ninito", sans-serif;
    --FS: clamp(11px, 1.25vw, 24px);
    --FS-BIG: 1.667rem;
    /* || COLORS || */
    --FC: whitesmoke;
    --BGCOLOR: #140F2D;
    --RADIAL-BGCOLOR: #312d46;
    --GEN-SECCOLOR: #F49D37;  /* General Secondary Color */
    --GEN-DARKCOLOR: #f49c3781;
    --DEV-SECCOLOR: #3F88C5;  /* Developer Secondary Color */
    --DEV-DARKCOLOR: #3f89c581;
    --MUS-SECCOLOR: #D72638;  /* Music Secondary Color */
    --MUS-DARKCOLOR: #d7263883;
    /* || FORMAT || */
    --BORDER-RAD: 1.875rem;

    
    
}
html {
    font-size: var(--FS);
}

body {
    font-family: var(--FF);
    color: var(--FC);
    background-image: linear-gradient(var(--RADIAL-BGCOLOR), var(--BGCOLOR));
    min-height: 100vh;
}

abbr {
    text-decoration: none;
}

/* Sets font color to define a category (development, music, general/soft-skills */
.gen {
    color: var(--GEN-SECCOLOR);
}

.dev {
    color: var(--DEV-SECCOLOR);
}

.mus {
    color: var(--MUS-SECCOLOR);
}

.titles {
    font-size: var(--FS-BIG);
}

/* Basic style of all boxes */
.box {
    border: 2px solid;
    border-radius: var(--BORDER-RAD);
}

/* Styling of categorical boxes */
.devBorder {
    border-color: var(--DEV-SECCOLOR);
}
.musBorder {
    border-color: var(--MUS-SECCOLOR);
}
.softBorder {
    border-color: var(--GEN-SECCOLOR);
}

hr {
    border: none;
    height: 2px;
    background-color: var(--GEN-SECCOLOR);
    width: 100%;
}

/* <hr> elements used to seperate entire sections of a page */
#hrDivider {
    margin-top: 12vh;
    left: 0;
    opacity: 0;
}

/* || MOBILE SETTINGS || */
@media screen and (max-width: 768px) {
    :root {
        --FS: clamp(11px, 3vw, 24px);;
    }

    .blocks {
        flex-flow: column;
    }
    .box1 {
        order: 2;
    }

    .box2 {
        order: 1;
    }
}