1-styles.css

/*--------------------FONTS-------------------------------------------*/
@font-face {
    font-family: Source Sans Pro;
    src: url(./Fonts/SourceSansPro-Regular.otf);
}

@font-face {
    font-family: Source Sans Pro-Black;
    src: url(./fonts/SourceSansPro-Black.otf);
}

@font-face {
    font-family: Source Sans Pro-SemiBold;
    src: url(./fonts/SourceSansPro-Semibold.otf);
}

@font-face {
    font-family: Source Sans Pro-Bold;
    src: url(./fonts/SourceSansPro-Bold.otf);
}

@font-face {
    font-family: Source Sans Pro_Lightit;
    src: url(./fonts/SourceSansPro-LightIt.otf);
}

@font-face {
    font-family: Source Sans Pro-Light;
    src: url(./fonts/SourceSansPro-Light.otf);
}

@font-face {
    font-family: spincycle_ot;
    src: url(./fonts/spincycle_ot.otf)
}

/* Variables
  ============================= */
:root {
    --font-family-base: 'Source-sans-Pro-Regular';
    --font-family-title: 'Source-sans-Pro-Semibold';
    --font-family-bold: 'Source-sans-Pro-Bold';

    --font-size-x-small: 1rem;
    --font-size-small: 1.2rem;
    --font-size-medium: 1.6rem;
    --font-size-large: 1.8rem;
    --font-size-x-large: 2.3rem;
    --font-size-xx-large: 3.2rem;
    --font-weight-thin: 100;
    --font-weight-regular: 300;
    --font-weight-bold: 600;

    --white: white;
    --primary: #FF6565;
    --image-gradiant: radial-gradient(99% 99% at 50% 0%, rgba(41, 48, 61, 0.0001) 0%, #07162986 60%);
    --linear-gradient: linear-gradient(rgba(0, 0, 0, .1), rgba(7, 22, 41, .6) 0%, #07162980 20%);
}

/* BORDER GRABS for Wire-frame layout 

        border: 5px solid red;
        border: 5px solid orange;
        border: 5px solid yellow;
        border: 5px solid green;
        border: 5px solid blue;
        border: 5px solid indigo;
        border: 5px solid violet;
*/
/*    */
/*** 1. GLOBAL ***/

/* Reset / Normalize
  ============================= */
*,
*:after,
*:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

a {
    background-color: transparent;
    display: inline-block;
    justify-content: center;
    width: 150px;
}

b {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

img {
    border-style: none;
}

button,
input,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button:hover,
button:active {
    cursor: pointer;
    opacity: 0.9;
}

a:hover,
a:active {
    color: #FF6565;
}

/* container */

.container {
    max-inline-size: 1000px;
    inline-size: 400px;
    margin: 0 auto;
}

/* NAVBAR */

.header {
    min-block-size: 100px;
    margin-block-end: 225px;
}

.logo {
    width: 160px;
    height: auto;
}

.nav-list {
    display: none;
    list-style: none;

}

.nav-item {
    min-height: 15px;
    min-width: 120px;
    margin: 0 5px;
    inline-size: 75px;
    margin: 25px auto;
}

.nav-item a {
    color: var(--white);
    text-decoration: none;
    text-transform: lowercase;
    font-family: var(--font-family-base);
}

.nav-item a:hover {
    color: var(--primary);
    transition: ease-out 0.3s;
}

.header_container {
    padding-top: 30px;
}

.header_container:first-child {
    text-align-last: start;
}

.nav-icon {
    margin-top: 5px;
    margin-left: 10px;
    inline-size: 95px;
    display: inline-block;
    vertical-align: top;
    text-align: start;
}

.bar-icon {
    inline-size: 13px;
    position: relative;
}

.header_container input {
    visibility: hidden;
    position: absolute;
}

.header_container input:checked+.nav-icon .bar-icon {
    background-color: unset;
}

.header_container input:checked~.nav-list {
    display: block;
}

.bar-icon::after {
    inline-size: 18px;
    inset-block-start: 4px;
}

.bar-icon::before {
    inline-size: 20px;
    inset-block-end: 4px;
}

/* Screen will display "X" when navbar is clicked */

.header_container input:checked+.nav-icon .bar-icon::after {
    transform: rotate(-45deg);
    inset-block-start: 0;
    inline-size: 20px;
}

.header_container input:checked+.nav-icon .bar-icon::before {
    transform: rotate(45deg);
    inset-block-end: 0;
}

/* Animation/positions for icon */

.bar-icon,
.bar-icon::after,
.bar-icon::before {
    block-size: 2px;
    display: inline-block;
    border-radius: 1px;
    background-color: var(--white);
}

.bar-icon::after,
.bar-icon::before {
    inset-inline-start: 0;
    content: "";
    position: absolute;
    transform: rotate(0);
    transition: ease-out 0.3s;
}

/* HEADER HERO */

.header-hero {
    background-image: var(--image-gradiant), url("./images/headphones_hero_1.jpg");
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
    background-position: -575px -100px;
    max-block-size: 920px;
    min-block-size: 840px;
    margin: auto;
    padding-bottom: 20px;
    color: var(--white);
    text-align: center;
}

.header-1 {
    font-family: var(--font-family-title);
    font-size: var(--font-size-x-large);
}

.header-2 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    margin: 20px auto;
}

.header-3 {
    margin-block-start: 65px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-thin);
    line-height: 30px;
}

/* BUTTON */

.btn {
    border: none;
    border-radius: 25px;
    font-family: var(--font-family-base);
    letter-spacing: .5px;
    color: var(--white);
    block-size: 48px;
    inline-size: 160px;
    text-transform: uppercase;
    background-color: var(--primary);
    box-shadow: 3px 15px 30px rgba(0, 0, 0, 0.74);
}
/* WHAT WE DO */

.about {
    max-block-size: 1920px;
    max-inline-size: 100%;
    text-align: center;
}

.about-container{
    margin: 30px auto;
}

.about-title {
    font-family: var(--font-family-bold);
    font-size: var(--font-size-medium);
    margin: 60px auto;
    margin-block-end: 40px;
}

.about-info {
    max-inline-size: 575px;
    margin: auto;
    line-height: 25px;
    font-family: var(--font-family-base);
}

.about-column {
    margin-block-end: 100px;
    margin-top: 30px;
    margin-inline: auto;
    max-inline-size: 200px;
}

.column-title {
    margin: 5px auto;
    font-family: var(--font-family-title);
}

.column-detail {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-thin);
    line-height: 25px;
    max-inline-size: 200px;
}

