:root{
  --mPrimary: hsl(300, 63%, 80%);
  --mAccent: hsl(from var(--mPrimary) h s calc(l - 30));
  --mText: hsl(from var(--mPrimary) h s calc(l + 10));
  --mBackground: hsl(240, 14%, 10%);
  --mSecondary: hsl(from var(--mBackground) h s calc(l + 30));
}

h1,h2,h3,p{
    font-size: clamp(0px, 5vw, 100px);
    color: var(--mText);
}
a{
    font-size: clamp(0px, 5vw, 100px);
    color: var(--mText);
}
a:hover{
    color: hsl(from var(--mText) h s calc(l - 5));
}
footer p{
    font-size: clamp(0px, 2vw, 70px);
    color: hsl(from var(--mText) h s calc(l - 70));
}
html{
    height: 100%;
}

body{
    height: 100%;
    background-color: var(--mBackground);
    display: grid;
    grid-template-columns: 1fr 75vw;
    grid-template-rows: 11vw 10fr 8vw;
    gap: 3px;
    margin: 0vw 2vw;
}

header{
    border: solid 0.3vw hsl(from var(--mBackground) h s calc(l - 3));
    background-color: hsl(from var(--mBackground) h s calc(l - 2));
    display: grid;
    justify-content: center;
    align-items: center;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    text-align: center;
    border-radius: 4vw;
}
header span{
    color: var(--mPrimary);
}

aside{
    
    border: solid 0.3vw hsl(from var(--mBackground) h s calc(l - 4));
    background-color: hsl(from var(--mBackground) h s calc(l - 3));
    text-align: center;
    border-radius: 4vw;
}
aside section{
    text-align: center;
    height: auto;
    background-color: var(--mSecondary);
    border-radius: 4vw;
    margin: 1vw;
    margin-left: 2vw;
    margin-right: 2vw;
    padding: 1vw;
    border: solid 0.1vw var(--mText);
    box-shadow:
    10px 10px 20px rgb(0, 0, 0,0.6);
    transition: margin 0.5s, box-shadow 0.4s;
}
aside section:hover{
    background-color: hsl(from var(--mSecondary) h s calc(l + 5));
    box-shadow:
    15px 15px 20px rgb(0, 0, 0,0.6);
    transition: margin 0.5s, box-shadow 0.4s;
}
aside section h3{
    font-size: 2vw;
    grid-row: 2;
    grid-column: 1/3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vw;
}

main{
    
    border: solid 0.3vw hsl(from var(--mBackground) h s calc(l - 5));
    background-color: hsl(from var(--mBackground) h s calc(l - 4));
    grid-column: 2;
    grid-row: 2;
    overflow: auto;
    text-align: center;
    border-radius: 4vw;
}

main section{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 30vw;
    background-color: var(--mSecondary);
    border-radius: 4vw;
    margin: 1vw;
    margin-left: 3vw;
    margin-right: 3vw;
    padding: 2vw;
    border: solid 0.2vw var(--mText);
    box-shadow:
    10px 10px 20px rgb(0, 0, 0,0.6),
    inset 0 10vw 5vw -60px rgba(255,255,255,0.2);
    transition: margin 0.5s, box-shadow 0.4s;
}
main section:hover{
    height: 30vw;
    margin-left: 1vw;
    margin-right: 1vw;
    box-shadow:
    15px 15px 20px rgb(0, 0, 0,0.6),
    inset 0 10vw 5vw -60px rgba(255,255,255,0.3);
    transition: margin 0.5s, box-shadow 0.4s;
}
main section h2{
    color: var(--mPrimary);
    font-size: 4vw;
    grid-row: 1;
    grid-column: 1/2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vw;
}
main section span{
    font-size: 4.5vw;
    color: var(--mAccent);
}
main section div{
    grid-row: 1;
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vw;
}
main section p{
    font-size: 2vw;
    grid-row: 2;
    grid-column: 1/3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vw;
}

footer{
    border: solid 0.3vw hsl(from var(--mBackground) h s calc(l - 3));
    background-color: hsl(from var(--mBackground) h s calc(l - 2));
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 3;
    text-align: center;
    border-radius: 4vw;
}


.media {
    position: relative;
    border-radius: 2vw;
    transition: 1s;
    margin: 1vw;
}

.media img,.media video {
    position: absolute;
    border-radius: 2vw;
    border: 0.2vw;
    border-style: solid;
    border-color: var(--mPrimary);
}
.media img {
    height: 100%;
    transition: opacity 0.5s,box-shadow 0.2s;
    box-shadow: 0 0 10px;
}
.media video {
    width: 14vw;
    transform: rotate(90deg);
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s, transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}

.media:hover video {
    transform: rotate(0deg);
    width: 100%;
    opacity: 1;
    transition: width 0.7s, transform 0.7s, opacity 1s, box-shadow 0.5s;
    box-shadow: 0 0 40px;
}
.media:hover img {
    opacity: 0;
    box-shadow: 0 0 0;
}



/* ===== Custom Scrollbar ===== */

/* teljes scrollbar terület */
::-webkit-scrollbar {
  width: 0px;              /* scrollbar vastagság */
}