@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');

* {
    box-sizing: border-box;
}

.card, #big, #topHeader, #mheadImg {
    border-radius:20px;
}

.space-mono-regular {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.space-mono-bold {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
}

.space-mono-regular-italic {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: italic;
}

.space-mono-bold-italic {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: italic;
}

#AccessMenu {
    position:fixed;
    top: inherit;
    background-color: #ce98ff;
    border-radius:20px;
    border-style:solid;
    border-width: 5px;
    border-color:#fff6f6;
    right:0;
    float:right;
    width:20vw;
    height:20vw;
    top:9vw;
    overflow:hidden;
    margin-right:1vw;
    align-items: center;
    flex-flow:column;
    gap:5px;
}

.p3 {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
    font-size:18px;
}

.p2 {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
    font-size:18px;
}

.p1 {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
    font-size:36px;
}

.h {
    font-family: "Modak", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:60px;
}

.h2 {
    font-family: "Modak", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:48px;
}

.v {
    font-family: "Modak", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:64px;
}

.v2 {
    font-family: "Modak", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:47px;
}

.v3 {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
    font-size:18px;
}

:root {
    --header-image: url('assets/img/default.jpg');
}


#main {
    display:grid;
    background-color: #ce98ff;
}

#topHeader {
    position:sticky;
    min-height:fit-content;
    max-height:8vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    background-color:#4f009f;
    color:#fff6f6;
    margin:0;
    display:grid;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: 1;
    gap:1vw;
    width:auto;
    top:0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-left:1vw;
    padding-right:1vw;
}

#mBody {
    display:grid;
    align-items: center;
    margin-left:0;
    justify-items:center;
    margin-left:2vw;
    margin-right:2vw;
}

#mheadImg {
    display:grid;
    width:100%;
    object-fit: cover;
    height:30vh;
    margin:0;
    background-size:cover;
    background-position: center;
    text-align: center;
    color:#fff6f6;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(9,1fr);
    line-height:3vw;
    gap:1vh;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    
}

.social {
    width:6vw;
}

#big{
    width:95%;
    justify-self:center;
    background-color: #fff6f6;
    padding-bottom:1vw;
    margin-bottom:5vh;
    margin:0;
    display:grid;
}

#topHeader > a{
    color: inherit; /* Inherits the color of the parent element */
    text-decoration: none; /* Removes the underline */
}

.textBlock {
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(4,1fr);
    column-gap: 2.5vw;
    row-gap:0.5vh;
}

.textBlockB {
    display:grid;
    grid-template-columns: 3fr 3fr 3fr 2fr;
    grid-template-rows: repeat(6,auto);
    column-gap: 2.5vw;
    row-gap:0;
    margin-left: 1vw; 
}

.textBlockR {
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(3,1fr);
    column-gap: 2.5vw;
    row-gap:0.5vh;
}

#pluh {
    display:grid;
    grid-auto-rows: min-content;
    gap:5vh;
}

.genPhoto {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#mContent {
    display:grid;
    grid-template-rows: repeat(4, auto);
    gap: 1vh;
}

#resContent {
    display:grid;
    grid-template-rows: repeat(3, auto);
    gap: 1vh;
}


@media (max-width: 768px) {

    * {
        border-radius: 12px;
    }

    .p1 { font-size: 24px; }
    .p2 { font-size: 16px; }
    .p3 { font-size: 14px; }
    .h2 { font-size: 28px; }

    .v { font-size: 70px; }
    .v2 { font-size: 35px; }
    .v3 { font-size: 14px; }

    #topHeader {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 10px;
        text-align: center;
        max-height: none;
    }

    .textBlock {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 20px;
        padding: 20px 10px;
    }

    .textBlock > * {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: center !important;
        text-align: center;
    }

    .textBlock img {
        max-width: 60% !important;
        height: auto;
    }

    #mheadImg {
        height: 50vh;
        line-height: normal;
        padding: 20px;
    }

    .social {
        width: 40px;
    }

    #big {
        width: 100%;
        border-radius: 0;
    }

    #topHeader > a:first-child {
        font-size: 18px !important;
        line-height: 1.2;
    }   
    
    #mheadImg {
        height: 30vh !important;
        aspect-ratio: 16 / 6;
        background-size: cover;
        background-position: center;
    }

    #topHeader > a {
        font-size: 14px !important;
    }

}