@media screen and (max-width: 480px) {
    .container {
        inline-size: 400px;
    }

    .header-hero {
        background-repeat: no-repeat;
        background-position: -600px -40px;
    }

    .header-1 {
        inline-size: 375px;
        font-size: var(--font-size-medium);
        margin: 5px auto;
    }

    .header-2 {
        inline-size: 400px;
        font-size: var(--font-size-x-small);
        margin: 10px auto;
    }

    .btn {
        margin: 20px auto;
    }

    .header-3 {
        inline-size: 340px;
        margin: 20px auto;
        text-align: justify;
    }

    .about {
        text-align: center;
        margin: 20px auto;
    }

    .about-column {
        margin: 40px auto;
    }

    .column-detail {
        font-family: var(--font-family-base);
        inline-size: 340px;
        margin-inline: auto;
    }

    .about-info {
        inline-size: 340px;
    }
}

/* TABLET */

@media screen and (min-width: 768px) {
    .container {
        inline-size: 600px;
    }

    .header_container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block-start: 20px;
    }

    .nav-list {
        display: inline-flex;
        justify-content: space-between;
        inline-size: 275px;
    }

    .logo {
        flex-basis: 80%;
    }

    .nav-icon {
        display: none;
    }

    .header-hero {
        background-repeat: no-repeat;
        background-position: center 0;
    }

    .header-1 {
        margin: auto;
    }

    .header-2 {
        margin: 10px auto;
        inline-size: 600px;
    }

    .btn {
        margin: 30px auto;
    }

    .header-3 {
        inline-size: 600px;
        margin: 10px auto;
    }

    .about-container{
        display: grid;
        column-gap: 30px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .column-detail {
        font-family: var(--font-family-base);
        line-height: 20px;
    }
}

/* DESKTOP */

@media screen and (min-width: 1024px) {
    .container {
        inline-size: 1000px;
    }

    .header-hero {
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: cover;
        inline-size: 100%;
    }

    .header-1 {
        margin: auto;
    }

    .header-2 {
        margin: 10px auto;
        inline-size: 600px;
    }

    .btn {
        margin: 30px auto;
    }

    .header-3 {
        inline-size: 800px;
        margin: 30px auto;
    }
}