* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #abccdf;
    color: white;
    direction: rtl;
}

#header-canvas { 
    width: 100%; 
    height: 600px; 
}

.overlay { 
    position: absolute; 
    top: 170px; 
    width: 100%; 
    text-align: center; 
    color: #9b9b9b;
    pointer-events: none;
}

h1 { 
    font-size: 8vw; 
    text-shadow: 0.5vw 0.5vw #061a38, -0.5vw -0.5vw #061a38; 
    font-family: "Marhey", sans-serif;
}

.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    background-color: #060120;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar li {
    flex: 1;
    margin: 0.9vw 0.3vw;
    background-color: #152f55ce;
    border-radius: 1.5vw;
}

.navbar li a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: rgb(210, 211, 206);
    font-size: 3vw;
    font-weight: bold;
    padding: 3vw 0;
    font-family: "El Messiri", sans-serif;
}

.navbar li a:hover,
.navbar li a:active {
    background-color: rgb(140, 221, 170);
    color: #060120;
    border-radius: 2vw;
}

.definition {
    color: black;
    overflow-wrap: anywhere;
    padding: 0.5vw 2vw;
    font-size: 4vw;
    font-family: "Rubik", sans-serif;
}
.point{
    font-size: 4vw;
}

.distance {
    font-weight: bold;
    color: #184aa9;
}

.math-content {
    color: #0a2a51;
    background-color: rgba(175, 223, 206, 0.731);
    direction: rtl;
    font-family: Vazirmatn, Tahoma, sans-serif;
    line-height: 2.1;
    font-size: 40px;
    margin: 40px;
    border-radius: 10vw;
    padding: 5vw;
    box-shadow: 0 0 10px #232a50;
}

.math-content p {
    margin: 12px 0;
}

.definition-title {
    font-family: Vazirmatn, Tahoma, sans-serif;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #00253d;
    font-size: 5vw;
    padding-top: 6vw;
}

h3 {
    text-align: center;
}

.reference {
    padding-top: 2vw;
    font-size: 3vw;
    padding-right: 5vw;
    color: rgb(83, 83, 83);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
}

.name {
    font-size: 2.8vw;
}

iframe {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: #f0f0f0;
    display: block;
    margin: 40px auto;
    aspect-ratio: 16 / 9;
    height: auto;
}

iframe.square { aspect-ratio: 1 / 1; }
iframe.tall   { aspect-ratio: 3 / 4; }
iframe.short  { aspect-ratio: 16 / 10; }

@supports not (aspect-ratio: 1) {
    iframe { height: 56.25vw; }
    iframe.square { height: 100vw; }
    iframe.tall   { height: 133.33vw; }
    iframe.short  { height: 62.5vw; }
}

@media (max-width: 767px) {
    .math-content {
        font-size: 52px;
        padding: 8vw;
        margin: 30px 15px;
        border-radius: 12vw;
    }
    .definition {
        font-size: 6vw;
    }
    .point{
        font-size: 6vw;
    }
    .definition-title {
        font-size: 8vw;
        padding-top: 10vw;
    }
    .reference {
        font-size: 5vw;
        padding-right: 8vw;
    }
    .name {
        font-size: 4.5vw;
    }

    iframe {
        aspect-ratio: 10 / 12;  
        max-width: 100%;
        margin: 50px auto;
    }

    iframe.square,
    iframe.tall {
        aspect-ratio: 4 / 6;   
    }

    @supports not (aspect-ratio: 1) {
        iframe { height: 120vw; }
        iframe.square,
        iframe.tall { height: 150vw; }
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 70px;
        text-shadow: 6px 6px #061a38, -6px -6px #061a38;
    }

    .navbar li a {
        font-size: 18px;
        padding: 14px 0;
    }

    .definition {
        font-size: 23px;
        padding: 12px 24px;
    }
    .point{
        font-size: 23px;
    }

    .definition-title {
        font-size: 28px;
        padding-top: 32px;
    }

    .math-content {
        font-size: 18px;
        padding: 32px;
        border-radius: 32px;
        max-width: 1000px;
        margin: 40px auto;
    }

    .reference {
        font-size: 16px;
        padding-right: 32px;
    }

    .name {
        font-size: 16px;
    }

    .navbar li {
        margin: 8px 6px;
        border-radius: 14px;
    }

    body {
        overflow-x: hidden;
    }

    iframe {
        aspect-ratio: 16 / 9;
        max-width: 1000px;
        margin: 40px auto;
    }

    @supports not (aspect-ratio: 1) {
        iframe { height: 562.5px; } 
    }
}

.iframe-container {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

iframe.interactive {
    width: 100%;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: #f0f0f0;
    display: block;
    aspect-ratio: 16 / 9;
    height: auto;
}

iframe.iframe-distance       { height: 600px; }
iframe.iframe-metric-point   { height: 800px; }
iframe.iframe-metric-distance{ height: 1200px; }   
iframe.iframe-norm           { height: 1100px; }
iframe.iframe-metric-checker { height: 950px; aspect-ratio: 4 / 3; }
iframe.iframe-quiz           { height: 850px; }

@media (max-width: 767px) {
    .iframe-container {
        padding: 0 10px;
        margin: 30px auto;
    }

    iframe.interactive {
        aspect-ratio: 10 / 11;   
        border-radius: 12px;
    }

    iframe.iframe-distance       { height: 400px; }
    iframe.iframe-metric-point   { height: 580px; }
    iframe.iframe-metric-distance{ height: 780px; }
    iframe.iframe-norm           { height: 720px; }
    iframe.iframe-metric-checker { height: 800px; aspect-ratio: 1 / 1.2; }
    iframe.iframe-quiz           { height: 750px; }
}

@supports not (aspect-ratio: 1/1) {
    iframe.interactive { height: 56.25vw; } 
}
@media (min-width: 768px) {
    .iframe-container {
        overflow: hidden; 
        border-radius: 16px;
    }

    iframe.interactive {
        transform: scale(0.85);      
        transform-origin: top center;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    iframe.iframe-distance       { height: 600px; } 
    iframe.iframe-metric-point   { height: 940px; }
    iframe.iframe-metric-distance{ height: 1170px; }
    iframe.iframe-norm           { height: 1050px; }
    iframe.iframe-metric-checker { height: 1110px; }
    iframe.iframe-quiz           { height: 1000px; }
}