/* Settings */

:root {
    --white: #f8f7f4;
    --simple_white: #f0f8ff;
    --black: #000000;
    --dark_gray: #1d1c20;
    --light_gray: #4f4f4f;
    --purpule: #b673e6;
 }

 @font-face {
    font-family: "jura"; 
    src: url("../fonts/jura/Jura-VariableFont_wght.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
}

/* Basic elements */
.a {
    color: var(--white);
}

.a:hover {
    color: var(--purpule);
}

.h1 {
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 0 1rem 0;
}

.h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 1rem 0;
}

.ul {
    margin: 1rem 0 1rem 0;
}

.li {
    list-style-type: disc;
}

/* Page */
html {
    font-family: 'jura';
    font-size: 30px;
    color: var(--white);
    background: var(--black);
    background: linear-gradient(90deg, var(--purpule) -30%, var(--black) 30%);
}

.body {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    gap: 1rem 1rem;
    background-image: url("../img/stars.png");
    background-size: cover;
}

.header_logo {
    margin: 0 0 1rem 0;
}

.header_logo-img {
    width: 250px;
    height: 250px;
}

.content {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 1rem 1rem;
    margin: 0;
}

.content_block {
    padding: 20px;
    font-size: 1rem;
    background-color: var(--dark_gray);
    border: 1px var(--light_gray) solid;
    border-radius: 15px;
    opacity: 0.8;
    list-style-type: none; 
}

@media (min-width: 1000px){
    .content_block:hover {
        -webkit-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01);
        transition: transform 0.25s;
        opacity: 1;
        box-shadow: 0px 0px 10px #4f4f4f;
    }
}

.content_block__1 {
    grid-column: 1/11;
}

.content_block__2 {
    grid-column: 11/20;
}

.content_block__3 {
    grid-column: 2/12;
}

.content_block__4 {
    grid-column: 12/21;
}

.content_block__5 {
    grid-column: 1/11;
}

.content_block__6 {
    grid-column: 11/20;
}

.footer {
    grid-column-start: 2;
    width: fit-content;
}

/* Mobile */
@media (max-width: 1000px) {
    .body {
        grid-template-columns: 1fr;
        background-size: auto;
    }

    .header {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1rem 1rem;
    }

    .footer {
        grid-column-start: 1;
    }
}

@media (max-width: 800px) {
    html {
        font-size: 20px;
        background: linear-gradient(180deg, var(--purpule) -70%, var(--black) 100%);
    }
    
    .content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem 301rempx;
        margin: 0 1rem 0 1rem;
        padding: 0;
    }
    
    .content_block__1, .content_block__2, .content_block__3, .content_block__4, .content_block__5, .content_block__6 {
        grid-column: 1/1;
    }

    .header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem 1rem;
    }

    .header_logo-img {
        display: block;
        margin: 0 auto;
    }

    .h1 {
        text-align: center;
    }

    .footer {
        width: auto;
        margin: 0 1rem 0 1rem;
    }
}