*{
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background-image: url(/assets/background_tylijura-abstract-10169397_1920.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #00C2BA;
    display: grid;
    grid-template-columns: 3fr 1fr; 
    grid-template-rows: 6fr 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        "iframe nav"
        "footer nav"; 
}
iframe{
    grid-area: iframe;
    height: 100%;
    width: 100%;
    border: none;
}
@media (min-width: 650px){
    #icons{
        cursor: pointer;
        display: none;
    }
    nav{
        font-family: "orbitron", sans-serif;
        margin-right: 20px;
        margin-top: 20px;
        padding: 15px;
        width: auto;
        font-size: 26pt;
        grid-area: nav;
    }
    nav a{
        display: block;
        width: 100%;
        text-decoration: none;
        color: #00C2BA;
    }
    nav ul{
        list-style-type: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    nav ul li{
        box-shadow: 0 0 10px #00C2BA ;
        border: 2px solid #00C2BA;
        border-radius: 15px;
        margin-bottom: 25px;
        padding: 9px;
        transition: all 0.3s ease;
    }
    nav ul li:hover{
        background-color: #00C2BA;
        box-shadow: 0 0 20px #00C3BA, 0 0 40px #00C4BA;
    }
    nav ul li:hover a{
        color:black;
    }
    .photo_pro img{
        border-radius: 250px;
        width: 250px;
        height: 250px;
        margin-left: 30%;
        margin-top: 15%;
        box-shadow: 0 0 10px #00C2BA ;
        border: 2px solid #00C2BA;
        cursor: pointer;
    }
    .photo_pro img:hover{
        box-shadow: 0 0 20px #00C3BA, 0 0 40px #00C4BA;
        transition: all 0.3s ease;
    }
}
footer{
    grid-area: footer;
    background-color: transparent;
    backdrop-filter: blur(30px);
    border-radius: 15px;
    padding: 20px;
}
footer p{
    font-family: 'Courier New', Courier, monospace;
    color: #00C2BA;
    font-weight: bolder;
    font-size: 15pt;
    text-align: center;
}
footer a{
    text-decoration: none;
}
footer img{
    width: 70px;
    height: 70px;
    margin-left: 48%;
    margin-top: 10px;
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

@media (max-width: 650px){
    body{
        height: 100vh;
        background-image: url(/assets/background_tylijura-abstract-10169397_1920.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: #00C2BA;
        display: grid;
        grid-template-columns: 3fr; 
        grid-template-rows: 6fr; 
        gap: 0px 0px;
    }
    iframe.menu_actif{
        display: none;
    }
    #menu_button{
        cursor: pointer;
        position: absolute;
        right: 15px;
        font-size: 24pt;
        color: #9765E0;
    }
    #menu_button::before{
        content: "\2630";
    }
    #menu_button.bouton_actif::before {
        content: "\2715";
    }
    nav{
        display: none;
        font-family: "orbitron", sans-serif;
        margin-right: 50px;
        margin-top: 20px;
        padding: 15px;
        width: auto;
        font-size: calc(0.5rem + 1.5vw);
        grid-area: auto;
    }
    nav a{
        display: block;
        width: 100%;
        text-decoration: none;
        color: black;
    }
    nav.active ul{
        list-style-type: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        transition: 0.25s;
    }
    nav.active{
        display: block;
    }
    nav ul{
        display: none;
    }
    nav ul li{
        border-radius: 15px;
        margin-bottom: 25px;
        padding: 9px;
        background-color: #00C2BA;
        box-shadow: 0 0 20px #00C3BA, 0 0 40px #00C4BA;
    }
    nav ul li a:active{
        color:#00C2BA;
        background-color: transparent;
    }
    nav ul li:active{
        background-color: transparent;
    }
    .photo_pro img{
        width: 0;
        height: 0;
    }
    footer{
    grid-area: footer;
    background-color: transparent;
    backdrop-filter: blur(30px);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    }
    footer p{
        font-family: 'Courier New', Courier, monospace;
        color: #00C2BA;
        font-weight: bolder;
        font-size: 13pt;
        text-align: center;
    }
    footer a{
        text-decoration: none;
    }
    footer img{
        width: 38px;
        height: 38px;
        margin-left: 48%;
        margin-top: 0;
    }
}